ConstraintLayout约束性布局实例

为啥要用ConstraintLayout布局，这篇文章解析ConstraintLayout的性能优势详细的介绍了ConstraintLayout 的性能；ConstraintLayout 在测量/布局阶段的性能比 RelativeLayout大约高 40%；
使用ConstraintLayout布局需要在build.gradle引用库

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

Android新特性介绍，ConstraintLayout完全解析这篇文章详细的介绍了使用ConstraintLayout 拖拽进行布局的基本用法。

ConstraintLayout翻译成为约束性布局，也可以说是增强型的相对布局；为什么说是增强型的相对的布局呢；看如下的属性

app:layout_constraintLeft_toLeftOf
app:layout_constraintRight_toRightOf
app:layout_constraintLeft_toRightOf
app:layout_constraintRight_toLeftOf
app:layout_constraintTop_toTopOf
app:layout_constraintBottom_toBottomOf
app:layout_constraintTop_toBottomOf
app:layout_constraintBottom_toTopOf

app:layout_constraintLeft_toLeftOf表示的是将当前控件的左边至于某个控件的左边；constraintLeft这边表示当前控件的左边，toLeftOf表示置于的某一个控件的左边；比如 app:layout_constraintTop_toBottomOf表示将当前控件的上边至于某个控件的下面；当然app:layout_constraintLeft_toLeftOf可以是某个控件的id；也可是parent；比如将某一个控件置于父控件的中间可以这样如下

app:layout_constraintTop_toTopOf=”parent”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintLeft_toLeftOf=”parent”
app:layout_constraintRight_toRightOf=”parent”
这里写图片描述
这样的页面标题、banner、图片用ConstraintLayout来布局整体上来看是不是和相对布局类似代码如下。

<?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:fitsSystemWindows="true"
    android:orientation="vertical">

    <include
        android:id="@+id/lb_test2"
        layout="@layout/layout_titlebar" />

    <ImageView
        android:id="@+id/img_bannner"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:src="@mipmap/action_gold_person_banner"
        app:layout_constraintTop_toBottomOf="@id/lb_test2"/>

    <ImageView
        android:id="@+id/img_test2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/icon_account_image"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>


</android.support.constraint.ConstraintLayout>

比较忙待续。。。

ConstraintLayout约束性布局实例

猜你喜欢