ConstraintLayout 约束布局

发布于：2022-11-29 ⋅ 阅读:(623) ⋅ 点赞:(0)

Android ConstraintLayout 约束布局
Use ConstraintLayout to design your Android 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/menu_bg"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@mipmap/blue_bg"
    tools:layout_editor_absoluteY="25dp">

    <ImageView
        android:id="@+id/menu_logo"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:src="@mipmap/pic_1"
        app:layout_constraintBottom_toTopOf="@+id/guideline9"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline8"/>

    <TextView
        android:id="@+id/menu_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/menu_logo"
        android:gravity="center"
        android:text="@string/main_menu_0"
        android:textColor="@color/white"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/guideline8"
        app:layout_constraintTop_toTopOf="@+id/guideline11"
        tools:ignore="MissingConstraints"
        tools:layout_editor_absoluteX="0dp"/>

    <TextView
        android:id="@+id/menu_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:drawableLeft="@mipmap/icon_bule_3"
        android:drawablePadding="5dp"
        android:gravity="center"
        android:padding="10dp"
        android:text="@string/main_menu_start"
        android:textColor="@color/colorBlue"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toTopOf="@+id/guideline12"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline10"/>

    <com.cnbs.akhospital_cacsi.view.RoundProgressBar
        android:id="@+id/round_pb"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_centerInParent="true"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toTopOf="@+id/guideline10"
        app:layout_constraintEnd_toStartOf="@+id/guideline"
        app:layout_constraintHorizontal_bias="0.792"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline9"
        app:layout_constraintVertical_bias="0.503"
        app:rateTextColor="@color/colorBlue"
        app:rateTextSize="20sp"
        app:roundColor="@color/colorBlue"
        app:roundProgressColor="@color/base_color"
        app:roundWidth="5dp"
        app:titleText="@string/main_menu_pb_hint"
        app:titleTextColor="@color/base_color"
        app:titleTextSize="14sp"/>

    <TextView
        android:id="@+id/menu_plan_hint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:drawableLeft="@mipmap/icon_bule_1"
        android:drawablePadding="5dp"
        android:text="@string/main_menu_plan"
        android:textColor="@color/base_color"
        android:textSize="14sp"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toTopOf="@+id/round_pb"/>

    <TextView
        android:id="@+id/menu_plan_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:text="1000份"
        android:textColor="@color/base_color"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="@+id/menu_plan_hint"
        app:layout_constraintTop_toBottomOf="@+id/menu_plan_hint"
        tools:ignore="MissingConstraints"/>

    <TextView
        android:id="@+id/menu_does_hint"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:drawableLeft="@mipmap/icon_bule_2"
        android:drawablePadding="5dp"
        android:text="@string/main_menu_does"
        android:textColor="@color/base_color"
        android:textSize="14sp"
        app:layout_constraintStart_toStartOf="@+id/guideline"
        app:layout_constraintTop_toBottomOf="@+id/menu_plan_num"/>

    <TextView
        android:id="@+id/menu_does_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="2dp"
        android:text="220份"
        android:textColor="@color/base_color"
        android:textSize="14sp"
        app:layout_constraintEnd_toEndOf="@+id/menu_does_hint"
        app:layout_constraintTop_toBottomOf="@+id/menu_does_hint"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.5"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline8"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.11"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline9"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.5"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline10"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.89"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline11"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.01"/>

    <android.support.constraint.Guideline
        android:id="@+id/guideline12"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_percent="0.99"/>


</android.support.constraint.ConstraintLayout>

使用

引入 constraint-layout 的依赖

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

使用

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
</android.support.constraint.ConstraintLayout>

属性

1、相对定位

在ConstraintLayout中，可以相对于一个其它的组件，而定位当前组件。约束一个组件的横轴和纵轴，相关的属性有：

  • 横轴： Left, Right, Start and End
  • 纵轴：Top, Bottom

属性的规则：(当前控件B)
layout_constraint *[source]* _to *[target]* Of = "A"，
source 和 target 都表示某个方向；
= 后面接的就是 当前控件B 引做参考的控件A；
上面的属性规则表示的意思就是：
当前控件B 的 source 方向 相对于引用控件 A 的 target 方向，进行约束

  • 居中
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"

上面定位的含义是：
当前控件的 Bottom ，相对于 parent 的Bottom进行约束；
当前控件的 Left ，相对于 parent 的Left进行约束；
当前控件的 Right ，相对于 parent 的Right进行约束；
当前控件的 Top ，相对于 parent 的Top进行约束；
所以，当前控件就相对parent 进行居中了

居中约束

  • B 在 A 的右边

右侧约束

通过上面的解释，应该已经清楚了，‘’B 在 A 的右边“ ，就是B的左边相对与A 的右边进行约束，用代码表示就是：
B：app:layout_constraintLeft_toRightOf="A"
布局代码：

<?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">

    <TextView
        android:id="@+id/btn_A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="@color/colorBtnLight"
        android:padding="5dp"
        android:text="buttonA"/>

    <TextView
        android:id="@+id/btn_B"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="@color/colorBtn"
        android:padding="5dp"
        android:text="buttonB"
        app:layout_constraintLeft_toRightOf="@id/btn_A"/>

</android.support.constraint.ConstraintLayout>

约束代码只有一行就是，B的： app:layout_constraintLeft_toRightOf="@id/btn_A"

ok，左右约束就讲完了。

  • B 在 A 的下边

下边约束

‘’B 在 A 的下边“ ，就是B的上边相对与A 的下边进行约束，用代码表示就是：
B：app:layout_constraintTop_toBottomOf=“A”

约束代码同样只有一行就是，B的： app:layout_constraintTop_toBottomOf="@id/btn_A""

ok，上下约束也讲完了。

  • 相对位置的约束属性
    View的Left、Top、Right、Bottom还是比较好理解。
    那 Start 和 End 又是指的什么呢？
    其实 Start 和 End，是指的当前语言的开始和结束方向：大多数语言都是从左向右的，而少数语言是从右向左书写的。所以在我们语言环境中，Start = Left ，End = Right 。
layout_constraintLeft_toLeftOf
layout_constraintLeft_toRightOf
layout_constraintRight_toLeftOf
layout_constraintRight_toRightOf
layout_constraintTop_toTopOf
layout_constraintTop_toBottomOf
layout_constraintBottom_toTopOf
layout_constraintBottom_toBottomOf

layout_constraintBaseline_toBaselineOf

layout_constraintStart_toEndOf
layout_constraintStart_toStartOf
layout_constraintEnd_toStartOf
layout_constraintEnd_toEndOf

2、边距

  • gone margins
    在约束布局中除了之前的常规边距margins外，还新加了gone margins 。
    gone margins 的意义在于 ，当位置约束的相对控件的可见性为：View.GONE时，设置的边距依旧可用。
    使用和之前的边距是一样的。
layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom
  • 具体区别：（在C中设置边距属性，相对的控件是B ，B的相邻控件是A）

android:layout_margin
当控件B ,View.visible 或者 View.invisible时，设置的数值 相对于控件B有效；
当控件B ,View.Gone时，设置的数值，就相对于控件A有效了。

layout_goneMargin
当控件B ,View.visible 或者 View.invisible时，设置的数值，看不出任何效果 ，即边距无效；
当控件B ,View.Gone时，设置的数值，就相对于控件A有效了

  • 图示说明
    横向定义了三个按钮：A 、B 、 C
    A、B、C

  • C中设置android:layout_marginLeft="20dp"
    marginLeft="20dp"

  • B中设置android:visibility="gone"
    B：View.GONE

  • C中设置app:layout_goneMarginLeft="20dp"
    goneMarginLeft="20dp"

  • B中设置android:visibility="gone"
    B：View.GONE

区别在于，goneMargin，只有当目标控件View.GONE时才会触发

3、偏移率(bias)

使用

app:layout_constraintHorizontal_bias="0.1"
app:layout_constraintVertical_bias="0.8"

Horizontal_bias (横向偏移) 的取值范围[0.0, 1.0]，方向从左向右
Vertical_bias (纵向偏移) 的取值范围[0.0, 1.0]，方向从上向下

比如我们想让居中的那个按钮，移动到竖直方向居中，水平方向1/4的位置。我们就可以使用偏移率来实现。

    <TextView
        android:id="@+id/btn_A"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:background="@color/colorBtnLight"
        app:layout_constraintHorizontal_bias="0.25"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:padding="5dp"
        android:text="buttonA"/>

加上偏移

4、最小尺寸

当一个组件的宽或高设置为WRAP_CONTENT时，可以为它们设置一个最小尺寸：

android:minWidth
android:minHeight

5、Guideline，引导线

使用Guideline为相对组件时，以帮助定位组件。
Guideline主要属性有：

android:orientation    //方向
layout_constraintGuide_begin  //引导线距顶部或左边框的距离
layout_constraintGuide_end   //引导线距底部或右边框的距离
layout_constraintGuide_percent   //所占百分比

横线帮助纵向定位，纵线帮助横向定位。

本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布