如何在 XML Android Studio 中创建镜像矩形形状？答案

【问题标题】：how to create mirror rectangle shape in XML Android Studio?如何在 XML Android Studio 中创建镜像矩形形状？
【发布时间】：2020-04-09 04:31:18
【问题描述】：

我想像这样在 XML 中创建一个矩形：

特点：

晶莹剔透
阴影底部
2个颜色区域

我的解决方案是让两个形状重叠并旋转一个角度，但它不起作用。

有人知道如何解决这个问题吗？谢谢！

【问题讨论】：

标签： android xml android-layout android-xml android-drawable

【解决方案1】：

创建自定义 ImageButton：

import android.annotation.SuppressLint;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.widget.ImageButton;
import androidx.annotation.Nullable;

@SuppressLint("AppCompatCustomView")
public class CustomRectangleView extends ImageButton {

    private Paint drawPaint;
    private Paint drawPaint1;

    public CustomRectangleView(Context context) {
        super(context);
        setUpDraw();
    }

    public CustomRectangleView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        setUpDraw();
    }

    private void setUpDraw() {

        drawPaint = new Paint();
        setUpNewPaintObject(drawPaint, getResources().getColor(R.color.blue_light), 5);

        drawPaint1 = new Paint();
        setUpNewPaintObject(drawPaint1, Color.LTGRAY, 8);
    }

    private void setUpNewPaintObject(Paint paintObject, int color, int stroke) {
        paintObject.setColor(color);
        paintObject.setAntiAlias(true);
        paintObject.setStrokeWidth(stroke);
        paintObject.setStyle(Paint.Style.FILL_AND_STROKE);
        paintObject.setStrokeJoin(Paint.Join.ROUND);
        paintObject.setStrokeCap(Paint.Cap.ROUND);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float RADIUS = 200;
        @SuppressLint("DrawAllocation")
        Path path = new Path();
        path.moveTo(0, 0); // used for first point
        path.lineTo(585, 0);
        path.lineTo(0, 60);

        @SuppressLint("DrawAllocation")
        Path path1 = new Path();
        path1.moveTo(15, 0); // used for first point
        path1.lineTo(585, 0);

        path1.moveTo(15, 150); // used for first point
        path1.lineTo(585, 150);


        canvas.drawPath(path, drawPaint);
        canvas.drawPath(path1, drawPaint1);
    }
}

并将此自定义视图添加到 XML 文件：

    <CustomRectangleView
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:src="@drawable/ic_add_black_24dp"
        android:background="#6388C0">
    </CustomRectangleView>

【讨论】：

【解决方案2】：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- "background shadow" -->
<item>


<shape android:shape="rectangle" >
<solid android:color="#000000" />

<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#cc2b2b" />


<corners android:radius="8dp" />
</shape>
</item>
<!-- over left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />

<corners android:radius="8dp" />
</shape>
</item>
<!-- over right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#00FF0000"
android:centerX="0.9"
android:endColor="#99000000"
android:startColor="#00FF0000" />

<corners android:radius="8dp" />
</shape>
</item>
<!-- over top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />

<corners android:radius="8dp" />
</shape>
</item>
<!-- over bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#00FF0000"
android:centerY="0.9"
android:endColor="#00FF0000"
android:startColor="#99000000"
android:type="linear" />

<corners android:radius="8dp" />
</shape>
</item>
</layer-list>

【讨论】：