ConstraintLayout使用

最新推荐文章于 2021-07-14 16:48:48 发布

Nancy_627

最新推荐文章于 2021-07-14 16:48:48 发布

阅读量289

点赞数 1

分类专栏： Android学习文章标签： android studio android

本文链接：https://blog.csdn.net/Nancy_627/article/details/114794441

版权

Android学习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ConstraintLayout使用

之前一直是使用LinearLayout（线性布局）来实现UI界面设计，最近的项目中界面主要是使用ConstraintLayout（相对布局）来实现，所以来学习了，记录一下。
根据鸿洋大大的来学习：链接在这

属性

1. 根据字面理解，指控件A与控件B左侧对齐

app:layout_constraintLeft_toLeftOf="@id/viewB"

同理与之类似的还有几个属性：

layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf
layout_constraintBaseline_toBaselineOf

2. 做到RL（相对布局）一样的布局

类似上图这种，代码如下：

//使控件充满整个布局宽度
<Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintTop_toTopOf="parent" //上边界与父布局上边界对齐
        app:layout_constraintLeft_toLeftOf="parent"//左边界与父布局左边界对齐
        android:layout_marginLeft="16dp"//设置左边界距离
        android:layout_marginTop="10dp"//设置上边界距离
        />

    <EditText
        android:layout_width="0dp"//**设置宽度为0dp**
        android:layout_height="wrap_content"
        android:hint="请在此输入"
        app:layout_constraintLeft_toRightOf="@id/button1"//输入框左边界与按钮右边界对齐
        app:layout_constraintRight_toRightOf="parent"//输入框右边界与父边界对齐
        app:layout_constraintTop_toTopOf="@+id/button1"
        android:layout_marginRight="16dp"
        />

3. 增加一个Banner(定制宽高比)

效果如图：
要点在于，将宽高设置为0dp.

属性：layout_constraintDimensionRatio=“H,16:6”
意思是设置宽高比为16：6
同时设置
app:layout_constraintLeft_toLeftOf=“parent”
app:layout_constraintRight_toRightOf=“parent”

在ConstraintLayout不要使用match_parent了，而是设置match_contraint，即0，让约束来控制布局宽高。代码如下

<TextView
        android:id="@+id/banner"
        android:layout_width="0dp"//设置宽度为0dp
        android:layout_height="0dp"//设置高度为0dp
        android:text="banner"
        android:gravity="center"
        android:background="#BFBFBF"
        app:layout_constraintDimensionRatio="16:6"//设置宽高比
        app:layout_constraintLeft_toLeftOf="parent"//宽度充满父布局
        app:layout_constraintRight_toRightOf="parent"//宽度充满父布局
        tools:ignore="MissingConstraints" />

4. 在底部增加几个Tab

效果如图：

与写一个RL界面一样，使得tabs充满父布局，设置宽度为0dp,再设置边界对齐即可。代码如下：

<TextView
        android:id="@+id/tab1"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#b3b3b3"
        android:text="tab1"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/tab2"
        />

    <TextView
        android:id="@+id/tab2"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#717a78"
        android:text="tab2"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab1"
        app:layout_constraintRight_toLeftOf="@id/tab3"
        />

    <TextView
        android:id="@+id/tab3"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:background="#F5F5F5"
        android:text="tab3"
        android:gravity="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@id/tab2"
        app:layout_constraintRight_toRightOf="parent"
        />

也可以给各个tab设置属性：app:layout_constraintHorizontal_weight
分别设置值为2，1，1

3个tab两两设置了依赖：
横向的相当于组成了一个链(Chains)。在这个链的最左侧的元素成为链头，我们可以在其身上设置一些属性，来决定这个链的展示效果：
该属性为：layout_constraintHorizontal_chainStyle
chainStyle=”spread”，所有控件宽度设置为match_constraint，因为默认就是spread，所以我们没有显示设置。
其取值可以为：

spread
packed
spread_inside

5. 增加浮动按钮

追加一个TextView冒充我们的浮动按钮。可以看到我们设置了固定值，被设置约束为右下角。
正常情况可以通过margin来设置与右侧与底部的距离。
但是这里我们尝试使用量个新的属性：

layout_constraintHorizontal_bias
layout_constraintVertical_bias
设置上下两侧间隙比例分别为90%与10%

代码如下：

<TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#B4FFF2"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="0.9"//设置左右两侧间隙比例
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.9"//设置上下两侧间隙比例 />

6. 使用Guideline

android.support.constraint.Guideline该类比较简单，主要用于辅助布局，即类似为辅助线，横向的、纵向的。该布局是不会显示到界面上的。
所以其有个属性为：
android:orientation取值为”vertical”和”horizontal”.
除此以外，还差个属性，决定该辅助线的位置：

layout_constraintGuide_begin
layout_constraintGuide_end
layout_constraintGuide_percent

可以通过上面3个属性其中之一来确定属性值位置。

begin=30dp，即可认为距离顶部30dp的地方有个辅助线，根据orientation来决定是横向还是纵向。
end=30dp，即为距离底部。
percent=0.8即为距离顶部80%。

刚才的浮点按钮，我决定通过两根辅助线来定位，一根横向距离底部80%，一个纵向距离顶部80%，浮点按钮就定位在他们交叉的地方。
代码如下：

<androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_h"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.8"/>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline_w"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8"/>

    <TextView
        android:layout_width="60dp"
        android:layout_height="60dp"
        android:background="#B4FFF2"
        app:layout_constraintLeft_toRightOf="@id/guideline_w"
        app:layout_constraintTop_toBottomOf="@id/guideline_h" />