使用ConstraintLayout来构建UI
简单介绍
ConstraintLayout(约束布局)可以使用一个扁平的试图层次结构来创建复杂的布局,和RelativeLayout类似,但它比RelativeLayout更灵活,并且更易于与Android Studio的布局编辑器一起使用。
ConstraintLayout可在与Android 2.3(API级别9)及更高版本兼容的API库中提供,本页面提供了在Android Studio 3.0或更高版本中使用ConstraintLayout构建布局的指南
Constraints(约束)介绍
要在ConstraintLayout中定义视图的位置,您必须为视图添加至少一个水平和垂直约束。这个就会造成在设备上的看的效果不一样,每个约束表示与另一个视图,父布局或不可见guideline的连接或对齐,每个约束定义视图沿着垂直或水平轴的位置;所以每个视图对于每个轴必须至少有一个约束,但通常更多是必要的
点击布局右上角的Show Warnings and Errors,可以查看一些警告信息
ConstraintLayout添加到您的项目中
- 确保您的模块级build.gradle文件中声明了maven.google.com存储库
maven {
url 'https://maven.google.com'
}
}
2.在相同的build.gradle文件中将该库作为依赖项添加
compile 'com.android.support.constraint:constraint-layout:1.0.2'
}
设置margin
两个配合使用
app:layout_constraintTop_toTopOf="parent"
设置长宽比
app:layout_constraintDimensionRatio="W,1:1"
app:layout_constraintDimensionRatio="H,1:1"
设置水平或垂直间隔比例
app:layout_constraintHorizontal_bias="0.5"
weight 属性的使用
官方的一个解释:
When the chain is set to either spread or spread inside,
you can fill the remaining space by setting one or more views to “match constraints” (0dp).
By default, the space is evenly distributed between each view that’s set to “match constraints,”
but you can assign a weight of importance to each view using the layout_constraintHorizontal_weight and layout_constraintVertical_weight attributes.
If you’re familiar with layout_weight in a linear layout, this works the same way. So the view with the highest weight value gets the most amount of space;
views that have the same weight get the same amount of space.
三种chainStyle Spread/Spread inside/Packed
- Spread: 视图均匀分布(在占边界之后)。这是默认设置。
- Spread inside:第一个和最后一个视图固定在链条两端的约束上,其余均匀分布
- Packed: 视图会贴在一起