XML 布局中的圆形按钮和灵活边距

Question

我想知道，实现这种布局的最佳方法是什么？

我一直在尝试各种方法，但我的按钮总是粘在一起。而且我不知道要在 XML 中创建一个完全符合所有屏幕尺寸的布局。

有什么想法吗？

Answer 1

<LinearLayout
            android:id="@+id/numericPad"
            android:layout_width="300dp"
            android:layout_height="match_parent"
            android:layout_below="@+id/statusMessage"
            android:layout_centerHorizontal="true"
            android:layout_marginLeft="5dip"
            android:layout_marginRight="5dip"
            android:layout_marginTop="20dip"
            android:orientation="vertical" >

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

                <Button
                    android:id="@+id/button1"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:layout_margin="3dip"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:padding="6dip"
                    android:text="1"
                    android:textColor="#ffffff"
                    android:textSize="25sp" >
                </Button>

                <Button
                    android:id="@+id/button2"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:layout_margin="3dip"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:padding="6dip"
                    android:text="2"
                    android:textColor="#ffffff"
                    android:textSize="25sp" >
                </Button>

                <Button
                    android:id="@+id/button3"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:layout_margin="3dip"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:padding="6dip"
                    android:text="3"
                    android:textColor="#ffffff"
                    android:textSize="25sp" >
                </Button>
            </LinearLayout>

这就是我创建此布局的方式，但这是在横向模式下，并且仅用于一行

Answer 2

您可以同时使用带权重和的线性布局以及圆形。这在所有移动屏幕上都是完美的。像这样，

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout        
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:showIn="@layout/activity_main">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:weightSum="3">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:background="@drawable/back"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="1" />
    </RelativeLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:background="@drawable/back"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="2" />
    </RelativeLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:background="@drawable/back"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="3" />
    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp"
    android:weightSum="3">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:background="@drawable/back"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="4" />
    </RelativeLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:background="@drawable/back"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="5" />
    </RelativeLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:background="@drawable/back"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="6" />
    </RelativeLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp"
    android:weightSum="3">

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:background="@drawable/back"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="7" />
    </RelativeLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:background="@drawable/back"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="8" />
    </RelativeLayout>

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

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_centerInParent="true"
            android:background="@drawable/back"
            android:padding="15dp"
            android:textSize="20dp"
            android:text="9" />
    </RelativeLayout>
</LinearLayout>

back.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <stroke
        android:width="1dp"
        android:color="@android:color/black" />

</shape>

Answer 3

这是我想给你一些提示。

XML 布局中的圆形按钮和灵活边距

Round Button and Flexible Margin in Layout in XML

android

android-layout

android-xml