Question

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

这就是我想要实现的目标：

按钮应始终为1：1，文本按钮从按钮中间开始。到目前为止，我尝试使用网格布局并将按钮放入5x5研磨中。但是如果我按下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

为了得到一个方形按钮，我建议你继承Button类并覆盖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);
        }
    }
}

为了获得按钮之间的均匀空间，我也可以使用LinearLayout设置Buttons方法和layout_weight。如果每行的按钮数是可变的，您可以跳过在父项上设置weightSum。为了让字母的底部从Button的中间开始，可能值得尝试一下，看看你是否可以匹配paddingBottom的{{1}}属性和{ {1}}财产。如果没有，我猜您也必须覆盖Button方法。

Answer 2

在水平LinearLayout中Ass这个：

android:weightSum="5"

这在你的按钮中：

android:layout_weight="1"

假设每行有5个按钮。

Answer 3

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

ImageView的优点是，您可以将透明方形图像设置为背景并使用android:adjustViewBounds="true"，以便根据imageview可用的水平宽度空间增大/减小imageview的高度。你的布局看起来应该是这样的。

<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相对布局网格按钮

3 个答案: