Android 约束布局ConstraintLayout解析_限制性布局中,app:layout_constraint 属性设置为什么值才能限制视图与右边对齐?

作者：我家小花儿 | 2024-03-12 20:06:30

踩

限制性布局中,app:layout_constraint 属性设置为什么值才能限制视图与右边对齐?

前言

ConstraintLayout是一个Support库，它支持向前兼容，最低可支持到API 9（android 2.3）目前app兼容性都是做到4.0以上所以ConstraintLayout的兼容性问题完全不用考虑，其本身更像是对RelativeLayout的升级，效率更高且更实用。

相对定位

layout_constraintLeft_toLeftOf view1左边对齐view2的左边
layout_constraintLeft_toRightOf view1左边对齐view2的右边
layout_constraintRight_toLeftOf view1右边对齐view2的左边
layout_constraintRight_toRightOf view1右边对齐view2的右边
layout_constraintTop_toTopOf view1顶部对齐view2的顶部
layout_constraintTop_toBottomOf view1顶部对齐view2的底部
layout_constraintBottom_toTopOf view1底部对齐view2的顶部
layout_constraintBottom_toBottomOf view1底部对齐view2的底部
layout_constraintBaseline_toBaselineOf view1基准线对齐view2的基准线
layout_constraintStart_toEndOf view1起始位置对齐view2的结束位置
layout_constraintStart_toStartOf view1起始位置view2的起始位置
layout_constraintEnd_toStartOf view1结束位置对齐view2的起始位置
layout_constraintEnd_toEndOf view1结束位置对齐view2的结束位置

从以上属性我们可以看出通过ConstraintLayout我们完全可以实现RelativeLayout的所有功能


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:background="@android:color/holo_blue_light"
        android:gravity="center"
        android:text="hello world"/>
    <TextView
        android:id="@+id/text2"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="hello world"
        android:gravity="center"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintLeft_toRightOf="@id/text1"
        app:layout_constraintBottom_toBottomOf="@id/text1"/>
</android.support.constraint.ConstraintLayout>

如果想要和父布局对其则可直接使用parent即可

app:layout_constraintLeft_toLeftOf="parent"

父布局居中


app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"

偏心定位

偏心定位由水平偏移app:layout_constraintHorizontal_bia和垂直偏移app:layout_constraintVertical_bias来设置，默认为0.5即50%（左偏移50%右偏移50%），0.3(左偏移30%右偏移70%)


<Button
        android:id="@+id/button"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:text="按钮"
        app:layout_constraintHorizontal_bias="0.3"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>

循环定位

官方解释：您可以以一定角度和距离约束相对于另一个窗口小部件中心的窗口小部件中心。这允许您将一个小部件放置在一个圆上。

宽高比

根据高或者宽的比例来设置组件大小（将宽或者高的其中一个设置为0dp，然后使用app:layout_constraintDimensionRatio="1:1"属性来设置其宽高比）


 <TextView
        android:id="@+id/text1"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:background="@android:color/holo_blue_light"
        android:gravity="center"
        android:text="hello world"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="1:1"
        />
    <TextView
        android:id="@+id/text2"
        android:layout_width="100dp"
        android:layout_height="0dp"
        android:text="hello world"
        android:gravity="center"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintLeft_toRightOf="@id/text1"
        app:layout_constraintDimensionRatio="2:1" />

链

如果一组小部件通过双向连接，则它们被视为链。水平链app:layout_constraintHorizontal_chainStyle="spread_inside"，垂直链 app:layout_constraintVertical_chainStyle="spread_inside"。

多种链的含义（宽或者高为wrap_content即非0状态）

layout_constraintVertical_chainStyle 两个属性来设置
属性值有以下三种：

spread
spread_inside
packed

spread

spread_inside

packed

控件之间的宽高占比

先创建链结构且链的宽或者高为0dp，然后通过app:layout_constraintHorizontal_weight="1"或者app:layout_constraintVertical_weight="1"设置其占比，这样我们也能通过ConstraintLayout来实现LinerLayout的布局了。


<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <TextView
        android:id="@+id/text1"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:background="@android:color/holo_blue_light"
        android:gravity="center"
        android:text="hello world"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="2"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@id/text2"
        />
    <TextView
        android:id="@+id/text2"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:text="hello world"
        android:gravity="center"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1"
        android:background="@android:color/holo_orange_dark"
        app:layout_constraintLeft_toRightOf="@id/text1"
        app:layout_constraintRight_toLeftOf="@id/text3"/>
    <TextView
        android:id="@+id/text3"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:text="hello world"
        android:gravity="center"
        app:layout_constraintHorizontal_chainStyle="spread_inside"
        app:layout_constraintHorizontal_weight="1.5"
        android:background="@android:color/holo_green_light"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@id/text2" />
</android.support.constraint.ConstraintLayout>

写在末尾

ConstraintLayout的使用无疑可以让我们的布局变得更简单，ConstraintLayout相对于RelativeLayout功能更加强大，效率更优，完全取代RelativeLayout也是必然。ConstraintLayout使组件之间的约束变得更细，也就简化了我们的工作，能更好的建立组件间的联系。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/225608