内容简介:以往的关于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> 复制代码
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。