ConstraintLayout的使用

2018-07-31 本文已影响10人 tmyzh

ConstraintLayout

相了解拖动方式的可以学习郭霖大神的文章
https://blog.csdn.net/guolin_blog/article/details/53122387

先看这样一个布局

代码如下

<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:layout_editor_absoluteY="81dp">
<TextView
    android:id="@+id/tv1"
    android:layout_width="140dp"
    android:layout_height="86dp"
    android:background="@color/colorAccent"
    android:layout_marginTop="12dp"
    android:layout_marginLeft="12dp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />
<TextView
    android:id="@+id/tv2"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginRight="12dp"
    android:text="马云:一年交税170多亿马云:一年交税170多亿马云:一年交税170多亿"
    android:textColor="#000000"
    android:textSize="16dp"
    app:layout_constraintLeft_toRightOf="@id/tv1"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="@id/tv1"
    />
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="12dp"
    android:text="8分钟前"
    android:textColor="#333"
    android:textSize="12dp"
    app:layout_constraintLeft_toRightOf="@id/tv1"
    app:layout_constraintBottom_toBottomOf="@id/tv1" />


</android.support.constraint.ConstraintLayout>

我们可以看到一些新的属性如下：作用就是左对齐，右对齐，上对齐，下对齐

    app:layout_constraintLeft_toRightOf="@id/tv1"
    app:layout_constraintBottom_toBottomOf="@id/tv1"

看到这里感觉还是跟RelativityLayout差不多的

新特性

app:layout_constraintDimensionRatio设置宽高比，适用于banner图，便捷了以前要在代码中动态配置的做法，效果如下

image

代码如下

<TextView
    android:id="@+id/banner"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="#765"
    android:gravity="center"
    android:text="Banner"
    app:layout_constraintDimensionRatio="H,16:6"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    />

这里说明一下在constrainLayout布局中很多时候对match_parent不敏感，用的是0dp 便是match_constraint

app:layout_constraintDimensionRatio="H,16:6"这里有个H，还可以用W,H表示宽全屏，高计算；W表示高全屏，宽计算

展示一个平分效果

image

代码如下

<TextView
    android:id="@+id/tab1"
    android:layout_width="0dp"
    android:layout_height="30dp"
    android:background="#f67"
    android:gravity="center"
    android:text="Tab1"
    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="#A67"
    android:gravity="center"
    android:text="Tab2"
    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="#767"
    android:gravity="center"
    android:text="Tab3"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab2"
    app:layout_constraintRight_toRightOf="parent"
    />

app:layout_constraintHorizontal_weight使用这个属性之后可以将平分做比列分割使用方法类似LinearLayout里面用weight

学到这里个人的感觉就是在约束布局中控件被上下左右拉扯

当上面三个tab的宽度非0时，有一个属性来控制展示效果，注意该属性要设置在第一个tab中

layout_constraintHorizontal_chainStyle

spread 默认效果

image

spread_inside

image

packed

image

右下角展示一个悬浮按钮的效果

没有约束布局之前可能想到加一个Releativitylayout 右对齐下对齐再给一个间距
用到约束布局之后可以省略布局，并且间距可以用百分比计算，增加适配性

[站外图片上传中...(image-962ec9-1533040344714)]

代码如下

<TextView
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="#612"
    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" />

上下左右都要对齐父布局，在不设置app:layout_constraintVertical_bias和
app:layout_constraintHorizontal_bias时，这个控件时居中的，这个给的0.9就是偏移的百分比，有没有感觉像一边加重了拉力

给控件设置设置辅助线，帮助控件在没有左对齐右对齐等控件时找到何时位置

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

android:orientation：vertical 或 horizontal，表示此 Guideline 是水平的还是垂直的线

处理上面用百分比计算辅助线偏移的距离下面方式也可以
app:layout_constraintGuide_begin：表示 Guideline 的距离左边或上边的距离，根据方向决定是距离哪边的
app:layout_constraintGuide_end：表示 Guideline 的距离右边或下边的距离，根据方向

在ConstraintLayout控件尺寸的使用一般有三种

一个具体的属性值，比如：123dp 或者一个 Dimension 引用
使用 wrap_content，根据自身大小决定
0dp 即 match_constraint

黑科技属性

layout_goneMarginStart
layout_goneMarginEnd
layout_goneMarginLeft
layout_goneMarginTop
layout_goneMarginRight
layout_goneMarginBottom

这个几个属性与marginLeft,marginRight,marginTop,mariginBottom作用类似用来设置控件边距，但是是在依赖控件gone的情况下才显示效果，并且会覆盖marginLeft等的作用

app:layout_constraintBaseline_toBaselineOf="@+id/tab1"运用textView中文字的底部对齐
[站外图片上传中...(image-f8387f-1533040344714)]
被圈中的代码如下

<TextView
    app:layout_constraintHorizontal_chainStyle="packed"
    android:id="@+id/tab1"
    android:layout_width="60dp"
    android:layout_height="30dp"
    android:background="#f67"
    android:gravity="center"
    android:text="Tab1"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/tab2"
     />
<TextView
    android:id="@+id/tab2"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:background="#A67"
    android:gravity="center"
    app:layout_constraintBaseline_toBaselineOf="@+id/tab1"
    android:text="Tab2"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@id/tab1"
    app:layout_constraintRight_toLeftOf="@+id/tab3"
    />

Barrier 用于把几个控件包裹起来做一个整体，本身在xml中不显示

image

例如被圈中的文字本身要求在第一个button下面正常显示，但是当第二个button突然变高时会遮住，我们需要把2个作为一个整体，文字统一显示在下方

image

代码如下

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

<Button
    android:id="@+id/button1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

<Button
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="200dp"
    android:text="Button"
    app:layout_constraintLeft_toRightOf="@id/button1"
    />

<android.support.constraint.Barrier
    android:id="@+id/barrier1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="bottom"
    app:constraint_referenced_ids="button1, button2"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/button2"/>

<TextView
    android:id="@+id/bottom_textview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="stone"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/barrier1"
    />
</android.support.constraint.ConstraintLayout>

app:barrierDirection 属性决定 Barrier 的方向，引用的他控件出现在他的哪个位置

ConstraintLayout的使用

ConstraintLayout

新特性

猜你喜欢

热点阅读