Question

我陷入了Android的一个奇怪问题 - 我希望有一个看起来像这样的按钮：

 |-----------------------------------------------------------------------|
 |                   [icon] <5px> [text text text]                       |
 |-----------------------------------------------------------------------|

并且组（[icon]＆lt; 5px＆gt; [文本文本文本]）应居中。请注意，5px仅用作占位符，用于图标和文本之间的任何填充

我在这里找到一些答案，或多或少地围绕设置背景（我不想做因为我有另一个背景）或使用android：drawableLeft属性来设置图标。

然而，看起来像setCompoundDrawablesWithIntrinsicBounds方法的文档有点误导(see here)。它声明图像位于TEXT的左/右/上/下侧，这是不正确的。图标位于按钮的相应侧。例如：

设置android：drawableLeft属性会将图标放在最左边的位置并获取此信息（使用重力CENTER）：

 |-----------------------------------------------------------------------|
 | [icon]                     [text text text]                           |
 |-----------------------------------------------------------------------|

或者这个（重力为左）：

 |-----------------------------------------------------------------------|
 | [icon] [text text text]                                               |
 |-----------------------------------------------------------------------|

两者都很丑陋地说:(

我找到了一个看起来像这样的解决方法：

public static void applyTextOffset(Button button, int buttonWidth) {
    int textWidth = (int) button.getPaint().measureText(button.getText().toString());
    int padding = (buttonWidth / 2) - ((textWidth / 2) + Constants.ICON_WIDTH  + Constants.ICON_TO_TEXT_PADDING);
    button.setPadding(padding, 0, 0, 0);
    button.setCompoundDrawablePadding(-padding);
}

它或多或少都有效，但由于以下原因我不喜欢它：

需要知道按钮宽度。使用自动调整大小的按钮，直到实际布局完成后才能知道。 Google建议在渲染完成后使用侦听器来学习实际宽度，但这会使代码变得非常复杂。
我觉得我正在接受Android布局引擎的布局责任

难道没有更优雅的解决方案吗？

Answer 1

您也可以考虑使用自定义视图来创建自定义按钮。

这可能是从容易到极其复杂的任何地方。

如果您只需要覆盖onDraw()，那将很容易。如果你需要布置多个视图，那将会更复杂。

Answer 2

简单的方法是在LinearLayout中编写Button。像这样的东西

 <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_left"
                android:drawablePadding="5dp"
                android:duplicateParentState="true"
                android:text="Button text"/>

        </LinearLayout>

Answer 3

我在eclipse中试过这个并没有发现任何错误：

<Button android:id="@+id/test"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent" >
<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="center" 
    android:background="@android:color/transparent" >

    </LinearLayout>
    </Button>

因此，我想您可以在布局中添加图像和文本视图，它本身位于按钮内，并使布局居中。

最好的问候。

Android：如何创建一个按钮，图像和文本都居中

3 个答案: