Question

我有一个圆形按钮，它在表中，所以它是2x2。问题是按钮很大，图像和文字相距很远。见下图。

如何缩小按钮，使它们大约是宽度/高度的一半。然后将图标向下移动到按钮的中心。也许减少按钮的高度/宽度会使图标更加移动到位。

CODE：

活性：

                <TableRow
                    android:id="@+id/tableRow1"
                    android:layout_width="fill_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1" >

                    <Button
                        android:id="@+id/call_requester"
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="1"
                        android:textColor="#ffffff"
                        android:background="@drawable/circlebuttonshape"
                        android:drawableTop="@drawable/ic_call_black_24dp"
                        android:text="Call" />


                    <Button
                        android:id="@+id/text_requester"
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="1"
                        android:background="@drawable/circlebuttonshape"
                        android:drawableTop="@drawable/ic_chat_bubble_black_24dp"
                        android:textColor="#ffffff"
                        android:text="Text" />
                </TableRow>

                <TableRow
                    android:id="@+id/tableRow2"
                    android:layout_width="fill_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1" >

                    <Button
                        android:id="@+id/add_dump_fee"
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="1"
                        android:background="@drawable/circlebuttonshape"
                        android:drawableTop="@drawable/ic_credit_card_black_24dp"
                        android:textColor="#ffffff"
                        android:text="Fee"
                        android:onClick="confirmFee"/>

                    <Button
                        android:id="@+id/confirm_change_type"
                        android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="1"
                        android:background="@drawable/circlebuttonshape"
                        android:drawableTop="@drawable/ic_people_black_24dp"
                        android:textColor="#ffffff"
                        android:text="XL"
                        android:onClick="confirmChangeType"/>
                </TableRow>

            </TableLayout>

CircleButton：

<?xml version="1.0" encoding="utf-8"?>

<stroke android:width="4px" android:color="#ffffff" />
<padding
    android:bottom="4dp"
    android:left="4dp"
    android:right="4dp"
    android:top="4dp" />

载体：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="#fffafafa"
    android:pathData="M20,4L4,4c-1.11,0 -1.99,0.89 -1.99,2L2,18c0,1.11 0.89,2 2,2h16c1.11,0 2,-0.89 2,-2L22,6c0,-1.11 -0.89,-2 -2,-2zM20,18L4,18v-6h16v6zM20,8L4,8L4,6h16v2z"/>

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:orientation="vertical">

<TableRow
    android:id="@+id/tableRow1"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

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

        <Button
            android:id="@+id/call_requester"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/circlebuttonshape"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_tick_expand"
            android:gravity="center"
            android:text="Call"
            android:textColor="#ffffff"/>
    </LinearLayout>

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

        <Button
            android:id="@+id/text_requester"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/circlebuttonshape"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_tick_expand"
            android:gravity="center"
            android:text="Text"
            android:textColor="#ffffff"/>
    </LinearLayout>
</TableRow>

<TableRow
    android:id="@+id/tableRow2"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1">

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

        <Button
            android:id="@+id/add_dump_fee"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/circlebuttonshape"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_tick_expand"
            android:gravity="center"
            android:text="Fee"
            android:textColor="#ffffff"/>
    </LinearLayout>

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

        <Button
            android:id="@+id/confirm_change_type"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="@drawable/circlebuttonshape"
            android:layout_weight="1"
            android:drawableTop="@drawable/ic_tick_expand"
            android:gravity="center"
            android:text="XL"
            android:textColor="#ffffff"/>
    </LinearLayout>
</TableRow>

Answer 2

使用此结构代替普通按钮

 <FrameLayout
  android:layout_width="0dp"
                        android:layout_height="fill_parent"
                        android:layout_weight="1"
android:background="@drawable/circlebuttonshape" >
<LinearLayout
android:orientation="vertical">
<ImageView/>
<TextView/>

</LinearLayout>
</Framelayout>

Answer 3

一个更好的解决方法是利用丰富的Unicode符号-在按钮左侧的文本左侧嵌入Unicode符号图标，而不必诉诸于这些布局技巧。您可以通过文本按钮轻松地使整个内容居中。

如何将文字和图标添加到Android按钮中心呢？

3 个答案: