自定义一个Tab切换控件

1572925067464.jpg

IrregularTabView继承View

定义属性

Path [https://blog.csdn.net/xiangzhihong8/article/details/78278931]

• leftPath
• rightPath

Region(区域，范围)

• leftRegion
• rightRegion

实现构造方法

1572925148371.jpg

初始化方法

1572925446387.jpg

onSizeChanged中绘制leftPath,rigthPath

1572925508584.jpg

根据XY坐标绘制

1572925735341.jpg

画布设置

image.png

触摸事件

image.png

完整代码

package com.rd.views;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.Region;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * Author: Pengfang
 * Date: 2019-11-04 17:02
 * <p>
 * Description: 不规则tab切换view
 */
public class IrregularTabView extends View {
    /** 0-选择左边 1-选择右边 */
    private int                 selectPos = 0;
    private Path                leftPath;
    private Path                rightPath;
    private Paint               mPathPaint;
    private Paint               mTextPaint;
    private String              textLeft;
    private String              textRight;
    private float               spacing   = 40f / 2;
    private float               textHeight;
    private Region              regionLeft;
    private Region              regionRight;
    private OnTabSelectListener onTabSelectListener;
    private int                 leftSelectBg;
    private int                 rightSelectBg;
    private int                 selectTextColor;
    private int                 unSelectTextColor;
    private int                 unSelectBg;

    public IrregularTabView(Context context) {
        this(context, null);
    }

    public IrregularTabView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public IrregularTabView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.IrregularTabView);
        textLeft = a.getString(R.styleable.IrregularTabView_tabLeftText);
        textRight = a.getString(R.styleable.IrregularTabView_tabRightText);
        leftSelectBg = a.getColor(R.styleable.IrregularTabView_leftSelectBg, getResources().getColor(R.color.text_red));
        rightSelectBg = a.getColor(R.styleable.IrregularTabView_rightSelectBg, getResources().getColor(R.color.text_green));
        selectTextColor = a.getColor(R.styleable.IrregularTabView_selectTextColor, getResources().getColor(R.color.text_white));
        unSelectTextColor = a.getColor(R.styleable.IrregularTabView_unSelectTextColor, getResources().getColor(R.color.text_grey));
        unSelectBg = a.getColor(R.styleable.IrregularTabView_unSelectBg, getResources().getColor(R.color.text_grey));
        a.recycle();

        leftPath = new Path();
        rightPath = new Path();
        regionLeft = new Region();
        regionRight = new Region();
        mPathPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPathPaint.setStyle(Paint.Style.FILL_AND_STROKE); //设置边框
        mPathPaint.setStrokeWidth(10);
        mPathPaint.setStrokeJoin(Paint.Join.ROUND); //设置圆角

        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setTextSize(38);
        mTextPaint.setTextAlign(Paint.Align.CENTER);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        Region totalRegion = new Region(0, 0, w, h);
        float  offset      = (float) Math.abs(((double) getMeasuredHeight() / Math.tan(45)));

        leftPath.moveTo(0, 0);
        leftPath.lineTo(getMeasuredWidth() / 2 + spacing, 0);
        leftPath.lineTo(getMeasuredWidth() / 2 + spacing - offset, getMeasuredHeight());
        leftPath.lineTo(0, getMeasuredHeight());
        leftPath.close();

        rightPath.moveTo(getMeasuredWidth() / 2 - spacing + offset, 0);
        rightPath.lineTo(getMeasuredWidth(), 0);
        rightPath.lineTo(getMeasuredWidth(), getMeasuredHeight());
        rightPath.lineTo(getMeasuredWidth() / 2 - spacing, getMeasuredHeight());
        rightPath.close();

        Paint.FontMetrics metrics = mTextPaint.getFontMetrics();
        textHeight = metrics.descent - metrics.ascent;

        regionLeft.setPath(leftPath, totalRegion);
        regionRight.setPath(rightPath, totalRegion);

        //        Logger.e("HomeTabView", "height/2=" + getMeasuredHeight() / 2 + " || textHeight/2=" + textHeight / 2);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /** 绘制左边 */
        if (selectPos == 0) {
            mPathPaint.setColor(leftSelectBg);
            mTextPaint.setColor(selectTextColor);
        } else {
            mPathPaint.setColor(unSelectBg);
            mTextPaint.setColor(unSelectTextColor);
        }
        canvas.drawPath(leftPath, mPathPaint);
        canvas.drawText(textLeft, getMeasuredWidth() / 4, getMeasuredHeight() / 2 + textHeight / 3, mTextPaint);

        /** 绘制右边背*/
        if (selectPos == 1) {
            mPathPaint.setColor(rightSelectBg);
            mTextPaint.setColor(selectTextColor);
        } else {
            mPathPaint.setColor(unSelectBg);
            mTextPaint.setColor(unSelectTextColor);
        }
        canvas.drawPath(rightPath, mPathPaint);
        canvas.drawText(textRight, getMeasuredWidth() / 2 + getMeasuredWidth() / 4, getMeasuredHeight() / 2 + textHeight / 3, mTextPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (regionLeft.contains(x, y)) {
                    selectPos = 0;
                } else if (regionRight.contains(x, y)) {
                    selectPos = 1;
                }

                if (onTabSelectListener != null) {
                    onTabSelectListener.tabSelect(selectPos);
                }
                break;
        }

        invalidate();
        return super.onTouchEvent(event);
    }

    public void setSelectPos(int selectPos) {
        this.selectPos = selectPos;
        invalidate();
    }

    public void setOnTabSelectListener(OnTabSelectListener onTabSelectListener) {
        this.onTabSelectListener = onTabSelectListener;
    }

    public interface OnTabSelectListener {
        void tabSelect(int pos);
    }
}

attrs

<declare-styleable name="IrregularTabView">
        <attr name="tabLeftText" format="string"/>
        <attr name="tabRightText" format="string"/>
        <attr name="leftSelectBg" format="color"/>
        <attr name="rightSelectBg" format="color"/>
        <attr name="unSelectBg" format="color"/>
        <attr name="unSelectTextColor" format="color"/>
        <attr name="selectTextColor" format="color"/>
    </declare-styleable>

引用

 <com.rd.views.IrregularTabView
     android:id="@+id/transaction_detail_itv"
     android:layout_width="0dp"
     android:layout_height="@dimen/y60"
     android:layout_marginRight="@dimen/x16"
     android:layout_weight="5"
     app:leftSelectBg="@color/up_color"
     app:onTabSelectListener="@{(POS)->viewCtrl.onTabSelect(POS)}"
     app:rightSelectBg="@color/down_color"
     app:tabLeftText="@string/transaction_buy"
     app:tabRightText="@string/transaction_sell"
     app:unSelectBg="@color/bg_grey"
     app:unSelectTextColor="@color/text_grey" />