android - 将布局划分为 android 中的图 block 的最佳实践？

Question

我正在尝试从 google trips 重新创建 layotu，

而且我无法一个接一个地对齐侧边的瓷砖并仍然保持屏幕一分为二。

这是我目前得到的布局

我的布局xml文件

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/content_slides__screen"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="msn.apps.textswipehd.Slides_Screen.Slides_Screen"
    tools:showIn="@layout/activity_slides__screen">

    <RelativeLayout
        android:id="@+id/upperLayout"
        android:layout_width="match_parent"
        android:layout_height="200dp">

        <ImageView
            android:id="@+id/mainImage"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/slides_bg" />

        <TextView
            android:id="@+id/mainHeadlineText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="15dp"
            android:layout_marginTop="10dp"
            android:shadowColor="@color/text_shadow"
            android:shadowDx="1"
            android:shadowDy="1"
            android:shadowRadius="2"
            android:text="projectName"
            android:textColor="@color/projectWhite"
            android:textSize="20dp"
            android:textStyle="bold" />

        <Button
            android:id="@+id/editButton"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="20dp"
            android:layout_marginTop="10dp"
            android:background="@drawable/ic_create_white_24dp" />

    </RelativeLayout>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/upperLayout">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:id="@+id/linearUpper"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="180dp"
                android:layout_weight="1"
                android:background="@color/colorPrimaryDark">

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/upperRightLayout"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary">

            </RelativeLayout>

        </LinearLayout>



        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/linearUpper"
            android:orientation="horizontal">

            <RelativeLayout
                android:layout_width="0dp"
                android:layout_height="180dp"
                android:layout_weight="1"
                android:background="@color/colorPrimaryDark">

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/upperRightLayout2"
                android:layout_width="0dp"
                android:layout_height="100dp"
                android:layout_weight="1"
                android:background="@color/colorPrimary">

            </RelativeLayout>

        </LinearLayout>

    </RelativeLayout>

</RelativeLayout>

我怎样才能像 trips 应用程序一样对齐边栏？您有更好的 tiles 布局实践吗？

Answer 1

这种布局是通过staggered gridview的概念实现的

这里是交错gridview的教程链接

https://inducesmile.com/android/android-staggeredgridlayoutmanager-example-tutorial/

https://github.com/etsy/AndroidStaggeredGrid