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_marginEnd
android:layout_marginLeft
android:layout_marginTop
android:layout_marginRight
android:layout_marginBottom
layout_constraintHorizontal_biaslayout_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"?>
<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="wrap_content"
>
<ImageView
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" />
<TextView
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"
/>
<TextView
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" />
</android.support.constraint.ConstraintLayout>