ConstraintLayout可以实现这种设计吗？

时间：2017-03-31 23:13:55

标签： android android-constraintlayout

我正在使用ConstraintLayout，我无法猜测如何仅使用ConstraintLayout来完成这个简单的设计。

Simple design

  1. 每个TextView都以其图像为中心。
  2. 每个图像都与前一个图像分开，并带有固定的边距。
  3. 所有视图都被视为一组，水平居中。

    4. 我使用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>

    这可能吗？

2 个答案:

答案 0 :(得分：2)

肯定是可能的。最好的方法是选择第一个ImageView作为参考元素来约束其他所有内容。

  1. 通过分别为其左右边缘分配左右约束来居中TextView。
  2. 然后将每个图像左上角和右上角分别分配给上一个图像的右边和上边缘。
  3. 最后选择布局编辑器中的所有图像，右键单击并水平居中（这将链接它们以适合屏幕宽度）

    4. 示例：

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

答案 1 :(得分：0)

我找到了解决方案：Group views in ConstraintLayout to treat them as a single view

使用链条，可以将多个视图视为一个组。

相关问题
最新问题