android布局参照示例
This is the second tutorial in the series of posts on Constraint Layout android example. If you haven’t read the first one, refer here before proceeding.
这是Constraint Layout android示例系列文章中的第二篇教程。 如果您尚未阅读第一个,请在继续之前参考这里 。
约束布局 (Constraint Layout)
In the first tutorial, we’ve seen how Constraint Layout helps us get rid of nested layout by the relative positioning of views using constraints.
在第一个教程中,我们已经看到了约束布局如何通过使用约束的相对位置视图来帮助我们摆脱嵌套布局。
We’ve discussed the basic tools such as autoconnect, inference, anchor points, baselines etc. in the first part. In this tutorial, we’ll see what’s new in the latest update of ContraintLayout
and discuss and implement some amazing features that Constraint Layout provides.
在第一部分中,我们讨论了基本工具,例如自动连接,推断,锚点,基线等。 在本教程中,我们将看到ContraintLayout
的最新更新中的新增功能,并讨论和实现Constraint Layout提供的一些令人惊奇的功能。
There are a few changes in the latest Constraint Layout version since the beta versions. Ensure that you have the following dependency version (or above) in your gradle build file (build.gradle
).
自beta版以来,最新的Constraint Layout版本进行了一些更改。 确保在gradle构建文件( build.gradle
)中具有以下依赖项版本(或更高版本)。
compile 'com.android.support.constraint:constraint-layout:1.0.2'
约束布局有哪些新功能? (What’s new in Constraint Layout?)
match_parent
doesn’t exist in this layout: We need to use match_constraint (0 dp) instead and attach constraints to the sides of the parent view or let the layout size the view. 在此布局中不存在match_parent
:我们需要改用match_constraint(0 dp)并将约束附加到父视图的侧面,或者让布局调整视图的大小。- Setting constraints through XML: To set a button to be in the centre of the layout using xml, we need to set a constraint for each side to the parent view as shown below.
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.journaldev.constraintlayoutplaying.MainActivity"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
Note: Constraint Layout provides the keyword parent for the root view (ConstraintLayout in this case).
Let’s use
通过XML设置约束 :要使用xml将按钮设置在布局的中央,我们需要为父视图的每一侧设置约束,如下所示。0dp
for the button to match the width and height.<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android" xmlns:app="https://schemas.android.com/apk/res-auto" xmlns:tools="https://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.journaldev.constraintlayoutplaying.MainActivity"> <Button android:id="@+id/button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>
注意 :“约束布局”为根视图提供关键字parent(在这种情况下为“ ConstraintLayout”)。
让我们使用
0dp
作为按钮来匹配宽度和高度。 - Auto-set margin constraints: Moving the widget along the edges of the design screen would auto set the margin constraints as shown below.
Besides the project properties pane on the right lets you set the “
自动设置边距约束 :沿着设计屏幕边缘移动小部件将自动设置边距约束,如下所示。dp
” value from a list of standard dimensions.
除了右侧的项目属性窗格之外,您还可以从标准尺寸列表中设置“
dp
”值。 - Toggle between Baseline and Anchor Points: The following button acts as a toggle between anchor and baseline constraints.
- Setting Quick Constraints Using Toolbar Options: The Layout Editor provides shortcuts for aligning two views.
- An example for aligning two views Left, Right and Both is given below.
Note: There’s an error displayed in the second TextView since we need to define a constraint along the vertical axis. - An example for aligning two views Top, Bottom, Center and Baseline is given below.
- An example for aligning two views, centre horizontally or centre vertically is given below.
- The first two options in the third row align the views, centre horizontally or centre vertically within the given available space as shown below.
The above constraints are loosely based on the concept of Chaining that we’ll look into soon.
Note: The following icon that you would have noticed in the above gif is used to toggle between the chaining styles.
- An example for aligning two views Left, Right and Both is given below.
约束布局链接 (Chaining with Constraint Layout)
Chains are a feature that lets us position views along an axis similar to LinearLayout. Each view is linked by bi-directional constraints. The XML attribute for chaining is app:layout_constraintVertical_chainStyle
or app:layout_constraintHorizontal_chainStyle
.
链是一项功能,可让我们沿类似于LinearLayout的轴定位视图。 每个视图都通过双向约束链接。 链接的XML属性是app:layout_constraintVertical_chainStyle
或app:layout_constraintHorizontal_chainStyle
。
It accepts the following values:
它接受以下值:
- spread: The views are evenly distributed. 传播 :视图均匀分布。
- spread_inside: The first and last view are affixed to the constraints on each end of the chain and the rest are evenly distributed. spread_inside :第一个和最后一个视图固定在链的每一端的约束上,其余视图均匀分布。
- packed: The views are packed together. You can then adjust the whole chain’s bias (left/right or up/down) by changing the chain’s first view’s bias 打包 :视图打包在一起。 然后,您可以通过更改链的第一个视图的偏差来调整整个链的偏差(左/右或上/下)
- Weighted: A weighted chain is one with the style set as spread or spread_inside with at least one widget set to 0 dp/match_constraint. We need to assign the weight attribute for each view as :
layout_constraintHorizontal_weight
orlayout_constraintVertical_weight
加权 :加权链是样式设置为spread或spread_inside的链,其中至少一个小部件设置为0 dp / match_constraint。 我们需要将每个视图的权重属性分配为:layout_constraintHorizontal_weight
或layout_constraintVertical_weight
A demo of spread, spread_inside and packed horizontally is given below.
下面给出了spread,spread_inside和水平打包的演示。
A demo of spread with weights is given below:
This brings an end to constraint layout android example tutorial. ConstraintLayout is pretty amazing layout in terms of performance compared to LinearLayout and RelativeLayout. So start adopting it!
结束了约束布局android示例教程。 与LinearLayout和RelativeLayout相比,ConstraintLayout在性能方面是非常惊人的布局。 因此,开始采用它!
翻译自: https://www.journaldev.com/14777/constraint-layout-android-example
android布局参照示例