ConstraintLayout简单效果

简介: ConstraintLayout简单效果

多个功能使用方法


基线对齐

  1. xml

基线对齐xml

  1. 属性
layout_constraintBaseline_toBaselineOf
复制代码
  1. 效果

image.png


角度约束

  1. xml

角度约束xml

  1. 属性
app:layout_constraintCircle="@id/iv_cycle_main"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircleRadius="200dp"
复制代码
  1. 效果

image.png


百分百偏移

  1. xml

百分比偏移

  1. 属性
app:layout_constraintVertical_bias="0.3"
        app:layout_constraintHorizontal_bias="0.2"
复制代码
  1. 效果

image.png


gone margin隐藏时的边距

  1. xml

xml

  1. 属性
app:layout_goneMarginLeft="100dp"
        app:layout_goneMarginTop="200dp"
复制代码
  1. 效果

image.png


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

  1. xml

xml2. 属性

app:layout_constraintWidth_default="spread"
        app:layout_constraintHeight_default="spread"
复制代码
  1. 效果

image.png


控件百分百宽度

  1. xml

xml

  1. 属性
app:layout_constraintWidth_percent="0.5"
复制代码
  1. 效果

image.png


根据宽高比设置控件尺寸

  1. xml

xml

  1. 属性
app:layout_constraintDimensionRatio="1:2"
复制代码
  1. 效果

image.png


将多个控件链式布局

  1. xml

xml

  1. 属性
app:layout_constraintHorizontal_chainStyle="spread"
复制代码
  1. 效果

image.png


GuideLine辅助线的使用

  1. xml

xml

  1. 属性
<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"
        />
复制代码
  1. 效果

image.png


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

  1. xml

xml

  1. 属性
<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"/>
复制代码
  1. 效果


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

  1. xml

xml

  1. 属性
<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"
        />
复制代码
  1. 效果

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

image.png


flow_wrapMode实现链约束

  1. xml

xml

  1. 属性
<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" />
复制代码
  1. 效果

image.png


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

  1. xml

xml

  1. 属性
<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" />
复制代码
  1. 效果

image.png


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

  1. xml

xml

  1. 属性
<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" />
复制代码
  1. 效果

image.png


流式布局中的数量约束flow_maxElementsWrap

  1. xml

xml

  1. 属性
<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" />
复制代码
  1. 效果

image.png


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

  1. xml

xml

  1. 属性
<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" />
复制代码
  1. 效果

image.png


图片处理器ImageFilterView

  1. xml

xml

  1. 属性
app:altSrc="@drawable/shp_round"
        app:crossfade="0.5"
        app:roundPercent="1"
复制代码
  1. 效果

image.png


画出类似原型图的控件

  1. xml

xml

  1. 属性
<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"
        />
复制代码
  1. 效果

image.png


屏障(将屏障两侧的view分隔开布局)

  1. xml

xml

  1. 属性
<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"/>
复制代码
  1. 效果

image.png



相关文章
|
开发工具 Android开发
AndroidX到底是啥?
AndroidX到底是啥?
188 0
|
9月前
|
Android开发
ConstraintLayout 的使用
ConstraintLayout 的使用
69 1
ConstraintLayout 的使用
|
8月前
|
Android开发 UED 开发者
Android 中的 LinearLayout 布局
Android 中的 LinearLayout 布局
|
8月前
|
Android开发 开发者
深入了解 Android 中的 RelativeLayout 布局
深入了解 Android 中的 RelativeLayout 布局
|
Android开发
Android ConstraintLayout
Android ConstraintLayout
114 0
|
Java Android开发 Kotlin
Android转AndroidX
公司项目多,有些事java,有些是kotlin,有些是Android,有些是AndroidX,一些依赖和依赖库的更新使得调用的方法等不同,导致功能同步时效率及极其低下,于是打算把Android项目转成AndroidX。
|
XML API Android开发
关于什么是AndroidX(二)
迁移成功后,我们先build 一下项目,看看有没有报错,有时会报错,报错的地方可以通过控制台build选项卡中看到,有些是无法自动转换的,需要手动转化,比如布局xml中的控件包名,它会保留迁移之前的包名,这个时候我们手动使用AndroidX对应包明即可。
179 0
关于什么是AndroidX(二)
|
API Android开发 开发者
关于什么是AndroidX(一)
Android 问世的时候,估计连开发者自己都没想到它会如此成功,因为一开始不可能就将API考虑得非常周到,以至于随着Android系统版本的不断迭代更新,每个版本都会新增加入很多新的API,但是新增的API在老版本中是不存在的,这里就出现了一个向下兼容的问题。
319 0
|
XML Android开发 数据格式
ConstraintLayout 想说爱你不容易 (二)
日常补漏,学习一下 ConstraintLayout 基本用法!
513 0
ConstraintLayout 想说爱你不容易 (二)
|
测试技术 Android开发
ConstraintLayout 想说爱你不容易!
      ConstraintLayout 约束布局 的发布已经很长时间了,小菜用的比较少,测试时看到同事用的 ConstraintLayout 布局方式编辑的 xml,觉得有必要学习一下,并记录一下小菜在学习过程中遇到的小问题。
1246 0