利用canvas.clipPath創建不規則佈局

實現效果

 

繼承LinearLayout

爲了使控件畫出外邊緣，重寫onMeasure方法，使控件高度稍微高出一塊，此處取5，也可以通過自定義屬性來設置，在onMeasure方法中還有算出較矮子控件高度和較高子控件的高度，高度用於在onDraw中在合適的位置畫出邊界。

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int height = MeasureSpec.getSize(heightMeasureSpec);

        super.onMeasure(widthMeasureSpec, height+5);

        for(int i=0;i<getChildCount();i++){
            View child = getChildAt(i);

            if (i == 0) {
                minHeight = maxHeight = child.getMeasuredHeight();
            }

            if (child.getMeasuredHeight() > maxHeight) {
                maxHeight = child.getMeasuredHeight();
            }

            if (child.getMeasuredHeight() < minHeight) {
                minHeight = child.getMeasuredHeight();
            }
        }
    }

重寫onDraw方法，先用path畫出外邊框，再用clipPath剪裁佈局

 @Override
    public void draw(Canvas canvas) {
        
        Paint paint = new Paint();
        paint.setStrokeWidth(2);
        paint.setStyle(Paint.Style.STROKE);
        paint.setColor(Color.BLACK);

        int padding = getPaddingLeft();

        Path path = new Path();
        path.moveTo(0,maxHeight-minHeight);
        path.lineTo((getWidth()/2)-(maxHeight-minHeight)-padding,maxHeight-minHeight);
        RectF oval = new RectF( (getWidth()/2)-(maxHeight-minHeight)-padding,0,
                (getWidth()/2)+(maxHeight-minHeight)+padding, (maxHeight-minHeight)*2);
        path.addArc(oval,-180,180);
        path.lineTo(getWidth(),maxHeight-minHeight);
        path.lineTo(getWidth(),getHeight());
        path.lineTo(0,getHeight());
        path.lineTo(0,maxHeight-minHeight);

//        canvas.drawPath(path,paint);
        canvas.clipPath(path);
        super.draw(canvas);

    }

使用

<com.example.myaccount.widget.MyBottomWidget
            android:id="@+id/my_bt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_gravity="bottom"
            android:gravity="bottom"
            android:background="@color/white"
            android:padding="5dp">

            <RelativeLayout
                android:id="@+id/rl_detail"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/iv1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_description_black_25dp"
                    android:layout_centerHorizontal="true" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv1"
                    android:text="明細"
                    android:layout_centerHorizontal="true"/>

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/rl_account"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1">

                <ImageView
                    android:id="@+id/iv2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_add_black_50dp"
                    android:layout_centerHorizontal="true"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv2"
                    android:text="記賬"
                    android:layout_centerHorizontal="true"/>

            </RelativeLayout>

            <RelativeLayout
                android:id="@+id/rl_chart"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:id="@+id/iv3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:src="@drawable/ic_equalizer_black_25dp"
                    android:layout_centerHorizontal="true"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/iv3"
                    android:text="圖表"
                    android:layout_centerHorizontal="true"/>

            </RelativeLayout>

        </com.example.myaccount.widget.MyBottomWidget>