实现效果
继承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>