码迷,mamicode.com
首页 > 移动开发 > 详细

【安卓基础】使用Guideline与约束辅助布局的平分空间设计

时间:2019-05-21 09:34:35      阅读:266      评论:0      收藏:0      [点我收藏+]

标签:otto   span   提升   back   activity   相对   size   百分比   布局   

ConstraintLayout布局已经推出了很长一段时间,功能也是比较强大,能有效减少界面的视图层级嵌套,一定程度提升界面绘制效率。

 

在项目中,我也是最近才选择开始使用ConstraintLayout,之前一直用的是LinearLayout + FrameLayout进行复杂布局。

 

在使用ConstraintLayout的时候遇到了一个问题,需要在水平方向平分空间给三个视图,之前只是简单了解约束布局的使用,并没有真正去在实战中使用。在后面的查阅文档和实践中,总结了三等分水平空间可以有下面两种办法:

 

ConstraintLayout约束参数:

1. 首先按照约束规则将需要平分空间的视图建立相互约束链条,一定要相互约束(第一个视图右边依赖第二个视图左边,第二个视图左边依赖第一个视图右边,第二个视图右边依赖第三个视图左边......)

2. 为每个视图加上app:layout_constraintHorizontal_weight属性,设置为1即可水平平分空间(layout_constraintHorizontal_weight作用类似于LinearLayout的weight属性,可以不设置此属性,默认为1)

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".surface.impl.message.ActivityMessage">
    
    <FrameLayout
        android:id="@+id/ucContentArea"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/ucContentArea2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

    <FrameLayout
        android:id="@+id/ucContentArea2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/ucContentArea"
        app:layout_constraintRight_toLeftOf="@id/ucContentArea3"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

    <FrameLayout
        android:id="@+id/ucContentArea3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintLeft_toRightOf="@id/ucContentArea2"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent">

    </FrameLayout>

</android.support.constraint.ConstraintLayout>

 

使用Guideline辅助布局的设计

1. 使用Guideline可以在界面上任何位置(支持精确位置,百分比位置)创建一条水平或者垂直的参考系,Guideline其实就是一个不绘制任何内容的View,子视图通过约束参数可以相对于Guideline进行位置布局。

2. Guideline只需要关注:android:orientation、app:layout_constraintGuide_percent、app:layout_constraintGuide_begin、app:layout_constraintGuide_end这四个参数。

3. orientation用于设置参考系是水平还是垂直的,percent参数用于使用百分比控制参考系的位置,begin和end参数用于使用精确值控制参考线的位置(优先级:percent > begin > end,即设置percent时,begin不会生效)

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".surface.impl.message.ActivityMessage">


    <ImageView
        android:id="@+id/uaActReturn"
        android:layout_width="45dp"
        android:layout_height="45dp"
        android:src="@mipmap/global_ic_return"
        android:tint="#3388FF"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="个人消息"
        android:textColor="#000000"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="@id/uaActReturn"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/uaActReturn" />

    <View
        android:id="@+id/uiBarDivider"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        android:background="#E3E4E6"
        app:layout_constraintTop_toBottomOf="@id/uaActReturn" />


    <android.support.constraint.Guideline
        android:id="@+id/umVertical333"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.33" />

    <android.support.constraint.Guideline
        android:id="@+id/umVertical666"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.66" />

    <TextView
        android:id="@+id/uiTabPolice"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:gravity="center"
        android:text="普通"
        android:textSize="12sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/umVertical333"
        app:layout_constraintTop_toBottomOf="@id/uiBarDivider" />

    <TextView
        android:id="@+id/uiTabMaintain"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="紧急"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@id/uiTabPolice"
        app:layout_constraintLeft_toRightOf="@id/umVertical333"
        app:layout_constraintRight_toLeftOf="@id/umVertical666"
        app:layout_constraintTop_toTopOf="@id/uiTabPolice" />

    <TextView
        android:id="@+id/uiTabInstall"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:gravity="center"
        android:text="其他"
        android:textSize="12sp"
        app:layout_constraintBottom_toBottomOf="@id/uiTabPolice"
        app:layout_constraintLeft_toRightOf="@id/umVertical666"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@id/uiTabPolice" />

</android.support.constraint.ConstraintLayout>

 

【安卓基础】使用Guideline与约束辅助布局的平分空间设计

标签:otto   span   提升   back   activity   相对   size   百分比   布局   

原文地址:https://www.cnblogs.com/nicojerry/p/10870759.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!