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

Posted 2021-12-02 nicojerry

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>