android布局参照示例_约束布局Android示例–第2部分

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?)

1. 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）并将约束附加到父视图的侧面，或者让布局调整视图的大小。
2. 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 0dp for the button to match the width and height.

   通过XML设置约束 ：要使用xml将按钮设置在布局的中央，我们需要为父视图的每一侧设置约束，如下所示。

   <?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作为按钮来匹配宽度和高度。

3. 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 ”值。

4. Toggle between Baseline and Anchor Points: The following button acts as a toggle between anchor and baseline constraints.
   
   
   在基线和锚定点之间切换 ：以下按钮充当锚定和基线约束之间的切换。
   
   
5. Setting Quick Constraints Using Toolbar Options: The Layout Editor provides shortcuts for aligning two views.
   1. 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.
   2. An example for aligning two views Top, Bottom, Center and Baseline is given below.
      
   3. An example for aligning two views, centre horizontally or centre vertically is given below.
      
      
   4. 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.
      
      
   使用工具栏选项设置快速约束 ：布局编辑器提供了用于对齐两个视图的快捷方式。
   1. 下面给出了对齐两个视图Left，Right和Both的示例。
      
      注意 ：由于我们需要沿垂直轴定义约束，因此第二个TextView中显示错误。
   2. 下面给出了对齐两个视图“顶部”，“底部”，“中心”和“基线”的示例。
      
      
   3. 下面给出了对齐两个视图（水平居中或垂直居中）的示例。
      
   4. 第三行的前两个选项将视图对齐， 在给定可用空间内水平居中或垂直居中，如下所示。
      
      
      
      上面的约束基于我们将很快研究的“ 链接”的概念。
      注意 ：您在上面的gif中会注意到以下图标，用于在链接样式之间切换。
      

约束布局链接 (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:

它接受以下值：

1. spread: The views are evenly distributed.
   传播 ：视图均匀分布。
2. 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 ：第一个和最后一个视图固定在链的每一端的约束上，其余视图均匀分布。
3. 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
   打包 ：视图打包在一起。 然后，您可以通过更改链的第一个视图的偏差来调整整个链的偏差（左/右或上/下）
4. 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 or layout_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布局参照示例