android - 带有文本和图像的自定义按钮

Question

我正在寻找像这样预览的按钮:

我尝试用按钮来做到这一点，但我的问题是要放置边框和图像，我使用 android:background 并且我不能同时放置图像和边框:/

另一个我不知道的问题是文本的边框(这只是按钮的文本)。

我想知道我是否走错了方向。我看到有按钮图像，但我不确定它是否适合我。有没有办法为按钮添加布局？

<Button
        android:id="@+id/mainButton1"
        style="@style/Widget.AppCompat.Button.ButtonBar.AlertDialog"
        android:layout_width="150"
        android:layout_height="150"
        android:background="@drawable/ic_add_circle_green_500_48dp"
        android:drawable="@drawable/mainButton" <-- or android:drawable="@drawable/image" how for put the both ? -->
        android:text="Text"
         />

ma​​inButton.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient android:startColor="#FFFFFF"
        android:endColor="#00FF00"
        android:angle="270" />
    <corners android:radius="3dp" />
    <stroke android:width="5px" android:color="#000000" />
</shape>

我在 Stackoverflow 上找到了很多答案，但 tutos 的链接已失效......

Answer 1

您可以创建自定义View，其中包含所需的背景和ImageView、TextView。然后将 ClickListener 设置为它。

如果您想要 TextView 后面有背景，您可以使用 SpannableString或者只是创建 XML 可绘制对象并将其设置为 TextView 背景。

这是我所做的:

按钮类:

public class CustomButton extends LinearLayout {

    public CustomButton(Context context) {
        super(context);
        inflateLayout(context);
    }

    public CustomButton(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        inflateLayout(context);
    }

    public CustomButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        inflateLayout(context);
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public CustomButton(Context context, @Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        inflateLayout(context);
    }

    private void inflateLayout(Context context) {
        inflate(context, R.layout.custom_button, this);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        TextView textView = findViewById(R.id.textView);
        makeSpannable(textView);
    }

    private void makeSpannable(TextView textView) {
        Spannable spannable = new SpannableString(textView.getText());
        spannable.setSpan(new BackgroundColorSpan(0xFFFF0021), 0, textView.getText().length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        textView.setText(spannable);
        invalidate();
    }
}

自定义按钮的布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_gravity="center_horizontal"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:orientation="vertical"
    android:background="@drawable/background"
    android:padding="16dp">

    <ImageView
        android:id="@+id/imageView"
        android:layout_height="wrap_content"
        android:layout_width="match_parent"
        android:src="@mipmap/ic_launcher" />

    <TextView
        android:id="@+id/textView"
        android:gravity="center_horizontal"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:layout_width="match_parent"
        android:text="CLICK ME!"
        android:textSize="16dp" />

</LinearLayout>

按钮背景:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF"/>
    <stroke android:width="3dp" android:color="#00FFFF" />
    <corners android:radius="10dp"/>
    <padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" />
</shape>

我有什么: