如何在 materialbutton 中定位图标位置
How to position icon position in materialbutton
我正在使用支持库中的 Materialbutton。我希望图标位于文本的右侧？我似乎找不到如何去做。
感谢任何帮助
如果您使用 app:icon= 并且它位于左侧，当您进行布局 RTL 时，它也会显示来自 RTL 的图标。
LTR:
将区域设置更改为 RTL 之后:
这似乎是正常行为，它会自动完成这项工作。 但是，您最好添加：
implementation 'com.google.android.material:material:1.0.0'
在您的应用 build.gradle 依赖项中，以便使用最新的 MaterialButton，这更适合此目的。
我也在阅读 the documentation 关于 MaterialButton 来自 com.google.android.material.button.MaterialButton 的文章，其中提到：
Add icons to the start or center of this button of this button using
the app:icon, app:iconPadding, app:iconTint, app:iconTintMode and
app:iconGravity attributes.
但不幸的是，没有任何属性可以解决问题。除了具有 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。希望他们能改正错字。
Add icons to the start or center of this button of this button
顺便说一下，如果他们在 app:iconGravity="" 属性中添加 end 会更好。
没有 MaterialButton 的 public 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
执行此操作的仅布局方法是：
如果您使用的是支持库
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" />
如果您使用的是较新的 material 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" />
您可以使用 app:iconGravity 属性。
使用 app:iconGravity="end" 值。
如果您正在寻找只有图标的 material 按钮，只需复制此 class 并使用它：
/**
* 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"
/>
尝试在开头和结尾添加填充。你应该能够用它来定位图标。例如：
<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" />
我正在使用支持库中的 Materialbutton。我希望图标位于文本的右侧？我似乎找不到如何去做。 感谢任何帮助
如果您使用 app:icon= 并且它位于左侧，当您进行布局 RTL 时，它也会显示来自 RTL 的图标。
LTR:
将区域设置更改为 RTL 之后:
这似乎是正常行为，它会自动完成这项工作。 但是，您最好添加：
implementation 'com.google.android.material:material:1.0.0'
在您的应用 build.gradle 依赖项中，以便使用最新的 MaterialButton，这更适合此目的。
我也在阅读 the documentation 关于 MaterialButton 来自 com.google.android.material.button.MaterialButton 的文章，其中提到：
Add icons to the
startor center of this button of this button using theapp:icon,app:iconPadding,app:iconTint,app:iconTintModeandapp:iconGravityattributes.
但不幸的是，没有任何属性可以解决问题。除了具有 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。希望他们能改正错字。
Add icons to the start or center of this button of this button
顺便说一下，如果他们在 app:iconGravity="" 属性中添加 end 会更好。
没有 MaterialButton 的 public 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
执行此操作的仅布局方法是：
如果您使用的是支持库
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" />
如果您使用的是较新的 material 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" />
您可以使用 app:iconGravity 属性。
使用 app:iconGravity="end" 值。
如果您正在寻找只有图标的 material 按钮，只需复制此 class 并使用它：
/**
* 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"
/>
尝试在开头和结尾添加填充。你应该能够用它来定位图标。例如：
<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" />