Android 首页TAB突出部分的布局

一、先看一下效果

底部Tab突出效果.jpg

二、效果分析图

效果分析图.jpg

1. 自定义View由三部分组成：两条直线 + 一条圆弧
2. 圆弧左边点的距离 = （宽度 - 中间距离） / 2
3. 圆弧右边点的距离 = （宽度 - 中间距离） / 2 + 中间距离
4. 圆心：cx = 宽度 / 2 、 cy = 高度 + offsetY
5. 圆的半径 ： R = cos Q / (中间距离 / 2)
6. 夹角和中间距离自定义，可根据实际做小调整

三、自定义属性

1. 线和圆弧的颜色、大小（高度）

2. 中间的距离

3. 夹角

四、编写自定义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的布局，这个要技巧

实际开发要自己去调整，上面的代码仅供参考。
运行的效果就是开始那个效果。
效果是帮朋友写的，刚开始没想好，瞎写。后面画了分析图才搞定。