使用Kotlin的Android约束布局

最新推荐文章于 2024-07-27 22:19:19 发布

cunchi4221

最新推荐文章于 2024-07-27 22:19:19 发布

阅读量1k

点赞数

文章标签：定位列表 android 移动开发 css

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

版权

本文介绍了Android ConstraintLayout的使用，包括其相对于其他视图的定位、约束集、偏置设置、视图链接和分组、壁垒、百分比宽度和高度以及圆形定位等特性，并提供了使用Kotlin进行编程实现的示例。

摘要由CSDN通过智能技术生成

In this tutorial, we will discuss the Android ConstraintLayout attributes. We will learn how to position views based on constraints through XML layout and programmatically using Kotlin.

在本教程中，我们将讨论Android ConstraintLayout属性。我们将学习如何通过XML布局以及使用Kotlin以编程方式基于约束来定位视图。

什么是Android ConstraintLayout？ (What is Android ConstraintLayout?)

Android Constraint is RelativeLayout with additional features. They were introduced to prevent too many nested layouts. They flatten out the layouts.

Android约束是带有其他功能的RelativeLayout。引入它们是为了防止过多的嵌套布局。他们弄平了布局。

Some of the constraint layout featrues are:

约束布局的一些特征是：

Positioning sides of a view relative to sides of another view.
相对于另一个视图的侧面放置一个视图的侧面。
ConstraintSets
约束集
Setting horizontal/vertical bias
设置水平/垂直偏置
Chaining and grouping views together
将视图链接和分组在一起
Barriers
壁垒
Setting the percent of width or height the view would occupy on the screen.
设置视图将在屏幕上占据的宽度或高度的百分比。
Circular positioning the views.
循环定位视图。

约束布局依赖性 (Constraint Layout Dependencies)

Please add the following dependency in your build.gradle file for constraint layout support.

请在build.gradle文件中添加以下依赖项，以获取约束布局支持。

implementation 'com.android.support.constraint:constraint-layout:1.1.2'

Let’s look into some examples of using constraint layout in android apps.

让我们看一些在Android应用程序中使用约束布局的示例。

相对于彼此放置视图 (Positioning Views Relative to one another)

Let’s drag and drop a view into the center of the screen.

让我们将视图拖放到屏幕中心。

As you see in the above GIF, the Button is positioned in the center of the screen with each side having the constraint to the parent view.

如您在上面的GIF中所看到的，“按钮”位于屏幕的中央，每一侧都有对父视图的约束。

We can remove either a single constraint or all as shown below.

我们可以删除一个约束或全部约束，如下所示。

The cross button is used to remove ALL constraints. Clicking the circle would remove the constraint of that specific side.

十字按钮用于删除所有约束。单击圆将删除该特定面的约束。

You can drag the same circle to create a new constraint.

您可以拖动相同的圆以创建新约束。

Let’s look at the XML layout for the above design.

让我们看一下上述设计的XML布局。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintStart_toEndOf="@+id/button2"
        app:layout_constraintTop_toBottomOf="@+id/button2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

The parent refers to the root view.

父级是指根视图。

The list of XML attributes to position views by each other’s sides(top/left/bottom/right) is as follows.

用来按彼此的边（顶部/左侧/底部/右侧）放置视图的XML属性列表如下。

We can align two views by their baselines as well.

我们也可以通过它们的基线来对齐两个视图。

Let’s learn how to create constraints programmatically using Kotlin.

让我们学习如何使用Kotlin以编程方式创建约束。

约束集 (ConstraintSet)

The ConstraintSet instance is defined to set the constraints programmatically.

ConstraintSet实例被定义为以编程方式设置约束。

The activity_main.xml does not contain anything inside the ConstraintLayout tag. Let’s look at the main activity Kotlin code.

activity_main.xml在ConstraintLayout标记内不包含任何内容。让我们看一下主要的活动Kotlin代码。

package net.androidly.androidlyconstraintlayout

import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import android.support.constraint.ConstraintLayout
import android.support.constraint.ConstraintSet
import android.widget.Button
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    val ID_1 = 1
    val ID_2 = 2

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val button = Button(this)
        button.text = "Button"
        button.id = ID_1
        val lp = ConstraintLayout.LayoutParams(ConstraintLayout.LayoutParams.WRAP_CONTENT, ConstraintLayout.LayoutParams.WRAP_CONTENT)
        button.layoutParams = lp
        constraintLayout.addView(button)

        val button2 = Button(this)

        button2.text = "Button2"
        button2.id = ID_2
        constraintLayout.addView(button2)

        val constraintSet = ConstraintSet()
        //Copy all the previous constraints present in the constraint layout.
        constraintSet.clone(constraintLayout)

        constraintSet.connect(ID_1, ConstraintSet.TOP, ConstraintSet.PARENT_ID, ConstraintSet.TOP)
        constraintSet.connect(ID_1, ConstraintSet.BOTTOM, ConstraintSet.PARENT_ID, ConstraintSet.BOTTOM)
        constraintSet.connect(ID_1, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT)
        constraintSet.connect(ID_1, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT)

        constraintSet.connect(ID_2, ConstraintSet.BOTTOM, ID_1, ConstraintSet.TOP)
        constraintSet.connect(ID_2, ConstraintSet.LEFT, ConstraintSet.PARENT_ID, ConstraintSet.LEFT)
        constraintSet.connect(ID_2, ConstraintSet.RIGHT, ConstraintSet.PARENT_ID, ConstraintSet.RIGHT)
        constraintSet.applyTo(constraintLayout)

    }
}

The clone() function is used to copy all the previous constraints defined in the constraint layout.

clone()函数用于复制约束布局中定义的所有先前约束。

In the above code, we are setting the first button in the center of the layout and the second button is on top of it.

在上面的代码中，我们将第一个按钮设置在布局的中心，第二个按钮在其顶部。

The connect() function has an additional fifth parameter as well for margin values.

connect()函数还有一个附加的第五个参数，用于边距值。

parent in XML layout is 父级等效项为 ConstraintSet.PARENT_ID. ConstraintSet.PARENT_ID 。

水平和垂直偏差 (Horizontal and Vertical Bias)

The attributes for setting bias are: app:layout_constraintVertical_bias and app:layout_constraintHorizontal_bias.

设置偏差的属性为： app:layout_constraintVertical_bias和app:layout_constraintHorizontal_bias 。

They expect a value between 0 and 1, and 0.5 is the default value.

他们期望一个介于0和1之间的值，默认值为0.5。

约束的链接和分组 (Chaining and Grouping of Constraints)

Chains are used to evenly space views horizontally or vertically.

链用于在水平或垂直方向上均匀分布视图。

The xml layout code:

xml布局代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/button5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button4" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:text="Button"
        app:layout_constraintBottom_toTopOf="@+id/button"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_chainStyle="spread_inside" />

    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />
</android.support.constraint.ConstraintLayout>

The chain styles can be of the following types.

链样式可以是以下类型。

spread
传播
spread inside
散布在里面
packed
包装好的
weighted
加权的

The weighted style requires setting weight on each of the views. The view with most weight occupies the most space.

加权样式需要在每个视图上设置权重。重量最大的视图占用最多的空间。

The app:layout_constraintHorizontal_weight is used to set the weights in a horizontal chain.

app:layout_constraintHorizontal_weight用于设置水平链中的权重。

Groups are used to toggle the visibility of a group of views together.

组用于将一组视图的可见性一起切换。

Add the following inside XML code to the previously defined constraint layout.

将以下内部XML代码添加到先前定义的约束布局中。

<android.support.constraint.Group
              android:id="@+id/group"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:visibility="invisible"
              app:constraint_referenced_ids="button4,button9" />

壁垒 (Barriers)

A Barrier is used to create a virtual divider or a guideline on a group of views based on the largest view in the group.

障碍用于基于组中的最大视图在一组视图上创建虚拟分隔线或准则。

This virtual divider can be connected with other child views.

该虚拟分隔线可以与其他子视图连接。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="TextView\nTextView\nTextView\nTextView\nTextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="TextView\nTextView\nTextView\nTextView\nTextView\nTextView\nTextView\nTextView\nTextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textView, textView2" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/barrier" />

</android.support.constraint.ConstraintLayout>

ConstraintLayout百分比宽度和高度 (ConstraintLayout Percentage Width and Height)

Constraint Layouts support percentage width and height, just like LinearLayout.

约束布局支持宽度和高度的百分比，就像LinearLayout一样。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="TextView\nTextView\nTextView\nTextView\nTextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="TextView\nTextView\nTextView\nTextView\nTextView\nTextView\nTextView\nTextView\nTextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toEndOf="@+id/textView"
        app:layout_constraintTop_toTopOf="parent" />

    <android.support.constraint.Barrier
        android:id="@+id/barrier"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="textView, textView2"
        tools:layout_editor_absoluteY="331dp" />

    <Button
        android:id="@+id/button7"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:text="Button"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/barrier" />

</android.support.constraint.ConstraintLayout>

For percentage width, you have to set the Button’s width to 0dp and vice-versa for percentage height.

对于百分比宽度，必须将Button的宽度设置为0dp，反之亦然。

约束布局的圆形定位 (Circular Positioning of Constraint Layout)

We can position the views at radial distances and angles from one another. The app:layout_constraintCircle is used to reference the view, which would act as the center of the circle.

我们可以将视图放置在彼此之间的径向距离和角度处。 app:layout_constraintCircle用于引用视图，该视图将作为圆的中心。

The app:layout_constraintCircleRadius and app:layout_constraintCircleAngle are used to set the radius distance from the center of the circle and the angle at which our view would be positioned.

app:layout_constraintCircleRadius和app:layout_constraintCircleAngle用于设置距圆心的半径距离和视图定位的角度。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">


    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="Hello"
        android:textSize="18sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hi"
        android:textSize="18sp"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="45"
        app:layout_constraintCircle="@+id/textView"/>


    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Another"
        android:textSize="18sp"
        app:layout_constraintCircleRadius="100dp"
        app:layout_constraintCircleAngle="135"
        app:layout_constraintCircle="@+id/textView"/>


</android.support.constraint.ConstraintLayout>

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

cunchi4221

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Kotlin的Android约束布局

In this tutorial, we will discuss the Android ConstraintLayout attributes. We will learn how to position views based on constraints through XML layout and programmatically using Kotlin. 在本教程中，我们将讨论And...
复制链接

扫一扫