约束布局的细节使用
- 约束布局的使用
- 基本使用
- 细节使用
- 总结
约束布局的使用
约束布局的使用可以提升app的性能,嵌套层级会明显减少。而且官方也推荐使用约束布局。不过也不是说现在所有情况下都用约束布局,这需要自己根据现实场景来判断。在下面的使用细节中会细说一下。
基本使用
约束布局的常用属性如下:
// 常用属性
layout_constraintLeft_toLeftOf//目标view左边与另一个view左边对齐
layout_constraintLeft_toRightOf//目标view左边与另一个view右边对齐
layout_constraintRight_toLeftOf//目标view右边与另一个view左边对齐
layout_constraintRight_toRightOf//目标view右边与另一个view右边对齐
layout_constraintTop_toTopOf//目标view顶部与另一个view顶部对齐
layout_constraintTop_toBottomOf//目标view顶部与另一个view底部对齐
layout_constraintBottom_toTopOf//目标view底部与另一个view顶部对齐
layout_constraintBottom_toBottomOf//目标view底部与另一个view底部对齐
layout_constraintBaseline_toBaselineOf//基于baseline对齐
layout_constraintStart_toEndOf//目标view起始边缘与另一个view结束边缘对齐
layout_constraintStart_toStartOf//目标view起始边缘与另一个view起始边缘对齐
layout_constraintEnd_toStartOf//目标view结束边缘与另一个view起始边缘对齐
layout_constraintEnd_toEndOf//目标view结束边缘与另一个view结束边缘对齐
以上是约束布局的基本属性,使用也是很简单,多练习就会使用了。
细节使用
1. 水平或者垂直方向想match-parent
举个例子:水平方向match-parent。首先 android:layout_width="0dp"需要设置为0dp,这个就是表示match-parent。其次需要设置:
layout_constraintLeft_toLeftOf =“parent”
layout_constraintLeft_toRightOf =“parent”
这里的parent可以换成你需要的父布局。对应的在垂直方向上match-parent也是同样的,就不赘述了。
2.约束布局中权重的使用
重点:使用约束布局的权重,控件之间需要两两关联,不然就算设置0dp还是没效果。
在约束布局中权重有:
app:layout_constraintHorizontal_weight=""
app:layout_constraintVertical_weight=""
第一个是在水平方向的权重,下面是在垂直方向上的权重。在设置权重时,如果只设置权重比例的话,是没有效果的,必须要给对应的方向设置为0dp,不然权重设置不会有效果,比如设置水平方向的权重,则要设置:android:layout_width=“0dp”。(这一点很重要,小编因为这个问题,折磨了好多次了,所以痛下决心要写一篇博客记录一下)。
实例
如下图的需求
上图的需求肯定需要使用权重来处理,不然下面对应数据就不好对齐。下面是对应的代码
<android.support.constraint.ConstraintLayout
android:id="@+id/bill_msg"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/bill_num"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
android:text="@string/account_detail_orderNum"
android:textColor="@color/pub_color_999999"
android:gravity="center"
android:textSize="@dimen/public_text_size_28px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1.5"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="@+id/order_time"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/order_time"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/account_detail_orderTime"
android:gravity="center"
android:textColor="@color/pub_color_999999"
android:textSize="@dimen/public_text_size_28px"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1.25"
app:layout_constraintLeft_toRightOf="@+id/bill_num"
app:layout_constraintRight_toLeftOf="@+id/order_type"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/order_type"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/account_detail_orderType"
android:gravity="center"
android:textColor="@color/pub_color_999999"
android:textSize="@dimen/public_text_size_28px"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/order_time"
app:layout_constraintRight_toLeftOf="@+id/pay_type"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/pay_type"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/account_detail_payType"
android:gravity="center"
android:textColor="@color/pub_color_999999"
android:textSize="@dimen/public_text_size_28px"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/order_type"
app:layout_constraintRight_toLeftOf="@+id/order_money"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/order_money"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/account_detail_orderMoney"
android:gravity="center"
android:textColor="@color/pub_color_999999"
android:textSize="@dimen/public_text_size_28px"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/pay_type"
app:layout_constraintRight_toLeftOf="@+id/pay_money"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/pay_money"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/account_detail_payMoney"
android:gravity="center"
android:textColor="@color/pub_color_999999"
android:textSize="@dimen/public_text_size_28px"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/order_money"
app:layout_constraintRight_toLeftOf="@+id/handFee"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/handFee"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/account_detail_handFee"
android:gravity="center"
android:textColor="@color/pub_color_999999"
android:textSize="@dimen/public_text_size_28px"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/pay_money"
app:layout_constraintRight_toLeftOf="@+id/account_money"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/account_money"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/account_detail_accountMoney"
android:gravity="center"
android:textColor="@color/pub_color_999999"
android:textSize="@dimen/public_text_size_28px"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/handFee"
app:layout_constraintRight_toLeftOf="@+id/error_type"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/error_type"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="异常类型"
android:gravity="center"
android:textColor="@color/pub_color_999999"
android:textSize="@dimen/public_text_size_28px"
android:visibility="gone"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/account_money"
app:layout_constraintRight_toLeftOf="@+id/operate"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/operate"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="@string/account_detail_operate"
android:gravity="center"
android:textColor="@color/pub_color_999999"
android:textSize="@dimen/public_text_size_28px"
android:layout_marginTop="@dimen/public_space_21px"
android:layout_marginBottom="@dimen/public_space_30px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_weight="1"
app:layout_constraintLeft_toRightOf="@+id/error_type"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>
3.BIOS(间隙比例)
这也是一个十分好用的属性,属性如下所示:
layout_constraintHorizontal_bias //水平方向
layout_constraintVertical_bias //垂直方向
假设有一个控件,你想让他偏左一点,不使用此属性的话,会多写几句代码来控制,使用此属性就可以一句解决。
上面两个图片可以通过修改水平方向bias的值来改变
<TextView
android:id="@+id/TextView1"
...
app:layout_constraintHorizontal_bias="0.3"//或者0.6
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent" />
总结
目前在开发中,以上问题遇到的比较多,其余的等后面遇到会及时更新。其实开发时,不要一味的使用约束布局,虽然此布局是官方推荐。建议根据情况来使用布局。在使用权重的时候一定要看上述的重点,不然就很难顶。使用的时候选一个好的“基点”这样可以少写一下margin_left之类的属性。