ConstraintLayout优化布局的强大控件

ConstraintLayout最大的好处在于布局基本只需要这一层就几乎可以实现所有的效果,布局优化至最少层数。在灵活度上更优于LinearLayout和RelativeLayout。可视化可拖拽相当的方便。

很久前了解过,最近才学习,在此记录

首先需要引入我们的ConstraintLayout,在build.gradle中加入:

compile 'com.android.support.constraint:constraint-layout:1.0.2'

基础操作

《ConstraintLayout优化布局的强大控件》 拉入控件

控件的四角可以调节控件大小,四边上的圆形是添加约束点,即ConstraintLayout的核心功能。

《ConstraintLayout优化布局的强大控件》 示例

实现代码
 <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

可以看到一种新的属性,layout_constraintBottom_toBottomOf即图中所表现出的约束底部再parent的底部。同类属性还有自行脑补用途

  • layout_constraintRight_toLeftOf
  • layout_constraintRight_toRightOf
  • layout_constraintTop_toTopOf
  • layout_constraintTop_toBottomOf
  • layout_constraintBottom_toTopOf
  • layout_constraintBottom_toBottomOf
  • layout_constraintBaseline_toBaselineOf

同理控件与控件之间的约束

《ConstraintLayout优化布局的强大控件》 控件间约束

只是将parent属性改为@+id/xxx

现在其并没有出现什么强于RelativeLayout的地方,看几个

特殊的属性
  • 宽高比拉伸控件
    宽高都是0dp即any size时
    app:layout_constraintDimensionRatio=”16:6″默认是宽高比,属性还有“W,16:6”和“H,16:6”的写法。w宽h高谁在前谁是分母。
  • 类似LinearLayout中等分效果
<TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/common_red"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@id/textView4"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/textView4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/green"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toLeftOf="@id/textView5"
        app:layout_constraintStart_toEndOf="@+id/textView3"/>

    <TextView
        android:id="@+id/textView5"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/blue"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView4"/>

《ConstraintLayout优化布局的强大控件》 效果

如果需要进行某种比例的等分只需加入属性

app:layout_constraintHorizontal_weight

对于这种相互关联的控件,组成了一个链(Chains)。在这个链的最左侧的元素成为链头,我们可以在其身上设置一些属性,来决定这个链的展示效果:

该属性为:

layout_constraintHorizontal_chainStyle

默认是spread属性,还有其他四种,效果如图~

《ConstraintLayout优化布局的强大控件》 layout_constraintHorizontal_chainStyle属性

最后一种属性还涉及到另一个属性

layout_constraintHorizontal_bias
layout_constraintVertical_bias

他表示了当前控件水平or垂直方向上的空隙比
对应design模式就是红框部分

《ConstraintLayout优化布局的强大控件》 红框部分

关于上图中的一些属性,比如数字是间隔dp,方框中符号表示的定值,wrap_content,和any size(图中符号)等都可以自己摸索下,试一试就明白了。

  • Guideline辅助线
    用于处理比如以屏幕中线为基准约束控件的情况

    《ConstraintLayout优化布局的强大控件》 image.png

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

<Button
        android:id="@+id/button2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/textView3"
        app:layout_constraintEnd_toStartOf="@+id/guideline2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button"/>

大致就这些使用方式,几乎满足常见的布局,可以减少布局层数,加快加载速度。

参考文章
大神guolin
大神鸿洋

    原文作者:我的天呐0_0
    原文地址: https://www.jianshu.com/p/be6c745db92d
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞