如何使用子子网格2x2和1x1创建3x3网格?

时间:2018-03-15 18:41:25

标签: android android-layout

目前我正在使用嵌套的线性布局和嵌套的权重和布局权重来实现我想要的截图。

然而,我确实注意到,正如皮棉警告所暗示的那样,我的一个过时电话有点慢。由于嵌套的权重总和似乎会妨碍设备的性能。

这是我目前的线性布局代码。我想实现截图。有没有其他方法可以实现它而不使用广泛的嵌套权重?我见过constraintLayout做类似的事情,但我如何实际使用呢?

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/title_layout"
    android:weightSum="3"
    android:orientation="vertical"
    android:layout_above="@id/next">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_weight="2">

        <RelativeLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#345678"
            android:layout_weight="2">

        </RelativeLayout>

        <LinearLayout
            android:layout_weight="1"
            android:layout_width="0dp"
            android:weightSum="2"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <RelativeLayout
                android:background="#3bcad5"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            </RelativeLayout>

            <RelativeLayout
                android:background="#3ca3d2"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1">
            </RelativeLayout>

        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:orientation="horizontal"
        android:weightSum="3"
        android:layout_weight="1">

        <RelativeLayout
            android:background="#123456"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

        </RelativeLayout>

        <RelativeLayout
            android:background="#310911"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

        </RelativeLayout>

        <RelativeLayout
            android:background="#92F358"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1">

        </RelativeLayout>

    </LinearLayout>
</LinearLayout>

enter image description here

1 个答案:

答案 0 :(得分:0)

您可以使用ConstraintLayout设置上面的布局,如下所示:

<强> my_file.xml

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


    <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@android:color/darker_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0">




        <android.support.constraint.Guideline
            android:id="@+id/guideline"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.6666667" />

        <View
            android:id="@+id/view_white"
            app:layout_constraintStart_toEndOf="@id/guideline"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintDimensionRatio="1"
            android:background="@android:color/white"/>


        <View
            android:id="@+id/view_green"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintDimensionRatio="1"
            android:background="@android:color/holo_green_dark"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toStartOf="@id/guideline"
        />

        <View
            android:id="@+id/view_orange"
            app:layout_constraintTop_toBottomOf="@+id/view_white"
            app:layout_constraintStart_toEndOf="@id/guideline"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintDimensionRatio="1"
            android:background="@android:color/holo_orange_dark"/>

        <View
            android:id="@+id/view_red"
            app:layout_constraintTop_toBottomOf="@+id/view_orange"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintDimensionRatio="1"
            android:background="@android:color/holo_red_dark"/>

        <View
            android:id="@+id/view_purple"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@android:color/holo_purple"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1"
            app:layout_constraintEnd_toStartOf="@+id/view_red"
            app:layout_constraintTop_toBottomOf="@+id/view_green" />

        <View
            android:id="@+id/view_blue"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@android:color/holo_blue_light"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintDimensionRatio="1"
            app:layout_constraintTop_toBottomOf="@+id/view_green" />


    </android.support.constraint.ConstraintLayout>


</android.support.constraint.ConstraintLayout>

main Constraint-Layout设置为square,第二个Constraint-Layout创建所有其他视图。这是完全像你的屏幕截图