我正在使用支持库中的 Materialbutton。我希望图标位于文本的右侧?我似乎找不到如何做到这一点。任何帮助表示赞赏
6 回答
如果您使用app:icon=
它并且它在左侧,那么当您进行布局时RTL
,它也会显示来自的图标RTL
。
LTR
:
将语言环境更改为RTL
one后:
这似乎是一种正常的行为,它会自动完成这项工作。但是,您最好添加:
implementation 'com.google.android.material:material:1.0.0'
在您的应用程序build.gradle
依赖项中,以便使用最MaterialButton
适合此目的的最新版本。
我还在阅读有关其中提到的 文档:MaterialButton
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" />
但是,与此同时,我还创建了一个 pull request的文档中存在一些问题。希望他们能改正错字。
在此按钮的此按钮的开头或中心添加图标
顺便说一句,如果他们添加属性可能会更好end
。app:iconGravity=""
这样做的唯一布局方法是:
如果您使用的是支持库
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" />
没有公共 APIMaterialButton
允许您将图标放在文本的右侧。此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
尝试添加填充开始和结束。你应该能够用它来定位图标。例如:
<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" />
如果您正在寻找只有一个图标的材料按钮,只需复制这个类并使用它:
/**
* 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"
/>