如何在素材按钮中放置图标位置

Question

我正在使用支持库中的Materialbutton。我希望图标位于文本的右侧吗？我似乎找不到解决方法。 感谢您的帮助

Answer 1

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

LTR：

将区域设置更改为RTL后：

这似乎是 正常行为 ，并且它可以自动完成任务。 但是，最好添加：

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

在您的应用build.gradle依存关系中，以便使用最新的MaterialButton来达到此目的。

我还从MaterialButton读到the documentation关于com.google.android.material.button.MaterialButton的信息，其中提到：

  

使用以下命令将图标添加到此按钮的start 或此按钮的中心   app:icon，app:iconPadding，app:iconTint，app:iconTintMode和   app:iconGravity个属性。

但是不幸的是，没有任何属性可以达到目的。除了app:iconGravity属性具有start-textStart。

解决方案：

只需添加：

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在文档中存在一个或多个问题。希望他们能解决错字。

  

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

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

Answer 2

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

Answer 3

没有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 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

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

/**
 * 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 6

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

<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" />