1. 程式人生 > >ConstraintLayout使用心得以及幾個需要注意的地方

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