如何为 Android UI 布局绘制一个占设备宽度 50% 的矩形？

Question

我想在 UI 上绘制一个占设备屏幕宽度 50% 的灰色矩形，并将该矩形水平居中。我将在矩形中水平嵌入 2 个按钮以供用户输入。有没有简单的方法来设置 50% 屏幕宽度的布局？为矩形使用可绘制对象？

下面推荐基于LinearLayout代码的输出：

下面是布局文件。请注意，我必须为两个按钮添加 layout_width="wrap_content"，因为 Android Studio 不喜欢 layout_width="0dp" 由于嵌套布局警告。

<LinearLayout
        android:id="@+id/LinearLayout3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:gravity="center_vertical">

        <Space
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2" />

        <LinearLayout
            android:id="@+id/LinearLayout4"
            android:layout_marginTop="5dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="6"
            style="?android:attr/borderlessButtonStyle"
            android:baselineAligned="false"
            android:background="@color/colorHint">

            <Button
                android:id="@+id/clearButton"
                android:text="Clear"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="#FFFFFF"
                style="?android:attr/borderlessButtonStyle"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textStyle="bold"
                android:background="@drawable/savebutton_rounded"
                android:drawableStart="@drawable/ic_clear_white_24dp"
                android:drawableLeft="@drawable/ic_clear_white_24dp"
                android:drawablePadding="2dp"
                android:layout_marginEnd="10dp"
                android:layout_marginRight="10dp"
                android:onClick="onClickClear"  />

            <Button
                android:id="@+id/saveButtonRV"
                android:text="Save"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:textColor="#FFFFFF"
                style="?android:attr/borderlessButtonStyle"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textStyle="bold"
                android:background="@drawable/savebutton_rounded"
                android:drawableStart="@drawable/ic_save_white_24dp"
                android:drawableLeft="@drawable/ic_save_white_24dp"
                android:drawablePadding="3dp"
                android:layout_marginStart="10dp"
                android:layout_marginLeft="10dp"
                android:onClick="onClickSave"  />

        </LinearLayout>

        <Space
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="2" />

    </LinearLayout>

Answer 1

如果我对你的理解是正确的，你可以在布局 XML 中完成所有操作，为矩形使用灰色背景的 ViewGroup，并利用权重适当调整大小。

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

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

    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:background="#cccccc">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

    </LinearLayout>

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

</LinearLayout>

您没有指定灰色矩形的高度，所以我假设您希望它包裹按钮。

Answer 2

支持库中引入了 PercentFrameLayout 和 PercentRelativeLayout。它非常整洁，您可以为任何子视图指定任何百分比。

有关 PercentFrameLayout 的更多信息https://developer.android.com/reference/android/support/percent/PercentFrameLayout.html。

或 PercentRelativeLayout https://developer.android.com/reference/android/support/percent/PercentRelativeLayout.html

<android.support.percent.PercentFrameLayout
    android:layout_width="match_parent"
    android:layout_height="100dp">

    <LinearLayout
        app:layout_widthPercent="50%"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal">

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

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

    </LinearLayout>

</android.support.percent.PercentFrameLayout>

您可以通过在 gradle 中导入 compile 'com.android.support:percent:23.0.1' 来使用它。

Answer 3

您可以像 Mike 建议的那样使用 LinearLayout 和权重，或者您可以尝试百分比支持库：

<?xml version="1.0" encoding="utf-8"?>
<android.support.percent.PercentRelativeLayout
  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">

  <LinearLayout
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_widthPercent="50%"
    android:background="#888"
    android:layout_centerHorizontal="true">

    <!-- Your buttons here -->

  </LinearLayout>
</android.support.percent.PercentRelativeLayout>

并记得在 build.gradle

中 compile 'com.android.support:percent:23.0.1'

如何为 Android UI 布局绘制一个占设备宽度 50% 的矩形？

How do I draw a rectangle that takes up 50% of the device width for an Android UI layout?

android

android-layout

android-drawable