将屏幕分成 4 个相等的部分 - android

Posted 2023-03-10

【中文标题】将屏幕分成 4 个相等的部分 - android

【英文标题】：divide screen into 4 equal parts - android

【发布时间】：2015-11-20 18:45:30

【问题描述】：

我希望我在 android 中的屏幕被分成 4 个相同大小的相等部分。它必须在横向模式下工作。This is an example of how i want it to look like

【问题讨论】：

你试过了吗？

我尝试使用两个线性布局，但我只能将页面分成两半

【参考方案1】：

您可以只使用线性布局和权重来做到这一点：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_
    android:layout_
    android:orientation="vertical"
    android:background="#ffffff"
    android:padding="10dp" >

    <LinearLayout
        android:layout_
        android:layout_
        android:layout_weight=".5"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_
            android:layout_
            android:layout_weight=".5"
            android:orientation="vertical"
            android:layout_marginRight="5dp"
            android:layout_marginBottom="5dp"
            android:background="#ff0000"/>

        <LinearLayout
            android:layout_
            android:layout_
            android:layout_weight=".5"
            android:orientation="vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginBottom="5dp"
            android:background="#ff8000"/>

    </LinearLayout>

    <LinearLayout
        android:layout_
        android:layout_
        android:layout_weight=".5"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_
            android:layout_
            android:layout_weight=".5"
            android:orientation="vertical"
            android:layout_marginRight="5dp"
            android:layout_marginTop="5dp"
            android:background="#336699"/>

        <LinearLayout
            android:layout_
            android:layout_
            android:layout_weight=".5"
            android:orientation="vertical"
            android:layout_marginLeft="5dp"
            android:layout_marginTop="5dp"
            android:background="#993366"/>

        </LinearLayout>

</LinearLayout>

更新：在块周围和块之间有 10dp“空白”。如果您还想对每个块应用圆角，就像在您的屏幕截图中一样，请查看 android 的 xml drawables。然后可以将这些应用于android:background，而不是像我的示例中那样的纯色;)

更新 2： 使用 xml drawable 创建圆角：

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <corners
        android:radius="10dp" />
    <solid
        android:color="#ff8000" />
</shape>

将 xml drawable 保存到您的 drawable 目录中，就像保存任何其他图像 (png/jpg/etc) 一样，并从您的视图中引用它，例如：

android:background="@drawable/your_xml_drawable_res"

当然，如果您为所有 4 个方块应用与背景相同的资源，您将获得四个橙色 (#ff8000) 背景。您可以创建 4 个上述 xml 可绘制对象的副本，并将每个副本中的 android:color 更改为唯一的阴影。

就是这样;)

【讨论】：

酷！ :) 如果您想要像示例屏幕截图中那样的圆角，也有办法做到这一点。查看 xml drawables。

我该怎么做？ :o

【参考方案2】：

除了mjp66 answer，我可以说使用支持库中的GridLayout 可以更好地完成此布局。在这种情况下，您不需要处理多个列中的更改（如果有的话）。

您的代码将如下所示：

<android.support.v7.widget.GridLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_
    android:layout_
    app:rowCount="2"
    app:columnCount="2">

    <View
        android:id="@+id/top_left"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>

    <View
        android:id="@+id/top_right"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>

    <View
        android:id="@+id/bottom_left"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>

    <View
        android:id="@+id/bottom_right"
        app:layout_gravity="fill_horizontal"
        app:layout_columnWeight="1"
        app:layout_rowWeight="1"/>

</android.support.v7.widget.GridLayout>

所以，你不需要关心宽度/高度，布局会自动执行。

【讨论】：

这是完成此任务的一种非常好的方式:)

【参考方案3】：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_
android:layout_
android:orientation="horizontal">

<LinearLayout
    android:layout_
    android:layout_
    android:layout_weight=".5"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_
        android:layout_
        android:layout_weight=".5"
        android:orientation="vertical"
        android:background="#ff0000"/>

    <LinearLayout
        android:layout_
        android:layout_
        android:layout_weight=".5"
        android:orientation="vertical"
        android:background="#ff8000"/>

</LinearLayout>


<LinearLayout
    android:layout_
    android:layout_
    android:layout_weight=".5"
    android:orientation="horizontal">

    <LinearLayout
        android:layout_
        android:layout_
        android:layout_weight=".5"
        android:orientation="vertical"
        android:background="#336699"/>

    <LinearLayout
        android:layout_
        android:layout_
        android:layout_weight=".5"
        android:orientation="vertical"
        android:background="#993366"/>

</LinearLayout>