自定義一個不規(guī)則Tab切換控件

自定義一個Tab切換控件

1572925067464.jpg

IrregularTabView繼承View

定義屬性

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

  • leftPath
  • rightPath

Region(區(qū)域夯膀,范圍)

  • leftRegion
  • rightRegion

實現(xiàn)構(gòu)造方法


1572925148371.jpg

初始化方法


1572925446387.jpg

onSizeChanged中繪制leftPath,rigthPath


1572925508584.jpg

根據(jù)XY坐標(biāo)繪制


1572925735341.jpg

畫布設(shè)置


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: 不規(guī)則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); //設(shè)置邊框
        mPathPaint.setStrokeWidth(10);
        mPathPaint.setStrokeJoin(Paint.Join.ROUND); //設(shè)置圓角

        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" />
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末夺欲,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子玩敏,更是在濱河造成了極大的恐慌溶耘,老刑警劉巖谐区,帶你破解...
    沈念sama閱讀 217,826評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件叉瘩,死亡現(xiàn)場離奇詭異竟宋,居然都是意外死亡提完,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,968評論 3 395
  • 文/潘曉璐 我一進(jìn)店門丘侠,熙熙樓的掌柜王于貴愁眉苦臉地迎上來徒欣,“玉大人,你說我怎么就攤上這事蜗字〈蚋危” “怎么了?”我有些...
    開封第一講書人閱讀 164,234評論 0 354
  • 文/不壞的土叔 我叫張陵挪捕,是天一觀的道長粗梭。 經(jīng)常有香客問我,道長级零,這世上最難降的妖魔是什么断医? 我笑而不...
    開封第一講書人閱讀 58,562評論 1 293
  • 正文 為了忘掉前任,我火速辦了婚禮奏纪,結(jié)果婚禮上鉴嗤,老公的妹妹穿的比我還像新娘。我一直安慰自己序调,他們只是感情好醉锅,可當(dāng)我...
    茶點故事閱讀 67,611評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著发绢,像睡著了一般硬耍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上朴摊,一...
    開封第一講書人閱讀 51,482評論 1 302
  • 那天默垄,我揣著相機與錄音,去河邊找鬼甚纲。 笑死口锭,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播鹃操,決...
    沈念sama閱讀 40,271評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼韭寸,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了荆隘?” 一聲冷哼從身側(cè)響起恩伺,我...
    開封第一講書人閱讀 39,166評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎椰拒,沒想到半個月后晶渠,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,608評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡燃观,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,814評論 3 336
  • 正文 我和宋清朗相戀三年褒脯,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片缆毁。...
    茶點故事閱讀 39,926評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡番川,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出脊框,到底是詐尸還是另有隱情颁督,我是刑警寧澤,帶...
    沈念sama閱讀 35,644評論 5 346
  • 正文 年R本政府宣布浇雹,位于F島的核電站沉御,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏箫爷。R本人自食惡果不足惜嚷节,卻給世界環(huán)境...
    茶點故事閱讀 41,249評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望虎锚。 院中可真熱鬧硫痰,春花似錦、人聲如沸窜护。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,866評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽柱徙。三九已至缓屠,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間护侮,已是汗流浹背敌完。 一陣腳步聲響...
    開封第一講書人閱讀 32,991評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留羊初,地道東北人滨溉。 一個月前我還...
    沈念sama閱讀 48,063評論 3 370
  • 正文 我出身青樓什湘,卻偏偏與公主長得像,于是被迫代替她去往敵國和親晦攒。 傳聞我的和親對象是個殘疾皇子闽撤,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,871評論 2 354