Question

不显示背景。如果该按钮没有背景，则显示“确定”

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?attr/colorBackgroundFloating"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <Button
        android:id="@+id/button_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_weight="1"
        android:background="@drawable/my_round_button"
        android:onClick="onClick"
        android:text="@string/button_1"
        android:visibility="visible"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

当应用程序按钮没有背景时，按钮看起来像迷宫状

my_round_button

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring">
    <solid android:color="#FFFFFF" />
</shape>

怎么了？按钮应该看起来像戒指

Answer 1

一张图片值一千字

因此，要创建一个环形状：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="80dp"
    android:shape="ring"
    android:thickness="5dp"
    android:useLevel="false">

    <solid android:color="#FFF" />

    <size
        android:width="200dp"
        android:height="200dp" />
</shape>

您可以根据您的UI要求更改innerRadius，thickness，size属性。

Answer 2

问题已成定局。

例如，您可以将形状更改为：

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:innerRadius="15dp"
    android:thickness="10dp"
    android:useLevel="false"
    android:shape="ring"

    >
    <solid android:color="#FFFFFF" />

</shape>

Answer 3

我建议您创建自定义视图，该视图以Circle的形式呈现视图，并根据我们从布局传递的宽度/高度进行渲染。更动态。

我确实喜欢 Son Truong 所建议的答案，但这似乎并不通用，因为我们需要对宽度/高度的大小进行硬编码。

步骤1：在style.xml中创建主题

<declare-styleable name="CircleCompatTextView">
    <attr name="cctv_stroke_width" format="dimension" />
    <attr name="cctv_background_color" format="color" />
    <attr name="cctv_border_color" format="color" />
</declare-styleable>

第2步：。创建自定义视图。

public class CircleCompatTextView extends AppCompatTextView {
    private final Paint paintCircle = new Paint();
    private final Paint paintStroke = new Paint();
    private final Resources resources;
    private int strokeWidth;
    private int bgColor;
    private int borderColor;
    private int cxCy;

    public CircleCompatTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        resources = context.getResources();
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CircleCompatTextView);
        strokeWidth = a.getDimensionPixelSize(R.styleable.CircleCompatTextView_cctv_stroke_width, 1);
        bgColor = a.getColor(R.styleable.CircleCompatTextView_cctv_background_color, resources.getColor(android.R.color.transparent));
        borderColor = a.getColor(R.styleable.CircleCompatTextView_cctv_border_color, resources.getColor(android.R.color.background_dark));
        a.recycle();
        init();
    }

    private void init() {
        paintCircle.setColor(bgColor);
        paintCircle.setFlags(Paint.ANTI_ALIAS_FLAG);
        paintStroke.setColor(borderColor);
        paintStroke.setStyle(Paint.Style.STROKE);
        paintStroke.setStrokeWidth(strokeWidth);
        paintStroke.setFlags(Paint.ANTI_ALIAS_FLAG);
    }


    @Override
    public void draw(Canvas canvas) {
        canvas.drawCircle(cxCy, cxCy, cxCy - strokeWidth / 2, paintStroke);
        canvas.drawCircle(cxCy, cxCy, cxCy - strokeWidth / 2, paintCircle);
        super.draw(canvas);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height = getMeasuredHeight();
        int size = ((height > width) ? height : width);
        cxCy = size / 2;
        setMeasuredDimension(size, size);
    }
}

步骤3：使用自定义视图

<CircleCompatTextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center|center_vertical"
        android:padding="16dp"
        android:textAlignment="center"
        app:cctv_background_color="@android:color/transparent"
        app:cctv_border_color="@android:color/background_dark"
        app:cctv_stroke_width="2dp" />

这是输出

不显示按钮的背景

3 个答案: