像ConstraintLayout一样分解你的布局

简介: A.布局简单总结一下,不要记忆,记忆,记忆,重要的事情说三遍

1681521440021.png

A.布局

简单总结一下,不要记忆,记忆,记忆,重要的事情说三遍

一.居中于父容器

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"

二.居中于控件中⼼

  • 水平方向居中
app:layout_constraintStart_toStartOf="@id/view"
app:layout_constraintEnd_toEndOf="@id/view"
  • 垂直⽅向居中
app:layout_constraintTop_toTopOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"

三.居中于控件的边

控件垂直居中于 view 的 「下边」

app:layout_constraintTop_toBottomOf="@id/view"
app:layout_constraintBottom_toBottomOf="@id/view"

四.填充

水平填充父布局(match_constraint)

app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:layout_width="0dp"

备注: 在早期版本中 match_parent 没有效果,必须来使用 match_constraint 来完成

五.权重

为水平⽅方向的控件设置权重,⼤小为 2:1:1

<!-- (view-1) -->
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="2"
<!-- (view-2) -->
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"
<!-- (view-3) -->
android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"

六.文字基准线对⻬

  app:layout_constraintBaseline_toBaselineOf

七.圆形定位

通过「圆心」「角度」「半径」设置圆形定位

app:layout_constraintCircle="@id/view"
app:layout_constraintCircleAngle="90"
app:layout_constraintCircleRadius="180dp"

B.辅助控件

一.Flow

通过引用的方式来避免布局嵌套 wrapMode

  • chain
  • aligned
  • 默认

注意这个控件是可以被测量的,所以对应方向的值可能需要被确定(即可能被约束同一个方向的单个约束)

二.ConstraintSet

使用 ConstraintSet 对象来动态修改布局

防止控件布局中无 id 控件,可以设置 isForceId = false

通过 ConstraintSet#clone 来 从xml 布局中获取约束

三.Placeholder

通过 setContentId 来指定控件放到占位符的位置

四.Barrier

通过设置一组控件的某个方向的屏障,来避免布局嵌套

五.Group

通过 constraint_referenced_ids 使用引用的方式避免布局嵌套 可以为一组控件统一设置 setVisibility

六.Layer

和Group类似,同样通过引用方式避免布局嵌套,可以为一组控件统一设置旋转/缩放/位移

七.GuideLine

  • 设置辅助线方向 android:orientation="vertical"
  • 设置辅助线的位置,根据方向不同
  • 距离左侧或上侧的距离 layout_constraintGuide_begin
  • 距离右侧或下侧的距离 layout_constraintGuide_end
  • 百分⽐ layout_constraintGuide_percent

C.特殊属性

一.约束限制

限制控件大小不会超过约束范围

app:layout_constrainedWidth="true"
app:layout_constrainedHeight="true"

二.偏向

控制控件在垂直⽅方向的 30%的位置

app:layout_constraintTop_toTopOf="parent"
 app:layout_constraintBottom_toBottomOf="parent"
 app:layout_constraintVertical_bias="0.3"

除了百分定位,还有用于配合有时在 「约束限制」 的条件下不需要居中效果的情况

  • 垂直⽅方向居顶部
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constrainedHeight="true"
app:layout_constraintVertical_bias="0.0"

三.约束链

在约束链上的第⼀一个控件上加上 chainStyle ,⽤用来改变⼀一组控件的布局⽅方式

  • packed(打包)
  • spread (扩散)
  • spread_inside(内部扩散)

垂直方向的 packed

app:layout_constraintVertical_chainStyle="packed"

四.宽高比

  • 至少一个方向的值为 match_constraint
  • 默认的都是宽⾼高⽐比,然后根据另外⼀一条边和⽐比例例算出 match_constraint 的值
  • x:y 默认表示的都是 width:height

有值的边,ratio 值 (默认宽高比),被约束的边(也有可能是有值的边)

  • 宽是 0dp,⾼高是 100dp,ratio 是 2:1,默认情况下是宽是 200dp,但是我们可以指定被约束的边是 height,那么宽度就是 50 dp
  • ⾼高是 0dp,宽是 100 dp,ratio 是 2:1,默认情况下是⾼高是 50 dp,但是我们指定被约束的边是 width,那么⾼高度为 200 dp

只有一个方向 match_constraint 不要去用,如果是两个⽅方向都是match_constraint 那么可能会⽤用 到。

五.百分比布局

  • 需要对应方向上的值为 match_constraint
  • 百分比是parent 的百分⽐比,而不是约束区域的百分⽐

宽度是父容器器的 30%

android:layout_width="0dp"
app:layout_constraintWidth_percent="0.3"








相关文章
|
8月前
|
Android开发
Android Studio入门之常用布局的讲解以及实战(附源码 超详细必看)(包括线性布局、权重布局、相对布局、网格布局、滚动视图 )
Android Studio入门之常用布局的讲解以及实战(附源码 超详细必看)(包括线性布局、权重布局、相对布局、网格布局、滚动视图 )
654 0
|
8月前
|
编解码 算法 开发者
Flutter的布局系统:深入探索布局Widget与布局原则
【4月更文挑战第26天】Flutter布局系统详解,涵盖布局Widget(Row/Column、Stack、GridView/ListView、CustomSingleChildLayout)和布局原则(弹性布局、约束优先、流式布局、简洁明了)。文章旨在帮助开发者理解并运用Flutter的布局系统,创建适应性强、用户体验佳的界面。通过选择合适的布局Widget和遵循原则,可实现复杂且高效的UI设计。
|
7月前
|
开发工具 Android开发 数据安全/隐私保护
12. 【Android教程】绝对布局 AbsoluteLayout
12. 【Android教程】绝对布局 AbsoluteLayout
118 0
|
8月前
|
XML 数据可视化 Java
Android布局——线性布局、相对布局、帧布局、表格布局、网格布局、约束布局
Android布局——线性布局、相对布局、帧布局、表格布局、网格布局、约束布局
237 1
|
8月前
|
Android开发 容器
Android开发,学习LinearLayout布局
Android开发,学习LinearLayout布局
89 0
|
Android开发 容器
Android 实现控件对称布局(约束布局和线性布局)
画界面时会遇到很多界面上的布局,虽然很简单,但是每次做起来不熟练,总结一下一些日常的
ConstraintLayout实战小技巧—实现布局跟随效果
ConstraintLayout实战小技巧—实现布局跟随效果
|
API Android开发
布局之ConstraintLayout 约束布局
布局之ConstraintLayout 约束布局
148 0
布局之ConstraintLayout 约束布局
|
Android开发
【RecyclerView】 三、RecyclerView 布局 ( 线性布局管理器 LinearLayoutManager )
【RecyclerView】 三、RecyclerView 布局 ( 线性布局管理器 LinearLayoutManager )
606 0
【RecyclerView】 三、RecyclerView 布局 ( 线性布局管理器 LinearLayoutManager )
|
Android开发
实战-自定义ViewGroup-流动布局(FlowLayout)
安卓自定义 ViewGroup 需要注意的地方 至少需要提供 width, 和height两个属性 同样地,如果要使用自定义的属性,那么就需要创建自己的名字空间,在Android Studio中,第三方的控件都使用如下代码来引入名字空间。 xmlns:custom="http://schemas.android.com/apk/res-auto"
194 0