ConstraintLayout可以實現這種設計嗎？

我正在玩ConstraintLayout，我無法猜測如何使用只有一個ConstraintLayout來做這個簡單的設計。ConstraintLayout可以實現這種設計嗎？

每個TextView的居中，其圖像。
每幅圖像都用固定邊距與以前的圖像分開。
所有視圖都像一個組一樣被水平居中。

我已經實現了使用RelativeLayout的設計：

<?xml version="1.0" encoding="utf-8"?> 
 
<RelativeLayout 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"> 
 

 
    <RelativeLayout 
 
     android:layout_width="wrap_content" 
 
     android:layout_height="wrap_content" 
 
     android:layout_centerHorizontal="true" 
 
     android:layout_marginTop="4dp"> 
 

 
     <RelativeLayout 
 
      android:id="@+id/androidALayout" 
 
      android:layout_width="wrap_content" 
 
      android:layout_height="wrap_content"> 
 

 
      <ImageView 
 
       android:id="@+id/androidAIV" 
 
       android:layout_width="wrap_content" 
 
       android:layout_height="wrap_content" 
 
       app:srcCompat="@mipmap/ic_launcher" 
 
       android:layout_centerHorizontal="true"/> 
 

 
      <TextView 
 
       android:id="@+id/androidATV" 
 
       android:layout_width="wrap_content" 
 
       android:layout_height="wrap_content" 
 
       android:text="Android A" 
 
       android:layout_below="@id/androidAIV" 
 
       android:layout_marginTop="4dp" 
 
       android:layout_centerHorizontal="true"/> 
 
     </RelativeLayout> 
 

 
     <RelativeLayout 
 
      android:id="@+id/androidBLayout" 
 
      android:layout_width="wrap_content" 
 
      android:layout_height="wrap_content" 
 
      android:layout_toRightOf="@id/androidALayout" 
 
      android:layout_marginLeft="32dp"> 
 

 
      <ImageView 
 
       android:id="@+id/androidBIV" 
 
       android:layout_width="wrap_content" 
 
       android:layout_height="wrap_content" 
 
       app:srcCompat="@mipmap/ic_launcher" 
 
       android:layout_centerHorizontal="true"/> 
 

 
      <TextView 
 
       android:id="@+id/androidBTV" 
 
       android:layout_width="wrap_content" 
 
       android:layout_height="wrap_content" 
 
       android:text="Android B" 
 
       android:layout_below="@id/androidBIV" 
 
       android:layout_marginTop="4dp" 
 
       android:layout_centerHorizontal="true"/> 
 
     </RelativeLayout> 
 

 
     <RelativeLayout 
 
      android:id="@+id/androidCLayout" 
 
      android:layout_width="wrap_content" 
 
      android:layout_height="wrap_content" 
 
      android:layout_toRightOf="@id/androidBLayout" 
 
      android:layout_marginLeft="32dp"> 
 

 
      <ImageView 
 
       android:id="@+id/androidCIV" 
 
       android:layout_width="wrap_content" 
 
       android:layout_height="wrap_content" 
 
       app:srcCompat="@mipmap/ic_launcher" 
 
       android:layout_centerHorizontal="true"/> 
 

 
      <TextView 
 
       android:id="@+id/androidCTV" 
 
       android:layout_width="wrap_content" 
 
       android:layout_height="wrap_content" 
 
       android:text="Android C" 
 
       android:layout_below="@id/androidCIV" 
 
       android:layout_marginTop="4dp" 
 
       android:layout_centerHorizontal="true"/> 
 
     </RelativeLayout> 
 

 
     <RelativeLayout 
 
      android:id="@+id/androidDLayout" 
 
      android:layout_width="wrap_content" 
 
      android:layout_height="wrap_content" 
 
      android:layout_toRightOf="@id/androidCLayout" 
 
      android:layout_marginLeft="32dp"> 
 

 
      <ImageView 
 
       android:id="@+id/androidDIV" 
 
       android:layout_width="wrap_content" 
 
       android:layout_height="wrap_content" 
 
       app:srcCompat="@mipmap/ic_launcher" 
 
       android:layout_centerHorizontal="true"/> 
 

 
      <TextView 
 
       android:id="@+id/androidDTV" 
 
       android:layout_width="wrap_content" 
 
       android:layout_height="wrap_content" 
 
       android:text="Android D" 
 
       android:layout_below="@id/androidDIV" 
 
       android:layout_marginTop="4dp" 
 
       android:layout_centerHorizontal="true"/> 
 
     </RelativeLayout> 
 

 
    </RelativeLayout> 
 
</RelativeLayout>

這可能嗎？

來源

2017-03-31 pepos

它肯定是可能的。最好的方法是選擇第一個ImageView作爲參考元素，限制其他一切。

通過分別爲圖像左右邊緣分配左右約束來居中TextView。
然後分別將每個圖像左側和頂部禁忌分配到其先前圖像的右側和頂部邊緣。
在佈局編輯器最後選擇所有圖片，點擊右鍵，水平居中（這將連鎖它們以適應屏幕寬度）

例子：

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

<TextView 
    android:id="@+id/textView" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="TextView" 
    app:layout_constraintLeft_toLeftOf="@+id/imageView" 
    app:layout_constraintRight_toRightOf="@+id/imageView" 
    android:layout_marginTop="8dp" 
    app:layout_constraintTop_toBottomOf="@+id/imageView" /> 

<ImageView 
    android:id="@+id/imageView" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:srcCompat="@mipmap/ic_launcher" 
    app:layout_constraintLeft_toLeftOf="parent" 
    app:layout_constraintTop_toTopOf="parent" 
    android:layout_marginTop="30dp" 
    app:layout_constraintRight_toLeftOf="@+id/imageView2" /> 

<TextView 
    android:id="@+id/textView2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="TextView" 
    app:layout_constraintLeft_toLeftOf="@+id/imageView2" 
    app:layout_constraintRight_toRightOf="@+id/imageView2" 
    android:layout_marginTop="8dp" 
    app:layout_constraintTop_toBottomOf="@+id/imageView2" /> 

<ImageView 
    android:id="@+id/imageView2" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:srcCompat="@mipmap/ic_launcher" 
    app:layout_constraintLeft_toRightOf="@+id/imageView" 
    app:layout_constraintTop_toTopOf="@+id/imageView" 
    app:layout_constraintRight_toLeftOf="@+id/imageView3" /> 

<TextView 
    android:id="@+id/textView3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="TextView" 
    app:layout_constraintLeft_toLeftOf="@+id/imageView3" 
    app:layout_constraintRight_toRightOf="@+id/imageView3" 
    android:layout_marginTop="8dp" 
    app:layout_constraintTop_toBottomOf="@+id/imageView3" /> 

<ImageView 
    android:id="@+id/imageView3" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:srcCompat="@mipmap/ic_launcher" 
    app:layout_constraintLeft_toRightOf="@+id/imageView2" 
    app:layout_constraintTop_toTopOf="@+id/imageView2" 
    app:layout_constraintRight_toLeftOf="@+id/imageView4" /> 

<TextView 
    android:id="@+id/textView4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="TextView" 
    app:layout_constraintLeft_toLeftOf="@+id/imageView4" 
    app:layout_constraintRight_toRightOf="@+id/imageView4" 
    android:layout_marginTop="8dp" 
    app:layout_constraintTop_toBottomOf="@+id/imageView4" /> 

<ImageView 
    android:id="@+id/imageView4" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:srcCompat="@mipmap/ic_launcher" 
    app:layout_constraintLeft_toRightOf="@+id/imageView3" 
    app:layout_constraintTop_toTopOf="@+id/imageView3" 
    app:layout_constraintRight_toRightOf="parent" />  

</android.support.constraint.ConstraintLayout>

來源

2017-04-01 00:32:41 ZexDC

我已經找到了解決辦法：Group views in ConstraintLayout to treat them as a single view

使用鏈，多個視圖可以像一個組進行處理。

來源

2017-04-01 00:16:15 pepos

ConstraintLayout可以實現這種設計嗎？

回答

相關問題