Question

我正在制作自定义布局。如何实现蓝色布局的图示效果？

Answer 1

使用以下代码创建一个类:(添加所需的导入）

public class CurvedBar extends View
{
    Paint visiblePaint;
    Path path;

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

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

    public CurvedBar(Context context)
    {
        super(context);
        init();
    }

    void init()
    {
        visiblePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        visiblePaint.setColor(Color.BLUE); //Set your own color
        visiblePaint.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh)
    {
        super.onSizeChanged(w, h, oldw, oldh);
        path = new Path();
        path.moveTo(w, 0);
        path.lineTo(w, h);
        path.lineTo(0,h);
        path.lineTo(0, 0);
        path.quadTo(w/2, h/2, w, 0); //change the 2nd param to adjust the depth of the curve
        path.close();
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        super.onDraw(canvas);
        canvas.drawPath(path, visiblePaint);
    }
}

然后将其用作布局中的自定义视图：

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

        <your.example.package.CurvedBar
            android:layout_width="match_parent"
            android:layout_alignParentBottom="true"
            android:layout_height="100dp"/>

</RelativeLayout>

结果如下：

您可以在代码中调整曲线的颜色或深度。我已经评论了这些参数的位置。您可以在此视图的顶部布置其他控件。

Android实现了这种布局效果

1 个答案: