可能是你最需要的ConstraintLayout示例集锦

栏目: Android · 发布时间: 7年前

内容简介：以往的关于A的中线与B的中线对齐，不管AB大小A的中线与B的上边对齐

以往的关于 ConstraintLayout 的文章都是讲解它的各种属性的用法，到底这些用法和属性怎么达到效果却说不清，只干巴巴说些属性的作用有什么用，希望直接能上手来用，因此以目标为导向，来看看这个控件如何展示它强大的功能!

说明

有些效果完全可以用嵌套实现，但却不能仅用一个层次的控件实现，所以可以多用 ConstraintLayout 进行视图层次的优化, 最好就是一开始直接用 ConstraintLayout 不用再推到后面
都以水平方向作为示例，竖直方向不言自明
关注关键属性（代码块中的行没法标红，所以靠悟性了）
不对各个属性单独说明了

中线对齐中线

A的中线与B的中线对齐，不管AB大小

<TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/right"
        app:layout_constraintBottom_toBottomOf="@+id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBB"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
复制代码

中线对齐边

A的中线与B的上边对齐

<TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textSize="30sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/right"
        app:layout_constraintBottom_toTopOf="@+id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBB"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
复制代码

边对齐中线

A的上边与B的中线对齐（有时由于锚点的原因不能简单的与上一条相反）这时我们需要一个辅助View了，然而并不是 android.support.constraint.Guideline 参看这篇文章

<TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="#333"
        android:textSize="23sp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="@+id/middle"/>

    <View
        android:id="@+id/middle"
        android:layout_width="match_parent"
        android:layout_height="0.5dp"
        app:layout_constraintRight_toRightOf="@id/right"
        android:visibility="invisible"
        app:layout_constraintTop_toTopOf="@id/right"
        app:layout_constraintBottom_toBottomOf="@id/right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBB"
        android:textColor="#999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
复制代码

边占比

A的右边对齐B整体宽度的30%处，不管A，B宽度变化

<TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="#333"
        android:textSize="30sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/percent_30"/>

    <View
        android:id="@+id/percent_30"
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:visibility="invisible"
        app:layout_constraintLeft_toLeftOf="@id/right"
        app:layout_constraintRight_toRightOf="@id/right"
        app:layout_constraintHorizontal_bias="0.3"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBB"
        android:textColor="#999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
复制代码

整体占比

A的整体宽度占在B整体宽度的30%

<TextView
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="#333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/right"
        app:layout_constraintRight_toLeftOf="@+id/percent_30"/>

    <View
        android:id="@+id/percent_30"
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:visibility="invisible"
        app:layout_constraintLeft_toLeftOf="@id/right"
        app:layout_constraintRight_toRightOf="@id/right"
        app:layout_constraintHorizontal_bias="0.3"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBBBBBBBBB"
        android:textColor="#999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
复制代码

整体中线占比

A整体始终处于B整体宽度的30%处，不管A宽度如何变化，即A的中线对齐B的水平30%处

<TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="#333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/percent_30"
        app:layout_constraintRight_toLeftOf="@+id/percent_30"/>

    <View
        android:id="@+id/percent_30"
        android:layout_width="0.5dp"
        android:layout_height="match_parent"
        android:visibility="invisible"
        app:layout_constraintLeft_toLeftOf="@id/right"
        app:layout_constraintRight_toRightOf="@id/right"
        app:layout_constraintHorizontal_bias="0.3"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBBBBBBBBB"
        android:textColor="#999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
复制代码

跟随消失

B设置为Gone，A跟随B也为Gone 这时需要用到辅助控件 android.support.constraint.Group , 同时也不是直接操作B，而且操作 Group ；用 Group 将两个控件绑定，设置 Group 消失时两个一同消失

<TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAA"
        android:textColor="#333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"/>

    <android.support.constraint.Group
        android:id="@+id/group"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:constraint_referenced_ids="left,right"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBBBBBBBB"
        android:textColor="#999"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
复制代码

代码处的设置为

view.findViewById(R.id.group).setVisibility(View.GONE);
复制代码

紧靠, 动态最大宽度

说明：该效果只能为ConstraintLayout实现!

希望达到以下效果 B紧靠A，各自宽度非固定值，一旦B到达边沿A宽度不能再增长，即A有最大宽度，但其由B决定（和LinearLayout的紧靠效果有点类似但完全不同!）即：

这种效果以往任何控件都无法以属性声明的方式实现，除非配合代码，但现在用 ConstraintLayout 了之后，爽了一啤! 展示 ConstraintLayout 强大功能的时候到了，上完整代码

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

    <TextView
        android:id="@+id/left"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        tools:text="AAAAAAAAAAAAADDDDDDD"
        android:textColor="#333"
        android:textSize="30sp"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/right"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintWidth_default="wrap"
        app:layout_constraintHorizontal_bias="0"/>

    <TextView
        android:id="@+id/right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="BBB"
        android:textColor="#999"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/left"
        app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
复制代码

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Learn Python the Hard Way

Zed Shaw / Example Product Manufacturer / 2011

This is a very beginner book for people who want to learn to code. If you can already code then the book will probably drive you insane. It's intended for people who have no coding chops to build up t......一起来看看《Learn Python the Hard Way》这本书的介绍吧!

码农工具