Android 相对布局网格按钮

Question

我正在尝试在相对布局中创建字母按钮。主要问题是我无法将按钮设置为保持 1:1 宽高比并在屏幕上正确显示。

这就是我想要实现的：

按钮应始终为 1:1，文本喊叫从按钮中间开始。到目前为止，我尝试过使用网格布局并将按钮放在 5x5 grinds 中。但是，如果我将按钮 w/h 设置为在某些显示器上假设为 50dp，我只能看到 A B C 和一半的 D。

我也尝试像这样使用 LinearLayout：

<RelativeLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_above="@id/adSponsor"
    android:layout_below="@id/barSearch"
    android:layout_margin="20dp">

    <LinearLayout

        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:orientation="vertical">

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

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:background="@drawable/letter_button"
                android:gravity="center|top"
                android:text="A"
                android:textAlignment="gravity"
                android:textColor="@color/red"
                android:textSize="@dimen/letter_box_text"
                android:textStyle="bold" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:background="@drawable/letter_button"
                android:gravity="center|top"
                android:text="B"
                android:textAlignment="gravity"
                android:textColor="@color/red"
                android:textSize="@dimen/letter_box_text"
                android:textStyle="bold" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:background="@drawable/letter_button"
                android:gravity="center|top"
                android:text="C"
                android:textAlignment="gravity"
                android:textColor="@color/red"
                android:textSize="@dimen/letter_box_text"
                android:textStyle="bold" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:background="@drawable/letter_button"
                android:gravity="center|top"
                android:text="D"
                android:textAlignment="gravity"
                android:textColor="@color/red"
                android:textSize="@dimen/letter_box_text"
                android:textStyle="bold" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:background="@drawable/letter_button"
                android:gravity="center|top"
                android:text="E"
                android:textAlignment="gravity"
                android:textColor="@color/red"
                android:textSize="@dimen/letter_box_text"
                android:textStyle="bold" />

        </LinearLayout>

    </LinearLayout>

</RelativeLayout>

但在这种情况下，按钮不是 1:1 纵横比。

任何人都可以指出实现此目标的正确方法是什么。此外，按钮喊在中间。按钮和搜索栏之间的距离以及按钮和页脚之间的距离应该相同。

Answer 1

在你的水平 LinearLayout 中添加这个：

android:weightSum="5"

在你的按钮中：

android:layout_weight="1"

假设每行有 5 个按钮。

Answer 2

为了获得方形按钮，我建议您将 class 子 Button class 并覆盖 onMeasure 方法：

public class SquareButton extends Button {
    public SquareButton(Context context) {
        super(context);
    }

    public SquareButton(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public SquareButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public SquareButton(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        if(width > height) {
            super.onMeasure(heightMeasureSpec, heightMeasureSpec);
        } else {
            super.onMeasure(widthMeasureSpec, widthMeasureSpec);
        }
    }
}

为了在按钮之间获得均匀的 space，我也会采用 LinearLayout 方法并在 Buttons 上设置 layout_weight。如果每行的按钮数是可变的，则可以跳过在父级上设置 weightSum 。为了使字母的底部从按钮的中间开始，也许值得尝试看看是否可以将 Button 的 paddingBottom 属性与 textSize 属性。如果没有，我想您也必须重写 onDraw 方法。

Answer 3

正如@iTurki 指出的那样，您应该使用 weightSum 和 layout_weight 组合在线性布局中均匀分布视图。也就是说，我知道您仍然需要在方框中显示您的角色。为此，您可以使用包含 ImageView 的 RelativeLayout 并将 ImageView 用作可点击按钮。

ImageView的优点是，你可以设置透明方形图片作为背景，使用android:adjustViewBounds="true"使得imageview的高度increases/decreases根据水平宽度space可用到图像视图。您的布局应如下所示。

<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:weightSum="5"
>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="A"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="B"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="C"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="D"
/>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="wrap_content"
>
<ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
android:src="square_transparent_Image.png"
/>
<TextView
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:gravity="center"
android:textAlignment="center"
android:text="E"
/>
</RelativeLayout>
</LinearLayout>

Android 相对布局网格按钮

Android relative layout grid buttons

android

android-layout

android-xml