ConstraintLayout-使用

原创已于 2023-08-14 12:18:59 修改 · 3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#android

于 2023-08-14 11:31:50 首次发布

本文详细介绍了ConstraintLayout中的关键属性使用，包括最大尺寸、百分比、定位偏差、权重链、辅助工具（Guideline、Barrier、Group和Placeholder）以及与ScrollView的交互，以及如何实现view的圆角效果。

部署运行你感兴趣的模型镜像

ConstraintLayout-使用

一、基本使用

1 属性介绍：

1.1、app:layout_constraintWidth_max和app:layout_constraintHeight_max：表示的是最大宽度或最大高度，如果使用固定值则对应的layout_width或layout_height使用wrap_content，和android:maxWidth属性类似。可如果和app:layout_constraintWidth_percent或app:layout_constraintHeight_percent结合使用就需要注意了，请看下方。

1.2、app:layout_constraintWidth_percent或app:layout_constraintHeight_percent：表示占用父View的宽度或高度的百分比，0-1取值，1代表铺满。可单独使用也可和app:layout_constraintWidth_max或app:layout_constraintHeight_max结合使用，则需要max里面值为wrap，对应的layout_width或layout_height使用0dp，表示最大宽度或高度占用多少父View的多少，宽度或高度变化增加到最大宽度后不再增加。

1.3、app:layout_constrainedWidth：表示当前宽度受目标约束控件的宽影响，比如A宽度是100dp，B使用layout_constraintStart_toStartOf和layout_constraintEnd_toEndOf和A对齐，如果B的宽度是wrap_content，则B的宽度随内容变化，但是不会超过A的100dp宽度，也就是从另一个层次限制了最大宽度，如果B是0dp，则直接是一直保持和A的同等宽度。

1.4、app:layout_constraintHorizontal_weight：表示水平比重，和LinearLayout一样，但是前提是这几个控件相互约束，比如需要有一下约束：A和父左部，A右部和B左部，B左部和A右部，B右部和C左部，C左部和B右部，C右部和父右部，才会有效果。 1.5、app:layout_constraintHorizontal_bias：表示水平方向便宜，如需使用该属性需同时指定对应轴向的两条边才会生效，例如使用app:layout_constraintHorizontal_bias="0.5"属性时需要同时指定当前控件的start边和end约束才能生效。该值默认为0.5居中位置，取值范围在0~1之间。

2.3 定位和偏差

Bias

layout_constraintHorizontal_bias : 水平方向偏移 layout_constraintVertical_bias : 垂直方向偏移

下面将使左侧有 30% 的偏差而不是默认的 50%，这样左侧会更短，小部件更向左侧倾斜

<android.support.constraint.ConstraintLayout ...>
             <Button android:id="@+id/button" ...
                 app:layout_constraintHorizontal_bias="0.3"
                 app:layout_constraintLeft_toLeftOf="parent"
                 app:layout_constraintRight_toRightOf="parent/>
         </>

圆形定位

layout_constraintCircle 引用另一个小部件 ID layout_constraintCircleRadius 到另一个小部件中心的距离 layout_constraintCircleAngle 小部件应该处于哪个角度（以度为单位，从 0 到 360）

<Button android:id="@+id/buttonA" ... />
  <Button android:id="@+id/buttonB" ...
      app:layout_constraintCircle="@+id/buttonA"
      app:layout_constraintCircleRadius="100dp"
      app:layout_constraintCircleAngle="45" />

2.4 约束

2.4.2 使用 0dp (MATCH_CONSTRAINT)

官方不推荐在ConstraintLayout中使用match_parent，可以设置 0dp (MATCH_CONSTRAINT) 配合约束代替match_parent，

<TextView
        android:id="@+id/TextView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="50dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:visibility="visible" />

2.4.3 宽高比约束

当宽或高至少有一个尺寸被设置为0dp时，可以通过属性layout_constraintDimensionRatio设置宽高比

app:layout_constraintDimensionRatio="H,2:3"指的是 高:宽=2:3
app:layout_constraintDimensionRatio="W,2:3"指的是 宽:高=2:3

<Button android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="H,16:9"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

2.4.4 百分比约束

layout_constraintHeight_percent：高度百分比，占父类高度的百分比 layout_constraintWidth_percent：宽度百分比，占父类宽度的百分比

app:layout_constraintWidth_max="wrap" ------ 最大宽度自适应

app:layout_constraintWidth_percent="0.7" ------ 最大宽度70%

android:layout_width="0dp" ----------------- match_parent

<TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@color/colorAccent"
        android:text="constraintHeight"
        app:layout_constraintHeight_percent="0.2"
        app:layout_constraintWidth_percent="0.2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>
 <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <TextView
            android:id="@+id/view_one"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:text="1111111111111111111111111111111111111111"
            app:layout_constraintEnd_toStartOf="@id/view_two"
            app:layout_constraintHorizontal_chainStyle="spread_inside"
            app:layout_constraintWidth_percent="0.7"
            app:layout_constraintWidth_max="wrap"
            />

        <TextView
            android:id="@+id/view_two"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toEndOf="@id/view_one"
            android:text="2222222222222222222222222222222222222222222222222222222222222"
            app:layout_constraintWidth_percent="0.5"
            app:layout_constraintWidth_max="wrap"
            />
    </androidx.constraintlayout.widget.ConstraintLayout>

三、链

spread ----------展开元素 (默认)；

spread_inside ----------展开元素，但链的两端贴近parent；

packet ----------链的元素将被打包在一起。

 app:layout_constraintHorizontal_chainStyle="spread_inside"

3.1 权重链

如果我们把宽度都设为0dp，这个时候可以在每个TextView中设置横向权layout_constraintHorizontal_weight(constraintVertical为纵向)来创建一个权重链

<TextView
            android:id="@+id/TextView4"
            android:background="@color/design_default_color_primary"
            android:text="444"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toLeftOf="@+id/TextView2"
            app:layout_constraintHorizontal_weight="2"
            app:layout_constraintTop_toBottomOf ="@id/TextView1"/>

四、辅助工具

4.1、Guideline - 引导线

像辅助线一样，在预览的时候帮助你完成布局

android:orientation 垂直vertical，水平horizontal layout_constraintGuide_begin 开始位置 layout_constraintGuide_end 结束位置 layout_constraintGuide_percent 距离顶部的百分比(orientation = horizontal时则为距离左边)

 <android.support.constraint.Guideline
        android:id="@+id/guideline1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="50dp" />

<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" />

4.2、Barrier - 屏障组

假设有3个控件ABC，C在AB的右边，但是AB的宽是不固定的，这个时候C无论约束在A的右边或者B的右边都不对。当出现这种情况可以用Barrier来解决。Barrier可以在多个控件的一侧建立一个屏障，

<TextView
        android:id="@+id/TextView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
<TextView
    android:id="@+id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toBottomOf="@+id/TextView1" />

<android.support.constraint.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="right"
    app:constraint_referenced_ids="TextView1,TextView2" />

<TextView
    android:id="@+id/TextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/barrier" />

app:barrierDirection 为屏障所在的位置，可设置的值有：bottom、end、left、right、start、top app:constraint_referenced_ids为屏障引用的控件，可设置多个(用“,”隔开)

4.3 Group - 组

Group可以把多个控件归为一组，方便隐藏或显示一组控件，现在有3个并排的TextView，用Group把TextView1和TextView3归为一组，再设置这组控件的可见性，

<TextView
    android:id="@+id/TextView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

<TextView
    android:id="@+id/TextView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@+id/TextView1" />

<TextView
    android:id="@+id/TextView3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintLeft_toRightOf="@id/TextView2" />

   <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        app:constraint_referenced_ids="TextView1,TextView3" />

4.4 Placeholder -占位符

Placeholder指的是占位符。在Placeholder中可使用setContent()设置另一个控件的id，使这个控件移动到占位符的位置

<android.support.constraint.Placeholder
        android:id="@+id/placeholder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:content="@+id/textview"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
<TextView
    android:id="@+id/textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#cccccc"
    android:padding="16dp"
    android:text="TextView"
    android:textColor="#000000"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

新建一个Placeholder约束在屏幕的左上角，新建一个TextView约束在屏幕的右上角，在Placeholder中设置 app:content=“@+id/textview”，这时TextView会跑到屏幕的左上角

五、嵌套ScrollView相关

4.1、内容线性布局 + 跟随滚动的底部按钮

android:fillViewport="true" 使子view占满父布局

<ScrollView
    android:id="@+id/scroll"
    android:fillViewport="true"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_height="wrap_content"
        android:layout_width="match_parent">

        <LinearLayout
            android:id="@+id/view_head_layout"
            android:gravity="center_horizontal"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:orientation="vertical"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"></LinearLayout>

        <LinearLayout
            android:id="@+id/view_content_detail_layout"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:orientation="vertical"
            app:layout_constraintBottom_toTopOf="@+id/view_bottom_btn_layout"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view_head_layout"
            app:layout_constraintVertical_chainStyle="spread_inside"></LinearLayout>

        <LinearLayout
            android:id="@+id/view_bottom_btn_layout"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/view_content_detail_layout"></LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</ScrollView>

六、view剪切圆角

mBinding.viewRv.setClipToOutline(true);
mBinding.viewRv.setOutlineProvider(new ViewOutlineProvider() {
    @Override
    public void getOutline(View view, Outline outline) {
        int radius = 20;
        outline.setRoundRect(0, 0, view.getWidth(), view.getHeight(), radius);
    }
});

您可能感兴趣的与本文相关的镜像