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. 夹角

    <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>

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