如何在materialbutton中定位图标位置

Question

我正在使用支持库中的 Materialbutton。我希望图标位于文本的右侧？我似乎找不到如何做到这一点。 任何帮助表示赞赏

Answer 1

尝试在开始和结束时添加填充。你应该能够用它来定位图标。例如：

<androidx.appcompat.widget.AppCompatButton
                        android:id="@+id/fai_btn_dislike"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginStart="16dp"
                        android:paddingLeft="16dp"
                        android:paddingRight="16dp"
                        android:layout_weight="1"
                        android:background="@drawable/btn_rounded"
                        android:drawableStart="@drawable/ic_thumb_down"
                        android:text="@string/fai_dislike"
                        app:icon="@drawable/ic_thumb_down" />

Answer 2

如果你正在寻找只有一个图标的材质按钮，只需复制这个类并使用它：

/**
 * Created by osapps on 1/20/21.
 *
 * This is a simple class of a material button with just an icon. You can set whatever you want in the xml to use this, but just make sure to also
 * the button's insetTop, insetBottom, insetLeft and insetRight to 0.
 */
class MaterialIconButton : MaterialButton {

    // indications
    private var absPropsSet = false

    constructor(context: Context) : super(context) {
        commonInit()
    }

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
        commonInit()
    }

    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(
        context,
        attrs,
        defStyleAttr
    ) {
        commonInit()
    }

    private fun commonInit() {
        setBackgroundColor(Color.TRANSPARENT)
        strokeWidth = 0
        stateListAnimator = null
        iconTintMode = PorterDuff.Mode.MULTIPLY
        iconGravity = ICON_GRAVITY_TEXT_START
        iconPadding = 0
    }

    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
        if(!absPropsSet) {
            iconSize = measuredWidth - paddingStart
        }
    }

    /**
     * Will set absolute properties for the button. Call this function to make the button look exactly as you want.
     * NOTICE: don't forget to set, in the xml, the button's insetTop, insetBottom, insetLeft and insetRight to 0.
     */
    fun setAbsProps(iconSize: Int, @DimenRes paddingRes: Int? = null) {
        absPropsSet = true
        var padding = 0
        paddingRes?.apply { padding = resources.getDimensionPixelSize(paddingRes) }
        setPadding(0, 0, 0, 0)
        this.iconSize = iconSize
        layoutParams.width = iconSize + padding
        layoutParams.height = iconSize + padding
    }

}

使用示例：

<com.osfunapps.remoteforsamsung.views.MaterialIconButton
            android:id="@+id/no_ads_btn"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_margin="12dp"

            android:insetLeft="0dp"
            android:insetTop="0dp"
            android:insetRight="0dp"
            android:insetBottom="0dp"
            android:padding="12dp"

            android:onClick="onNoAdsClick"
            app:icon="@drawable/ic_crown"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintWidth_percent="0.15"
            app:layout_constraintDimensionRatio="1:1"
            app:rippleColor="#F8CE36"
            />

Answer 3

您可以使用 app:iconGravity 属性。
使用app:iconGravity="end" 值。

Answer 4

实现这一点的唯一布局方法是：

如果您使用的是支持库

implementation 'com.android.support:design:28.0.0'

你可以试试

<android.support.v7.widget.AppCompatButton
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableRight="@android:drawable/ic_menu_camera"
    android:text="Camera" />

---

如果您使用的是较新的材质 ui 库

implementation 'com.google.android.material:material:1.0.0'

你可以试试

<androidx.appcompat.widget.AppCompatButton
    android:id="@+id/button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableRight="@android:drawable/ic_menu_camera"
    android:text="Camera" />

Answer 5

MaterialButton 没有公共 API 允许您将图标放在文本的右侧。这个private方法控制图标的绘制：

private void updateIcon() {
    if (this.icon != null) {
        this.icon = this.icon.mutate();
        DrawableCompat.setTintList(this.icon, this.iconTint);
        if (this.iconTintMode != null) {
            DrawableCompat.setTintMode(this.icon, this.iconTintMode);
        }

        int width = this.iconSize != 0 ? this.iconSize : this.icon.getIntrinsicWidth();
        int height = this.iconSize != 0 ? this.iconSize : this.icon.getIntrinsicHeight();
        this.icon.setBounds(this.iconLeft, 0, this.iconLeft + width, height);
    }

    TextViewCompat.setCompoundDrawablesRelative(this, this.icon, (Drawable)null, (Drawable)null, (Drawable)null);
}

不过，如果您不使用 app:iconGravity，您可以通过在布局膨胀后手动更改按钮的复合可绘制对象来解决这个问题：

Button b = findViewById(R.id.button);
Drawable d = TextViewCompat.getCompoundDrawablesRelative(b)[0]; // the start drawable
TextViewCompat.setCompoundDrawablesRelative(b, null, null, d, null); // move it to the end

Answer 6

如果您使用app:icon= 并且它位于左侧，则当您制作RTL 布局时，它也会显示来自RTL 的图标。

LTR:

将区域设置更改为RTL 后：

这似乎是正常行为，它会自动完成这项工作。 但是，您最好添加：

implementation 'com.google.android.material:material:1.0.0'

在您的应用程序中build.gradle 依赖项，以便使用最新的MaterialButton，这更适合此目的。

我还从com.google.android.material.button.MaterialButton 阅读了the documentation 关于MaterialButton 的内容，其中提到：

将图标添加到该按钮的start或该按钮的中心，使用 app:icon、app:iconPadding、app:iconTint、app:iconTintMode 和 app:iconGravity 属性。

但不幸的是，没有任何属性可以解决问题。除了具有start - textStart 的app:iconGravity 属性。

解决方案：

只需添加：

android:layoutDirection="rtl"

致您的MaterialButton：

<com.google.android.material.button.MaterialButton
    android:id="@+id/guestLogin"
    style="@style/Widget.MaterialComponents.Button"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/relativeLayout"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="10dp"
    android:layoutDirection="rtl"
    android:text="@string/login_as_guest"
    android:textColor="@color/whiteColor"
    app:icon="@drawable/ic_keyboard_arrow_left_white_24dp" />

---

但是，与此同时，我也 created a pull request 的文档中存在问题。希望他们能改正错字。

将图标添加到此按钮的此按钮的开头或中心

顺便说一句，如果他们在app:iconGravity="" 属性中添加end 会更好。