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可以实现这种设计吗？

回答

相关问题