TabLayout高級-自定義Indicator

一娶牌、問題背景

在我們實(shí)際卡法需求中可能會要修改tablayout下方的indicator的樣式與屬性,比如indicator的長度鹤盒,或者給tablayout加個(gè)背景但是需要indicator滑動的效果国章,然而原生的tablayout卻僅僅提供了tablayout的height即厚度的屬性,自定義化的程度很低芙盘。

二驯用、問題探索

通過查閱源碼,發(fā)現(xiàn)tablayout的下劃線是由其內(nèi)部類SlidingTabStrip實(shí)現(xiàn)何陆,其繼承自LinearLayout布局的viewgroup晨汹。源碼如下

 private class SlidingTabStrip extends LinearLayout {
        private int mSelectedIndicatorHeight;
        private final Paint mSelectedIndicatorPaint;
        int mSelectedPosition = -1;
        float mSelectionOffset;
        private int mLayoutDirection = -1;
        private int mIndicatorLeft = -1;
        private int mIndicatorRight = -1;
        private ValueAnimator mIndicatorAnimator;
        SlidingTabStrip(Context context) {
            super(context);
            setWillNotDraw(false);
            mSelectedIndicatorPaint = new Paint();
        }
        ...
 @Override
 public void draw(Canvas canvas) {
   super.draw(canvas);
   // Thick colored underline below the current selection
   if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
     canvas.drawRect(mIndicatorLeft, getHeight() - 
      mSelectedIndicatorHeight,mIndicatorRight, 
      getHeight(), mSelectedIndicatorPaint);
  }
}

省略部分細(xì)節(jié)代碼,查看其ondraw方法會發(fā)現(xiàn)其繪制過程和三個(gè)變量相關(guān):mSelectedIndicatorHeight贷盲,mIndicatorLeft 和mIndicatorRight 淘这,由于mSelectedIndicatorHeight有提供接口可以改變可忽略,實(shí)際控制其繪制過程的為剩下倆個(gè)變量巩剖。

三铝穷、問題解決方案

正如上述縮分析的,控制SlidingTabStrip的繪制過程的為mIndicatorLeft 和mIndicatorRight 倆個(gè)變量佳魔,這倆個(gè)變量同時(shí)也是控制其位置顯示的變量曙聂,只要獲取到這倆個(gè)變量其實(shí)就可以進(jìn)行我們自定義Indicator的封裝,那么如何獲取這倆個(gè)變量呢鞠鲜?——反射

//自定義drawable
public class IndicatorDrawable extends Drawable{
    View view;
    Paint paint;

    float paddingLeft;
    float paddingTop;

    public IndicatorDrawable(View view) {
        this.view = view;
        paint = new Paint();
        paint.setColor(Color.parseColor("#0f0"));
        float density = view.getResources().getDisplayMetrics().density;
        //這兩個(gè)留白可以根據(jù)需求更改
        paddingLeft = 0 * density;
        paddingTop =  5 * density;
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        //自定義背景
        int mIndicatorLeft = getIntValue("mIndicatorLeft");
        int mIndicatorRight = getIntValue("mIndicatorRight");
        int height = view.getHeight();
        int radius = height / 2;
        if (mIndicatorLeft >= 0 && mIndicatorRight > mIndicatorLeft) {
            //canvas.drawRoundRect(new RectF(mIndicatorLeft + (int)paddingLeft, (int)paddingTop, mIndicatorRight - (int)paddingLeft, height - (int)paddingTop), radius, radius, paint);
            //縮減indicator的寬度    
            canvas.drawRect(mIndicatorLeft+40, height - 4,
                        mIndicatorRight-40, height, paint);
        }
    }

    int getIntValue(String name) {
        try {
            Field f = view.getClass().getDeclaredField(name);
            f.setAccessible(true);
            Object obj = f.get(view);
            return (Integer) obj;
        } catch (Exception e) {
            e.printStackTrace();
        }

        return 0;
    }

    @Override
    public void setAlpha(@IntRange(from = 0, to = 255) int alpha) {

    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.UNKNOWN;
    }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末宁脊,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子贤姆,更是在濱河造成了極大的恐慌榆苞,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,744評論 6 502
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件霞捡,死亡現(xiàn)場離奇詭異坐漏,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)碧信,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,505評論 3 392
  • 文/潘曉璐 我一進(jìn)店門赊琳,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人砰碴,你說我怎么就攤上這事躏筏。” “怎么了呈枉?”我有些...
    開封第一講書人閱讀 163,105評論 0 353
  • 文/不壞的土叔 我叫張陵趁尼,是天一觀的道長檐什。 經(jīng)常有香客問我,道長弱卡,這世上最難降的妖魔是什么乃正? 我笑而不...
    開封第一講書人閱讀 58,242評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮婶博,結(jié)果婚禮上瓮具,老公的妹妹穿的比我還像新娘。我一直安慰自己凡人,他們只是感情好名党,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,269評論 6 389
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挠轴,像睡著了一般传睹。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上岸晦,一...
    開封第一講書人閱讀 51,215評論 1 299
  • 那天欧啤,我揣著相機(jī)與錄音,去河邊找鬼启上。 笑死邢隧,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的冈在。 我是一名探鬼主播倒慧,決...
    沈念sama閱讀 40,096評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼包券!你這毒婦竟也來了纫谅?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,939評論 0 274
  • 序言:老撾萬榮一對情侶失蹤溅固,失蹤者是張志新(化名)和其女友劉穎付秕,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體发魄,經(jīng)...
    沈念sama閱讀 45,354評論 1 311
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡盹牧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,573評論 2 333
  • 正文 我和宋清朗相戀三年俩垃,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了励幼。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,745評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡口柳,死狀恐怖苹粟,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情跃闹,我是刑警寧澤嵌削,帶...
    沈念sama閱讀 35,448評論 5 344
  • 正文 年R本政府宣布毛好,位于F島的核電站,受9級特大地震影響苛秕,放射性物質(zhì)發(fā)生泄漏肌访。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,048評論 3 327
  • 文/蒙蒙 一艇劫、第九天 我趴在偏房一處隱蔽的房頂上張望吼驶。 院中可真熱鬧,春花似錦店煞、人聲如沸蟹演。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,683評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽酒请。三九已至,卻和暖如春鸣个,著一層夾襖步出監(jiān)牢的瞬間羞反,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,838評論 1 269
  • 我被黑心中介騙來泰國打工囤萤, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留苟弛,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,776評論 2 369
  • 正文 我出身青樓阁将,卻偏偏與公主長得像膏秫,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子做盅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,652評論 2 354

推薦閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,085評論 25 707
  • 本篇主要介紹TabLayout在開發(fā)中一些常見的用法,不習(xí)慣簡書代碼風(fēng)格的,也可以在 Android_Note查看...
    Showdy閱讀 48,318評論 8 49
  • by 吳思博 一缤削、實(shí)現(xiàn)思路(如何實(shí)現(xiàn)?) 二吹榴、讀源碼:TabLayout 三亭敢、自定義實(shí)現(xiàn)主要過程 四、該頁面其他一...
    吳小博Toby閱讀 1,543評論 0 4
  • 全腦優(yōu)勢可以 用自己的大腦來理解自己的大腦~ 我們可以從A图筹,B帅刀,C,D來推職業(yè)類型 A腦適合醫(yī)生远剩,律師扣溺,程序員 B...
    快樂的五顆星閱讀 345評論 0 0
  • 今天周六還是去加了一天的班,下周有培訓(xùn)瓜晤,太棒了锥余。 今天還是沒時(shí)間寫文章,就在群里發(fā)了紅包痢掠,樹豐老師提醒說要寫工作總...
    聞舒閱讀 180評論 0 0