在片段中绘制多层矩形

Question

在片段中绘制该图像的最佳方式是什么(所有矩形都应该使用屏幕的整个宽度，高度应该以特定的dp度量)？显然需要画矩形，但我不知道如何在下面的灰色大矩形上画白色和黄色的矩形。同样，使用相同的片段java类，而不是创建一个新的，可以实现这一点吗？

@Override
 public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Paint paint = new Paint();
    paint.setColor(Color.parseColor("#868F98"));
    Bitmap bg = Bitmap.createBitmap(480, 800, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bg); 
    canvas.drawRect(0, 0, 200, 200, paint); 
    LinearLayout ll = (LinearLayout) findViewById(R.id.rect);
    ll.setBackgroundDrawable(new BitmapDrawable(bg));   
 }

Answer 1

你可以用这样的东西。您可以使用attrs中的自定义属性调整is。xml和公共方法来设置颜色和内容，使其更具可定制性，但基本思想就在这里。

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;


public class LayerRectangle extends View {


    private int measuredWidth, measuredHeight;
    private Paint mBackgroundPaint, mYellowLinePaint, mWhiteLinePaint;
    private RectF mBackgroundRect, mYellowLineRectF, mWhiteLineRectF;


    public LayerRectangle(Context context) {
        super(context);
        init(context, null, 0);
    }

    public LayerRectangle(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public LayerRectangle(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attributeSet, int defStyle) {

        mBackgroundPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBackgroundPaint.setColor(0xFF3C3C3C);
        mBackgroundPaint.setStyle(Paint.Style.FILL);

        mYellowLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mYellowLinePaint.setColor(0xFFFFFF00);
        mYellowLinePaint.setStyle(Paint.Style.FILL);

        mWhiteLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mWhiteLinePaint.setColor(0xFFFFFFFF);
        mWhiteLinePaint.setStyle(Paint.Style.FILL);
    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        measuredHeight = getDefaultSize(getSuggestedMinimumHeight(), heightMeasureSpec);
        measuredWidth = getDefaultSize(getSuggestedMinimumWidth(), widthMeasureSpec);

        mBackgroundRect = new RectF(0, 0, measuredWidth, measuredHeight);
        mYellowLineRectF = new RectF(0, 0.7f * measuredHeight, measuredWidth, 0.8f * measuredHeight);
        mWhiteLineRectF = new RectF(0, 0.9f * measuredHeight, measuredWidth, measuredHeight);

        setMeasuredDimension(measuredWidth, measuredHeight);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        if (measuredHeight == 0 || measuredWidth == 0)
            return;

        canvas.drawRect(mBackgroundRect, mBackgroundPaint);
        canvas.drawRect(mYellowLineRectF, mYellowLinePaint);
        canvas.drawRect(mWhiteLineRectF, mWhiteLinePaint);
    }
}

布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <replace.me.with.your.package.name.LayerRectangle
        android:layout_width="match_parent"
        android:layout_height="65dp"
        android:layout_centerVertical="true"
        />

</RelativeLayout>

这就是它看起来的样子