ConstraintLayout使用心得以及几个需要注意的地方

先先下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

android:layout_marginStart
android:layout_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight

android:layout_marginBottom

layout_constraintHorizontal_bias
layout_constraintVertical_bias

layout_constraintHorizontal_chainStyle
layout_constraintVertical_chainStyle

layout_constraintVertical_weight

注意：

1、宽高设置

android:layout_width="match_parent"android:layout_height="match_parent"

组件的宽或者高都不能设置成 match_parent，如果设置了，呵呵，后果就是该组件所有的约束失效。

2、ConstraintLayout比RelativeView或者LinearLayout功能更加强大，设置也更加简单，基本在一个ConstraintLayout中布局出所有你想要的效果。设置margin之前你必须设置layout_constraintLeft_toLeftOf 、layout_constraintRight_toRightOf、layout_constraintTop_toTopOf、layout_constraintBottom_toBottomOf等其中至少一个,才会有效果。

3、相互约束的设置。开发过程中可能经常遇到下图所显示的组件样式，布局方式是左边一个ImageView，右上TextView，右下TextView。然而用ConstraintLayout 的话那天才遇到这个情况时，研究了好久，今天在此分享出来，以免大家再掉坑里。

首先设置

imageview app:layout_constraintLeft_toLeftOf="parent"，然后两个Textview都需要设置

app:layout_constraintLeft_toRightOf="@+id/img" 居于ImageView 的右边

然后TextView 上下的水平对齐方式上面的Textview 需要设置两个属性

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintBottom_toTopOf="@+id/tv_bottom"

下面的Textview需要设置一个属性

app:layout_constraintBottom_toBottomOf="parent"

完整的代码：

<?xml version="1.0" encoding="utf-8"?>
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="wrap_content"
>
android:id="@+id/img"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="@dimen/margin_left"
android:background="@color/red"
android:layout_marginTop="10dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />

android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="@dimen/margin_left"
android:text="我在上面"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
app:layout_constraintBottom_toTopOf="@+id/tv_bottom"
app:layout_constraintLeft_toRightOf="@+id/img"
/>
app:layout_constraintTop_toBottomOf="@+id/tv_title"
android:id="@+id/tv_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginBottom="3dp"
android:layout_marginTop="3dp"
app:layout_constraintBottom_toBottomOf="parent"
android:text="我在下面"
app:layout_constraintLeft_toRightOf="@+id/img" />

更多相关文章

随机推荐