Question

我正在寻找像这个预览的按钮：

我尝试用按钮做这个，但我的问题是放边框和图像我使用android：背景，我不能同时放置图像和边框：/

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

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

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

mainButton.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 drawable并将其设置为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();
    }
}

CustomButton的布局：

<?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>

我得到了什么：

自定义按钮与文本和图像

1 个答案: