如何在Android Studio中绘制自定义二次形以用作图像占位符？

Question

我想制作一个与此形状相似的形状，并将其用作图像占位符。 我已经学习了如何使用制作圆形和矩形

canvas.drawRect(0,0,500,250,paint);

从我在这里所浏览的内容中，我收集到我需要使用本页所示的路径。 但是当我查看先前链接的路径页面时，我不知道从哪里开始。 如何创建此自定义形状，最好匹配屏幕的宽度？ 提前致谢！

到目前为止，这是我的代码，用于创建一个红色矩形，最终我将使用该矩形将图像插入：

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    Paint paint = new Paint();
    paint.setColor(Color.parseColor("#CD5C5C"));
    Bitmap bg = Bitmap.createBitmap(480,800, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bg);
    canvas.drawRect(0,0,500,250,paint);
    RelativeLayout rl = (RelativeLayout)
    findViewById(R.id.activity_main);
    rl.setBackgroundDrawable(new BitmapDrawable(bg));
}

Answer 1

我使用了cheesesquare演示对此进行了测试。

首先，我从三角形的自定义视图开始。

请注意，您必须将一个名为background的颜色添加到colors.xml中，或者-使用您为列表背景配置的颜色。

public class TriangleView extends View {

    private Path mPath = new Path();

    private Paint mPaint = new Paint();


    public TriangleView(Context context) {
        super(context);
    }

    public TriangleView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

    @TargetApi(21)
    public TriangleView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        mPath.reset();
        mPath.moveTo(0,0);
        mPath.lineTo(0, getHeight());
        mPath.lineTo(getWidth(), getHeight());
        mPath.close();

        int backgroundColor = getResources().getColor(R.color.background);

        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(backgroundColor);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawPath(mPath, mPaint);
    }
}

这是我将其用于布局的方法。 三角形覆盖图像的底角。 这只是布局的折叠式工具栏部分：

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp">

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="none">

                <ImageView
                    android:id="@+id/backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop" />

                <com.example.fixme.TriangleView
                    android:layout_width="match_parent"
                    android:layout_height="48dp"
                    android:layout_gravity="bottom"/>

            </FrameLayout>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

        </android.support.design.widget.CollapsingToolbarLayout>

只要您不需要在图像上进行视差滚动，这似乎就可以了。