带有左图标和文本的按钮完全对齐

Posted 2023-04-19

技术标签:

【中文标题】带有左图标和文本的按钮完全对齐【英文标题】：Button with left icon and text perfectly aligned 【发布时间】：2016-10-02 14:14:26 【问题描述】：

晚上好，

我正在开发一个 android 应用程序，我目前正在做 XML 中的登录界面。

我正在尝试创建带有图标和文本的按钮，如下图所示：

http://i.imgur.com/J5Cj1w4.png

这是我的实际结果：

http://i.imgur.com/VPALdDD.png

使用此代码：

    <Button
        style="?android:textAppearanceSmall"
        android:layout_
        android:layout_
        android:id="@+id/sign_up_facebook"
        android:text="@string/signup_with_facebook"
        android:textColor="@color/primaryTextLight"
        android:drawableLeft="@drawable/ic_facebook_box_white_24dp"
        android:layout_weight="0"
        android:background="@drawable/button_shape_login"/>

    <Button
        style="?android:textAppearanceSmall"
        android:layout_marginTop="20sp"
        android:layout_
        android:layout_
        android:id="@+id/sign_up_google"
        android:text="@string/signup_with_google"
        android:textColor="@color/primaryTextLight"
        android:drawableLeft="@drawable/ic_google_plus_box_white_24dp"
        android:layout_weight="0"
        android:background="@drawable/button_shape_login"/>

我卡在这一步了。

如何使用 XML 代码获得最终需要的结果？

谢谢！

【问题讨论】：

【参考方案1】：

您可以像这样为可绘制对象提供填充：android:drawablePadding="50dip"

Also this question answered in this post.

【讨论】：

【参考方案2】：

使用 android:drawablePadding 属性

【讨论】：

【参考方案3】：

更好的选择是实际上将按钮设置为相对/线性布局，并在内部设置布局，drawablePadding 不适用于不同长度的文本和按钮。

本质上，RelativeLayout 是带有嵌套 ImageView 和 TextView 的按钮，您可以很好地控制布局，按钮内的图像和文本周围有一致的填充。

以下我没有测试过，这基本上是你需要的

    <LinearLayout
        android:id="@+id/facebookButton"
        android:layout_
        android:layout_
        android:orientation="horizontal">
        <ImageView
            android:src="@drawable/your_drawable"
            android:layout_
            android:layout_
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="50dp"/>
        <TextView
            android:text="Sign up with Facebook"
            android:layout_
            android:layout_
            android:layout_marginLeft="25dp"/>
    </LinearLayout>

【讨论】：

【参考方案4】：

你只需要指定android:paddingLeft属性。

例如尝试指定36dp 的值

【讨论】：

【参考方案5】：