android实例教程_Android ConstraintLayout示例教程

最新推荐文章于 2024-03-30 21:12:40 发布

cunchi4221

最新推荐文章于 2024-03-30 21:12:40 发布

阅读量414

点赞数

文章标签： java android python mysql css

原文链接：https://www.journaldev.com/13590/android-constraintlayout

版权

android实例教程

In this tutorial, we’ll discuss the intricacies of android ConstraintLayout. Google had introduced android constraint layout editor at Google I/O Conference 2016. The new Layout Editor has a set of powerful tools to allow developers to create flat-ui hierarchies for their complex layouts.

在本教程中，我们将讨论android ConstraintLayout的复杂性。 Google在2016年Google I / O会议上推出了android约束布局编辑器。新的Layout Editor具有一组功能强大的工具，可让开发人员为其复杂布局创建Flat-ui层次结构。

Android ConstraintLayout (Android ConstraintLayout)

To use android ConstraintLayout, make sure you’re using the latest Android Studio version. Ideally, Android Studio 2.2 and above. We need to download the necessary SDK Tools for ConstraintLayout from the SDK Manager.

要使用android ConstraintLayout，请确保您使用的是最新的Android Studio版本。理想情况下，Android Studio 2.2及更高版本。我们需要从SDK Manager下载用于ConstraintLayout的必要SDK工具。

Create a new empty activity project and add the following dependency inside the build.gradle file.

创建一个新的空活动项目，并将以下依赖项添加到build.gradle文件中。

compile 'com.android.support.constraint:constraint-layout:1.0.0-beta4'

Create a new layout with the root class set to ConstraintLayout as shown in the image below.

创建一个新的布局，并将根类设置为ConstraintLayout，如下图所示。

To convert an old layout into a ConstraintLayout. Open the design pane of the respective layout, right click the root component and choose the relevant option as shown in the image below.

将旧布局转换为ConstraintLayout。打开相应布局的设计窗格，右键单击根组件，然后选择相关选项，如下图所示。

Android约束布局概述 (Android Constraint Layout Overview)

Android ConstraintLayout is used to define a layout by assigning constraints for every child view/widget relative to other views present.

Android ConstraintLayout用于通过为每个子视图/小部件相对于当前其他视图分配约束来定义布局。

A ConstraintLayout is similar to a RelativeLayout, but with more power. The aim of ConstraintLayout is to improve the performance of the applications by removing the nested views with a flat and flexible design.

ConstraintLayout与RelativeLayout相似，但是功能更多。 ConstraintLayout的目的是通过使用平坦灵活的设计删除嵌套视图来提高应用程序的性能。

A view inside the ConstraintLayout has handles(or anchor points) on each side which are used to assign the constraints. Let’s drag and drop a TextView on the layout and assign the constraints to it.

ConstraintLayout内部的视图在每侧都有用于分配约束的手柄（或锚点）。让我们在布局上拖放一个TextView并为其分配约束。

The TextView above has three types of handles:

上面的TextView具有三种类型的句柄：

Resize handle – It’s present on the four corners and is used to resize the view, but keeping its constraints intact. 调整大小手柄 –位于四个角，用于调整视图的大小，但保持其约束不变。
Side handle – It’s the circular handle present on the centre of each side. It’s used to set the top, left, bottom and right constraints of the view.

侧把手 –这是位于两侧中央的圆形把手。它用于设置视图的顶部，左侧，底部和右侧约束。

Baseline handle – It’s used to align the baseline with another textview in the layout.

基线手柄 –用于将基线与布局中的另一个textview对齐。

Let’s assign the constraints on the TextView and look into the xml code of it.

让我们在TextView上分配约束，并查看其xml代码。

Notice the Properties inspector pane at the right-hand side:

Android ConstraintLayout textview properties

注意右侧的“属性”检查器窗格：

It shows the margins set for each side of the view. It also allows to change the size of the view by toggling between the following modes:

它显示为视图的每一侧设置的边距。它还允许通过在以下模式之间切换来更改视图的大小：

Wrap Content – This wraps the view to fill it’s content.

包装内容 –包装视图以填充其内容。
Any Size – This is similar to match parent.

任何大小 –与匹配父项相似。
Fixed Size – This allows us to set constant width and height.

固定大小 –这使我们可以设置恒定的宽度和高度。

The xml code for the above layout looks like:

上述布局的xml代码如下所示：

sample.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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp" />
</android.support.constraint.ConstraintLayout>

app:layout_constraintLeft_toLeftOf="parent" – constraintLeft is the anchor point to the left of the view. toLeftOf signifies aligning the view to the left of the assigned view which is “parent” in this case.
app:layout_constraintLeft_toLeftOf="parent" – ConstraintLeft是视图左侧的锚点。 toLeftOf表示将视图与指定视图的左侧对齐（在这种情况下为“父”）。
When the absolute positions are set on the view, the xml properties that are used are –

在视图上设置绝对位置时，使用的xml属性为–

tools:layout_editor_absoluteY="48dp"
tools:layout_editor_absoluteX="40dp"

Let’s add another TextView and align their baselines.

让我们添加另一个TextView并对齐其基线。

The xml code for the above layout is :

以上布局的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">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginRight="16dp"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView2"
        app:layout_constraintBaseline_toBaselineOf="@+id/textView"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginLeft="16dp"
        app:layout_constraintRight_toLeftOf="@+id/textView"
        android:layout_marginEnd="8dp"
        android:layout_marginRight="8dp" />

</android.support.constraint.ConstraintLayout>

There are two other tools Auto-connect and Inferences that are used to created constraints automatically.

还有另外两个工具自动连接和推理可用于自动创建约束。

Auto-Connect – This feature can be enabled by clicking:

As the name suggests, Auto-connect creates constraints automatically between two neighbouring views
自动连接 –可以通过以下方式启用此功能：
顾名思义，自动连接会在两个相邻视图之间自动创建约束
Inference – This feature is enabled by clicking:

The Inference engine creates constraints among all elements in a layout. The inference engine tries to find and create optimal connections based on various factors such as the positions of the widgets and their size.
推断 –通过单击以下选项可启用此功能：
推理引擎会在布局中的所有元素之间创建约束。推理引擎尝试根据各种因素（例如，小部件的位置及其大小）找到并创建最佳连接。

A demo of Auto-Connect layout is given below:

自动连接布局的演示如下：

As you can see in the above gif, The constraints are animated automatically.
Notice the horizontal and vertical sliders in the properties pane. They are called horizontal and vertical bias respectively. They allow us to position a view along the horizontal or vertical axis using a bias value, this will be relative to it’s constrained position.

如您在上面的gif中看到的，约束是自动设置动画的。
注意属性窗格中的水平和垂直滑块。它们分别称为水平和垂直偏置。它们允许我们使用偏差值沿水平或垂直轴定位视图，这将是相对于其受约束位置的。

The xml code for the above demo is given below:

上面的演示的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">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher"
        android:id="@+id/imageView7"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.58000004"
        app:layout_constraintHorizontal_bias="0.47" />
</android.support.constraint.ConstraintLayout>

Demo of a layout with Inference enabled is given below:

下面给出了启用推理的布局的演示：

The xml code for the above gif is :

上述gif的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">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView22"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintBottom_creator="1"
        app:layout_constraintBottom_toTopOf="@+id/button2"
        app:layout_constraintRight_toRightOf="parent"
        tools:layout_constraintLeft_creator="1"
        android:layout_marginBottom="59dp"
        app:layout_constraintLeft_toLeftOf="parent" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        tools:layout_constraintTop_creator="1"
        tools:layout_constraintRight_creator="1"
        android:layout_marginEnd="31dp"
        app:layout_constraintRight_toRightOf="@+id/textView22"
        android:layout_marginTop="178dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginRight="31dp" />
</android.support.constraint.ConstraintLayout>

tools:layout_constraintTop_creator="1": The creator attributes to keep track of who created the constraints, particularly if they are created by the inference engine they’re assigned as 1.

tools:layout_constraintTop_creator="1" ：创建者属性可以跟踪谁创建了约束，特别是如果它们是由推理引擎创建的，则将它们分配为1。

删除约束 (Deleting Constraints)

To delete an individual constraint, hover over the circular handle and click it has it turns red.
To delete all constraints of a view, click the symbol underneath it that looks like:

要删除单个约束，请将鼠标悬停在圆形手柄上，然后单击使其变为红色。
要删除视图的所有约束，请单击其下方的符号，如下所示：

A sample demo gif is given below:

下面是一个示例演示gif：

This brings an end to this tutorial. You can go ahead and try replacing some of your own layouts with a constraint layout.

本教程到此结束。您可以继续尝试将自己的某些布局替换为约束布局。

翻译自: https://www.journaldev.com/13590/android-constraintlayout

android实例教程

cunchi4221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
android实例教程_Android ConstraintLayout示例教程

android实例教程In this tutorial, we’ll discuss the intricacies of android ConstraintLayout. Google had introduced android constraint layout editor at Google I/O Conference 2016. The new Layout Editor has ...
复制链接

扫一扫