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

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

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

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

说明

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

中线对齐中线

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

可能是你最需要的ConstraintLayout示例集锦 
<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的上边对齐

可能是你最需要的ConstraintLayout示例集锦 
<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 参看这篇文章

可能是你最需要的ConstraintLayout示例集锦 
<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宽度变化

可能是你最需要的ConstraintLayout示例集锦 
<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%

可能是你最需要的ConstraintLayout示例集锦 
<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%处

可能是你最需要的ConstraintLayout示例集锦 
<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示例集锦
可能是你最需要的ConstraintLayout示例集锦
可能是你最需要的ConstraintLayout示例集锦

这种效果以往任何控件都无法以属性声明的方式实现，除非配合代码，但现在用 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>
复制代码

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

查看所有标签

猜你喜欢:

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

码农书籍
Viral Loop

Viral Loop

Adam L. Penenberg / Tantor Media / 2009-10-27 / USD 34.99

From Google to Facebook, a respected journalist delves into how a "viral loop" can make an online business a success.一起来看看 《Viral Loop》 这本书的介绍吧!

码农工具
MD5 加密
MD5 加密

MD5 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2026 码农网 粤ICP备17054400号-3