Android界面布局一：约束布局

最新推荐文章于 2024-08-18 14:26:35 发布

卡卡-卡卡

最新推荐文章于 2024-08-18 14:26:35 发布

阅读量1.4k

点赞数 2

分类专栏： Android基础

Android基础专栏收录该内容

73 篇文章 3 订阅

订阅专栏

Android界面布局一：约束布局

原文：https://blog.csdn.net/lmj623565791/article/details/78011599

一：添加依赖

引入我们的ConstraintLayout，在build.gradle中加入：

    compile 'com.android.support.constraint:constraint-layout:1.0.2'

二：属性介绍

layout_constraintRight_toLeftOf：当前控件的右边位于指定控件的左边

layout_constraintRight_toRightOf：当前控件的右边位于指定控件的右边

layout_constraintTop_toTopOf：当前控件的上边位于指定控件的上

layout_constraintTop_toBottomOf：当前控件的上边位于指定控件的下

layout_constraintBottom_toTopOf：当前控件的下边位于指定控件的上

layout_constraintBottom_toBottomOf：当前控件的下边位于指定控件的下

layout_constraintBaseline_toBaselineOf：当前控件的文字位于指定控件的文字对齐

ConstraintLayout中已经不支持MATCH_PARENT这个值了，你可以通过0配合约束实现类似的效果。

三、设置控件宽高比

设置控件宽高比，三种写法都可以：

layout_constraintDimensionRatio="16:6"

layout_constraintDimensionRatio="H,16:6"

layout_constraintDimensionRatio="W,6:16"

效果图：
在这里插入图片描述
代码实现：

<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"
    android:background="#000"
    android:orientation="vertical"
    tools:context=".MainActivity">
<!--以下设置效果相同-->
        <!--app:layout_constraintDimensionRatio="16:6"-->
        <!--app:layout_constraintDimensionRatio="H,16:6"-->
        <!--app:layout_constraintDimensionRatio="W,6:16"-->
    <TextView
        android:id="@+id/btn1"
        app:layout_constraintDimensionRatio="16:6"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#f00"
        android:gravity="center"
        android:text="test"
        android:textSize="40dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
         />

</android.support.constraint.ConstraintLayout>

四：设置按比例等分控件

效果图1：3个Tab等分

在这里插入图片描述

效果图2：按比例设置
在这里插入图片描述

实现方式：

效果1有两种实现方式：

方式1：

3个tab两两设置了约束（即你在我们的左边，我在你的右边），最外层的设置了parent约束；再加上我们把宽度都设置为了0，这样我们就完成了3个tab等分。

  app:layout_constraintBottom_toBottomOf="parent" 
  app:layout_constraintLeft_toRightOf="@id/tab1"
  app:layout_constraintRight_toLeftOf="@+id/tab3"

方式2：

设置weight：分别设置控件的weight和宽等于0实现：

  android:layout_width="0dp"
  app:layout_constraintHorizontal_weight="2"
  layout_constraintHorizontal_chainStyle

3个tab两两设置了依赖，即类似下图：
在这里插入图片描述
横向的相当于组成了一个链(Chains)。在这个链的最左侧的元素成为链头，我们可以在其身上设置一些属性，来决定这个链的展示效果：
该属性为：

layout_constraintHorizontal_chainStyle

我们已经见过一种效果了，即按照weight等分，可以成为weighted chain。设置条件为：

chainStyle=”spread”

所有控件宽度设置为match_constraint，因为默认就是spread，所以我们没有显示设置。

其取值还可以为：

packed
spread_inside

spread + 宽度非0
在这里插入图片描述
spread + 宽度为0，且可以通过weight控制分配比例（上例）

spread_inside + 宽度非0
在这里插入图片描述
packed + 宽度非0

chain总结:

五：bias

可以理解为约束布局的拉力大小：

如：

app:layout_constraintHorizontal_bias="0.9"
app:layout_constraintVertical_bias="0.9"

即表示水平位置在屏幕的90%的位置，垂直在Y方向的90%位置

六、尝试使用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%，浮点按钮就定位在他们交叉的地方。

效果图：
在这里插入图片描述

<android.support.constraint.ConstraintLayout 
    ...
    tools:context="com.zhy.constrantlayout_learn.MainActivity">

    <android.support.constraint.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" />


    <android.support.constraint.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="#612"
        app:layout_constraintLeft_toRightOf="@id/guideline_w"
        app:layout_constraintTop_toBottomOf="@id/guideline_h" />

</....>