android - android中的多行多列布局

Question

我想在 Android 中创建以下布局。

在多种屏幕尺寸下实现此 UI 的最佳布局是什么？我尝试使用 LinearLayout 并设置 layout_weight，但是第二行将需要另一个 layout_weight，这对性能不利。我也尝试过使用 TableLayout，但由于图像尺寸大，看不到第三行。

我应该使用 LinearLayout 并为每个屏幕尺寸（mdpi、hdpi 等）创建图像吗？

任何帮助表示赞赏。谢谢。

Answer 1

以下是您所需的 lyout。除非明智地使用，否则使用重量不是性能问题。仅当您使用过多具有权重的嵌套布局时，才会出现性能问题。每当我们开发支持多种分辨率的屏幕时，重量是最好的选择。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/img_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:weightSum="2">

        <ImageView
            android:layout_weight="1"
            android:id="@+id/img_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher" />

        <ImageView
            android:layout_weight="1"
            android:id="@+id/img_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_launcher" />
    </LinearLayout>

   <ImageView
        android:id="@+id/img_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher" />
</LinearLayout>

Answer 2

试试这个方法。这是一款适用于所有屏幕的加权布局设计作品。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />

        <ImageView
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@drawable/ic_launcher" />
    </LinearLayout>

</LinearLayout>

输出

Answer 3

这是布局的轮廓

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >

<ImageView 
    android:id="@+id/image_1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:scaleType="fitXY"
    android:background="@android:color/transparent"
    android:src="@drawable/abox"/>

<LinearLayout 
    android:id="@+id/lin_lt"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:weightSum="10"
    android:orientation="horizontal"
    android:layout_below="@+id/image_1">
    <ImageView 
    android:id="@+id/image_2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="5"
    android:scaleType="fitXY"
    android:src="@drawable/abox"
    android:background="@android:color/transparent"/>
    <ImageView 
    android:id="@+id/image_3"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="5"
    android:scaleType="fitXY"
    android:src="@drawable/abox"
    android:background="@android:color/transparent"/>
</LinearLayout>
<ImageView 
    android:id="@+id/image_4"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@+id/lin_lt"
    android:scaleType="fitXY"
    android:src="@drawable/abox"
    android:background="@android:color/transparent"/>

</RelativeLayout>

如果您为每个屏幕大小/密度组提供适当大小的图像，则可以摆脱 LinearLayout。为每个屏幕尺寸/密度使用适当尺寸的图像或使用 9patch 图像总是一个更好的主意。