Android ConstraintLayout详细教程

最新推荐文章于 2025-03-17 17:25:06 发布

卡布哥哥学安卓

最新推荐文章于 2025-03-17 17:25:06 发布

阅读量1.6k

点赞数

分类专栏： android 文章标签： android ui

本文链接：https://blog.youkuaiyun.com/ymeddmn/article/details/122263613

版权

android 专栏收录该内容

65 篇文章

订阅专栏

多个功能使用方法

基线对齐

基线对齐xml

属性

layout_constraintBaseline_toBaselineOf

效果

角度约束

角度约束xml

属性

 app:layout_constraintCircle="@id/iv_cycle_main"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="200dp"

效果

百分百偏移

百分比偏移

属性

 app:layout_constraintVertical_bias="0.3"
        app:layout_constraintHorizontal_bias="0.2"

效果

gone margin隐藏时的边距

xml

属性

  app:layout_goneMarginLeft="100dp"
        app:layout_goneMarginTop="200dp"

效果

设置控件尺寸spread撑满水平剩余宽度

xml
xml
属性

app:layout_constraintWidth_default="spread"
        app:layout_constraintHeight_default="spread"

效果

控件百分百宽度

xml

属性

app:layout_constraintWidth_percent="0.5"

效果

根据宽高比设置控件尺寸

xml

属性

app:layout_constraintDimensionRatio="1:2"

效果

将多个控件链式布局

xml

属性

app:layout_constraintHorizontal_chainStyle="spread"

效果

GuideLine辅助线的使用

xml

属性

   <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.2"
        />

效果

控件分组后同步显示或隐藏

xml

属性

    <androidx.constraintlayout.widget.Group
        android:id="@+id/tv_group"
        app:constraint_referenced_ids="iv_group1,iv_group2,iv_group3"
        android:layout_width="wrap_content"
        android:visibility="visible"
        android:layout_height="wrap_content"/>

效果

placeholder使用,点击图标展示效果

xml

属性

 <androidx.constraintlayout.widget.Placeholder
        android:id="@+id/place1"
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:layout_constraintRight_toRightOf="parent"

        app:layout_constraintBottom_toBottomOf="parent"
        />

效果
点击图标，机器人图标会从左上角移动到右下角的站位位置

flow_wrapMode实现链约束

xml

属性

 <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tvFlow1,tvFlow2,tvFlow3,tvFlow4,tvFlow5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:flow_wrapMode="chain"
        app:layout_constraintTop_toTopOf="parent" />

效果

flow_wrapMode链约束中对每一行、第一行、最后一行设置链约束

xml

属性

<androidx.constraintlayout.helper.widget.Flow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tvFlow1,tvFlow2,tvFlow3,tvFlow4,tvFlow5"
        app:layout_constraintLeft_toLeftOf="parent"
        android:orientation="horizontal"
        app:flow_horizontalGap="20dp"
        app:flow_wrapMode="chain"
        app:flow_horizontalStyle="spread_inside"
        app:flow_lastHorizontalStyle="packed"
        app:layout_constraintTop_toTopOf="parent" />

效果

流式布局中的对齐约束flow_verticalAlign、flow_horizontalAlign

xml

属性

 <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tvFlow1,tvFlow2,tvFlow3,tvFlow4,tvFlow5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:flow_verticalAlign="top"
        app:flow_wrapMode="chain"
        app:layout_constraintTop_toTopOf="parent" />

效果

流式布局中的数量约束flow_maxElementsWrap

xml

属性

 <androidx.constraintlayout.helper.widget.Flow
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:constraint_referenced_ids="tvFlow1,tvFlow2,tvFlow3,tvFlow4,tvFlow5"
        app:layout_constraintLeft_toLeftOf="parent"
        app:flow_wrapMode="chain"
        app:flow_maxElementsWrap="3"
        app:layout_constraintTop_toTopOf="parent" />

效果

使用Layer图层设置多个控件的组合背景

xml

属性

    <androidx.constraintlayout.helper.widget.Layer
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/shp_round"
        android:padding="10dp"
        app:constraint_referenced_ids="tv_head,tv_footer,tv_left,tv_right"
        tools:ignore="MissingConstraints" />

效果

图片处理器ImageFilterView

xml

属性

app:altSrc="@drawable/shp_round"
        app:crossfade="0.5"
        app:roundPercent="1"

效果

画出类似原型图的控件

xml

属性

<androidx.constraintlayout.utils.widget.MockView
        android:id="@+id/mock_icon"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginLeft="14dp"
        />

效果

屏障（将屏障两侧的view分隔开布局）

xml

属性

<androidx.constraintlayout.widget.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        app:barrierDirection="end"
        app:constraint_referenced_ids="tv_access,tv_about"
        android:layout_height="wrap_content"/>

效果