如何在ConstraintLayout中垂直或水平放置視圖？

Question

這裏是3次的Constraintlayout：

<?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" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/iv_profile_image" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     app:layout_constraintBottom_toTopOf="@+id/tv_name" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent"/> 

    <TextView 
     android:id="@+id/tv_name" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/iv_profile_image" /> 

    <TextView 
     android:id="@+id/tv_headline" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="@+id/tv_name" /> 

</android.support.constraint.ConstraintLayout> 

結果：

正如你可以看到，在每個視圖之間有很大的差距。我如何消除這些空白，並讓它們居中在屏幕上。我可以使用RelativeLayout或LinearLayout輕鬆實現這一點，但是我怎樣才能在這個ConstraintLayout中做到這一點？ ConstraintLayout是否被認爲是RelativeLayout的替代品？

Answer 1

當一個視圖有兩個相反的約束時，ConstraintLayout將視圖中心在這些約束之間。這是你的佈局中發生的事情。

如果您希望視圖在屏幕中央堆疊一個視圖，則一種方法是使用packed chain。

下面是使用垂直包裝鏈佈局：

這裏是XML。注意視圖是如何垂直約束的。

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <ImageView 
     android:id="@+id/iv_profile_image" 
     android:layout_width="100dp" 
     android:layout_height="100dp" 
     android:src="@mipmap/ic_launcher" 
     app:layout_constraintBottom_toTopOf="@+id/tv_name" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_chainStyle="packed" /> 

    <TextView 
     android:id="@+id/tv_name" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="tv_name" 
     app:layout_constraintBottom_toTopOf="@+id/tv_headline" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/iv_profile_image" /> 

    <TextView 
     android:id="@+id/tv_headline" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="tv_headline" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toBottomOf="@+id/tv_name" /> 

</android.support.constraint.ConstraintLayout> 

Answer 2

據說ConstraintLayouts提供比平常的RelativeLayouts更平坦的視圖層次和更好的性能。

我看到一些可能導致奇怪行爲的事情。例如，在這樣的觀點：

<TextView 
    android:id="@+id/tv_name" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="@+id/iv_profile_image" /> 

你說，這個觀點的頂部應與@ + ID/iv_profile_image視圖頂部對齊。你確定你不是說這個視圖的頂部應該與@ + id/iv_profile_image-view的底部一致嗎？等其他視圖...

Answer 3

試試這個它有助於您

• 我們，VE所用的所有四個constraints像left,right,top and bottom
• 可以實現這樣也
• 我don'nt認爲你總是喜歡Drag and Drop你可以跟程序一起去也

---

<?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" 
android:layout_width="match_parent" 
android:layout_height="match_parent"> 

<ImageView 
    android:id="@+id/iv_profile_image" 
    android:layout_width="100dp" 
    android:layout_height="100dp" 
    app:layout_constraintBottom_toTopOf="@+id/tv_name" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toTopOf="parent"/> 

<TextView 
    android:id="@+id/tv_name" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="" 
    app:layout_constraintTop_toBottomOf="@+id/iv_profile_image" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintBottom_toTopOf="@+id/tv_headline" /> 

<TextView 
    android:id="@+id/tv_headline" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="" 
    app:layout_constraintBottom_toBottomOf="parent" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintRight_toRightOf="parent" 
    app:layout_constraintTop_toBottomOf="@+id/tv_name" /> 

    </android.support.constraint.ConstraintLayout> 

---

竭誠爲您服務