一、先看一下效果
底部Tab突出效果.jpg
二、效果分析图
效果分析图.jpg
- 自定义View由三部分组成：两条直线 + 一条圆弧
- 圆弧左边点的距离 = （宽度 - 中间距离） / 2
- 圆弧右边点的距离 = （宽度 - 中间距离） / 2 + 中间距离
- 圆心：cx = 宽度 / 2 、 cy = 高度 + offsetY
- 圆的半径 ： R = cos Q / (中间距离 / 2)
- 夹角和中间距离自定义，可根据实际做小调整
三、自定义属性
线和圆弧的颜色、大小（高度）
中间的距离
-
夹角
<declare-styleable name="OutView"> <!--线的颜色--> <attr name="outViewLineColor" format="color" /> <!--线的高度--> <attr name="outViewLineHeight" format="dimension" /> <!--圆中间的距离--> <attr name="outViewDistance" format="dimension" /> <!--偏移的角度--> <attr name="outViewOffsetAngle" format="float" /> </declare-styleable>
四、编写自定义OutView ，代码不难，关键是上面的分析
/**
* 底部突出来的View
*/
public class OutView extends View {
/**
* 线的高度
*/
public int mLineHeight = 1;
/**
* 线的颜色
*/
private int mLineColor;
/**
* 中间的线宽度
*/
private int mDistance;
/**
* 夹角
*/
private double Q = Math.PI / 4;
/**
* 圆的半径
*/
private float mRadius;
/**
* 圆偏移的距离
*/
private int mOffsetY;
private Paint mPaint;
public OutView(Context context) {
this(context, null);
}
public OutView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public OutView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.OutView);
mLineHeight = (int) array.getDimension(R.styleable.OutView_outViewLineHeight, dip2px(mLineHeight));
mLineColor = array.getColor(R.styleable.OutView_outViewLineColor, Color.parseColor("#dddddd"));
mDistance = (int) array.getDimension(R.styleable.OutView_outViewDistance, dip2px(20));
float angle = array.getFloat(R.styleable.OutView_outViewOffsetAngle, 30);
array.recycle();
// rad(弧度) = deg(角度) * PI / 180
Q = angle * Math.PI / 180;
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(mLineColor);
mPaint.setStrokeWidth(mLineHeight);
}
private float dip2px(int value) {
return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, getResources().getDisplayMetrics()) + 0.5f;
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
// 圆的半径
mRadius = (float) (mDistance / 2 / Math.cos(Q));
// 圆心偏移Y的距离
mOffsetY = (int) (mDistance / 2 * Math.tan(Q));
}
@Override
protected void onDraw(Canvas canvas) {
// 画线
mPaint.setStyle(Paint.Style.FILL);
int y = getHeight() - mLineHeight / 2;
int stopX = (getWidth() - mDistance) / 2;
canvas.drawLine(0, y, stopX, y, mPaint);
// 画圆
mPaint.setStyle(Paint.Style.STROKE);
canvas.drawCircle(getWidth() / 2, getHeight() + mOffsetY, mRadius, mPaint);
// 画线
mPaint.setStyle(Paint.Style.FILL);
canvas.drawLine(stopX + mDistance, y, getWidth(), y, mPaint);
}
}
五、Activity的布局，这个要技巧
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--内容区域-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="50dp"
android:layout_weight="1"
android:background="#45784578">
</FrameLayout>
<!--在这里设置背景色-->
<View
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:background="#66f41410" />
</FrameLayout>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="70dp"
android:layout_gravity="bottom">
<!--自己慢慢调-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight="1"
android:scaleType="center"
android:src="@mipmap/ic_launcher" />
<ImageView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight="1"
android:scaleType="center"
android:src="@mipmap/ic_launcher_round" />
<ImageView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:scaleType="center"
android:src="@mipmap/ic_launcher_round" />
<ImageView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight="1"
android:scaleType="center"
android:src="@mipmap/ic_launcher_round" />
<ImageView
android:layout_width="0dp"
android:layout_height="50dp"
android:layout_gravity="bottom"
android:layout_weight="1"
android:scaleType="center"
android:src="@mipmap/ic_launcher_round" />
</LinearLayout>
<!--这个就是-->
<com.wen.routerdemo.view.OutView
android:layout_width="match_parent"
android:layout_height="20dp"
app:outViewDistance="45dp"
app:outViewLineColor="#ff0000"
app:outViewOffsetAngle="30" />
</FrameLayout>
</FrameLayout>
实际开发要自己去调整，上面的代码仅供参考。
运行的效果就是开始那个效果。
效果是帮朋友写的，刚开始没想好，瞎写。后面画了分析图才搞定。
