ContraintLayout的基本属性与用法

Posted 安卓小小鸟

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ContraintLayout的基本属性与用法相关的知识,希望对你有一定的参考价值。

前言

A ConstraintLayout is a ViewGroup which allows you to position and size widgets in a flexible way.
简言:ConstraintLayout是可以灵活设置其内控件位置和大小的ViewGroup。

支持API 9 (Gingerbread)及以上,官方后续仍将对其API和功能进行扩展。

添加
1、 android Studio版本至少2.3,我用的是AS 3.1.3
2、 在build.gradle中添加依赖,如下:

dependencies
compile ‘com.android.support.constraint:constraint-layout:1.1.3’

正题

开局一张图,博客全靠编:

该布局如果以传统布局方式来写的话是这样的(由于显示逻辑问题实际情况更复杂,demo略做精简)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/product_item"
    android:layout_width="match_parent"
    android:layout_height="140dp"
    android:layout_marginBottom="2dp"
    android:layout_marginLeft="7dp"
    android:layout_marginRight="7dp">

    <FrameLayout
        android:id="@+id/product_img_container"
        android:layout_width="117dp"
        android:layout_height="117dp"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginBottom="7dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="7dp">
        <!-- 商品图片 -->
        <ImageView
            android:id="@+id/sku_img"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            tools:src="@drawable/ic_launcher_background" />

        <TextView
            android:id="@+id/sku_num"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:layout_gravity="end|right|bottom"
            android:paddingBottom="2dp"
            android:paddingLeft="6dp"
            android:paddingRight="6dp"
            android:paddingTop="2dp"
            android:textColor="#ffffff"
            android:textSize="11dp"
            tools:text="4件" />
    </FrameLayout>


    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_marginLeft="17dp"
        android:layout_marginRight="17dp"
        android:layout_marginTop="15dp"
        android:layout_toRightOf="@id/product_img_container"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="#ff000000"
        android:textSize="16dp"
        android:textStyle="bold"
        tools:text="飞利浦干湿两a~须a abc def" />

    <!-- 商品介绍 -->
    <TextView
        android:id="@+id/desc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/title"
        android:layout_below="@+id/title"
        android:layout_marginRight="17dp"
        android:layout_marginTop="9.5dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:lineSpacingMultiplier="1.1"
        android:maxLines="1"
        android:textColor="#818181"
        android:textSize="13dp"
        tools:text="西装作为职场必备 ITEM其修身线条,挺括的外观,舒适的穿着西装作为职场必备 ITEM其修身线条,挺括的外观" />

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/title"
        android:layout_marginBottom="12dp">

        <ImageView
            android:id="@+id/author_img"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignBottom="@id/author_name"
            android:layout_marginBottom="2dp"
            tools:src="@drawable/ic_launcher_background" />

        <TextView
            android:id="@+id/author_name"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:layout_alignParentBottom="true"
            android:layout_marginLeft="5dp"
            android:layout_toRightOf="@+id/author_img"
            android:ellipsize="end"
            android:gravity="center_vertical"
            android:maxLength="6"
            android:textColor="#6A6A6A"
            android:textSize="11sp"
            tools:text="美丽教主" />

        <!--喜欢人数&点赞-->
        <TextView
            android:id="@+id/common_like_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginBottom="10dp"
            android:textSize="13dp"
            android:textColor="@color/colorAccent"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_marginRight="6dp"
            tools:text="300人喜欢"/>
    </RelativeLayout>
</RelativeLayout>

可以看到,这个简单的布局已经做了两层嵌套

如果我们用ContraintLayout,就一层布局足以,不用嵌套。之前写的布局我们可以以这种方式简单转化一下:在desin中右击

转化完成后,我们的布局会乱,因为会把我们所有的嵌套布局删掉,如Relativelayout,FrameLayout等。所以我们需要手动调整一下。
当然,你可以直接用contraintLayout布局编写,在gradle文件中添加依赖即可。

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

在编写XML文件之前,我们需要了解一下ConstraintLayout的基本属性:

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

通常情况下,这些属性足够让我们编译一套复杂的布局。其实这些属性很简单,你完全可以当做加强版本的RelativeLayout来使用,Left_toLeftOf的意思就是我的左边跟xxid的左边相邻,其他意思类推。
例如假设你的textview要在imageView的右边,那么代码就这么写 在textView控件中 app:layout_constraintLeft_toRightOf="@图片控件的id"
所以改变完后的代码如下:

<?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/product_item"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="2dp"
    android:layout_marginLeft="7dp"
    android:layout_marginRight="7dp">

    <!-- 商品图片 -->
    <ImageView
        android:id="@+id/sku_img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        tools:src="@drawable/ic_launcher_background" />

    <TextView
        android:id="@+id/sku_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="2dp"
        android:paddingLeft="6dp"
        android:paddingRight="6dp"
        android:paddingTop="2dp"
        android:textColor="#ffffff"
        android:textSize="13dp"
        app:layout_constraintBottom_toBottomOf="@id/sku_img"
        app:layout_constraintRight_toRightOf="@id/sku_img"
        tools:text="4件" />


    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginLeft="16dp"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="#ff000000"
        android:textSize="16dp"
        android:textStyle="bold"
        app:layout_constraintLeft_toRightOf="@id/sku_img"
        app:layout_constraintRight_toRightOf="parent"
        tools:text="飞利浦干湿两a~须a abc def飞利浦干湿两a~须a abc def飞利浦干湿两a~须a abc de" />

    <!-- 商品介绍 -->
    <TextView
        android:id="@+id/desc"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:ellipsize="end"
        android:lineSpacingMultiplier="1.1"
        android:maxLines="1"
        android:textColor="#818181"
        android:textSize="13dp"
        app:layout_constraintLeft_toLeftOf="@id/title"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toBottomOf="@id/title"
        tools:text="西装作为职场必备 ITEM其修身线条,挺括的外观,舒适的穿着西装作为职场必备 ITEM其修身线条,挺括的外观" />


    <ImageView
        android:id="@+id/author_img"
        android:layout_width="30dp"
        android:layout_height="30dp"
        app:layout_constraintBottom_toBottomOf="@id/sku_img"
        app:layout_constraintLeft_toLeftOf="@id/title"
        tools:src="@drawable/ic_launcher_background" />

    <TextView
        android:id="@+id/author_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLength="6"
        android:textColor="#6A6A6A"
        android:textSize="11sp"
        app:layout_constraintBottom_toBottomOf="@id/author_img"
        app:layout_constraintLeft_toRightOf="@id/author_img"
        tools:text="美丽教主" />

    <!--喜欢人数&点赞-->
    <TextView
        android:id="@+id/common_like_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="13dp"
        app:layout_constraintBottom_toBottomOf="@id/sku_img"
        app:layout_constraintRight_toRightOf="parent"
        tools:text="300人喜欢" />

</android.support.constraint.ConstraintLayout>


布局截图如下:

可以看到,我们不用嵌套任何一个布局即可完成该布局的编码工作,所以在性能上,尤其是更加复杂的布局,岂不是很爽。
当然,有可能你在布局的过程中会遇到以下几种情况:

1. 两个控件之间怎么居中对齐?
2. 我设置了android:ellipsize="end"为什么没生效
3. 在某些逻辑下我要隐藏很多控件,为了方便,我在传统布局里可以将这些控件设置在一个ViewGroup里,就可以达到隐藏ViewGroup来简化单独的控件隐藏逻辑,现在新布局不让用布局嵌套了,我难道要一个个控件单独隐藏?
4. 我所依赖的一个控件在某些逻辑下setVisibiltyGone后,自身的位置发生了重大偏差,怎么办?

这些问题,我们都可以解决,篇幅问题,我们下期会依依解决这些问题,同时引出更多的高级用法,高级属性。

以上是关于ContraintLayout的基本属性与用法的主要内容,如果未能解决你的问题,请参考以下文章

息县装修“干湿分离设计”

ContraintLayout 开篇

RatingBar的基本用法

climate 和 weather的区别

Android中单选框RadioButton的基本用法

el 表达式的基本用法