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



相关文章
|
XML JavaScript 前端开发
鸿蒙开发(17)---WebView组件
鸿蒙开发(17)---WebView组件
1582 0
鸿蒙开发(17)---WebView组件
|
Java BI 图形学
java实现图片压缩功能
java实现图片压缩功能
927 0
|
Android开发
Android AtomicBoolean浅析
在 Android 中,AtomicBoolean 是一个原子布尔类,用于在多线程环境中安全地进行布尔类型的操作。它提供了一些原子性的操作方法,如 set()、get()、compareAndSet() 等。
459 0
|
前端开发 Android开发 容器
surfaceview组件的surfaceCreated()不被调用的解决方案
原文:surfaceview组件的surfaceCreated()不被调用的解决方案 有时候我们有需要在native层做在surfaceview的上下文中做渲染,这个时候只是提供了一个单独什么都不做的surfaceview。
3967 0
|
11月前
|
数据安全/隐私保护
APP备案使用证书查看公钥和md5
【10月更文挑战第19天】首先有了一个证书,文件后缀是keystore
1381 13
APP备案使用证书查看公钥和md5
|
Android开发
08. 【Android教程】相对布局 RelativeLayout
08. 【Android教程】相对布局 RelativeLayout
363 0
|
Android开发
Android 自定义View 测量控件宽高、自定义viewgroup测量
Android 自定义View 测量控件宽高、自定义viewgroup测量
575 0
|
jenkins 网络安全 持续交付
Jenkins Pipeline 流水线 - 上传文件 Publish over SSH 执行命令
Jenkins Pipeline 流水线 - 上传文件 Publish over SSH 执行命令
889 0
|
Web App开发 JSON 前端开发
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
6款开发必备的Chrome谷歌浏览器扩展(部分火狐、edge浏览器商店也可以用)
430 0
|
存储 安全 Java
Java.security包中的KeyStore类详解
Java.security包中的KeyStore类详解
796 0