周末就要到了，今天項(xiàng)目中遇到這樣一個(gè)Tab，選中tab的背景是個(gè)圓角矩形，方向指向器沒有了，這樣普通的TabLayout不能滿足我的要求，可能會(huì)想到動(dòng)態(tài)的去設(shè)置選中Tab的背景不就可以了，但是那樣的話太生硬了，沒有動(dòng)畫效果，其實(shí)想想也還比較簡單，今天就簡單的說一說這個(gè)YzzTab。效果如下圖：
這里是四個(gè)Tab，一版只顯示3個(gè)，這里假設(shè)有num個(gè)Tab，當(dāng)滑動(dòng)到第3個(gè)時(shí)，這里就需要考慮如何讓TabLayout和指示器一起移動(dòng)呢？
@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (positionOffset>1){ return; } int leftCop = (int) (positionOffset*(getMeasuredWidth()/mMaxLineNum)+position*getMeasuredWidth()/mMaxLineNum); if (leftCop!=leftForTabLayout){ //這里要做判斷是否滑動(dòng),當(dāng)選擇的位置大于TabLayout中顯示的最大數(shù)-1時(shí)，會(huì)向左右滑動(dòng)，指示器也會(huì) //跟這滑動(dòng)，相對(duì)靜止，否則指示器滑動(dòng)，Tab布局不移動(dòng) if (position>=mMaxLineNum-1) { scrollContent += leftCop - leftForTabLayout; scrollTo(scrollContent, 0); //這里要重新layout update(); } leftForTabLayout = leftCop; invalidate(); }} 首先，在ViewPage的監(jiān)聽中，positionOffset有時(shí)候可能大于1，這點(diǎn)需要注意的，當(dāng)兩次left的坐標(biāo)相等 時(shí)，我們就不進(jìn)行繪制了，接下來就是
如何確定left的值了，對(duì)于這點(diǎn)我也想了很久，最后終于得出結(jié)論：
int leftCop = (int) (positionOffset*(getMeasuredWidth()/mMaxLineNum)+position*getMeasuredWidth()/mMaxLineNum);
因?yàn)楫?dāng)positionOffset的值在向右滑動(dòng)80%左右的時(shí)候getCurrentItem（）的值會(huì)發(fā)生變化，這點(diǎn)可以試驗(yàn)一下，所以getCurrentItem（）方法不能用了，只能用參數(shù)position.Layout滑動(dòng)的實(shí)際代碼注釋很詳細(xì)了，我就不再闡述了，可以試試。在布局滑動(dòng)了以后，必須要layout，不然View的屬性不會(huì)變，點(diǎn)擊沒法應(yīng)，但是也可以不更新，動(dòng)態(tài)的告訴用戶點(diǎn)擊的真是Tab，這樣也可以。
private void update() { for (int i = 0; i <mChildCount ; i++) { View v = getChildAt(i); v.setLeft(v.getLeft()+scrollContent); } //必須調(diào)用，不然不會(huì)重新layout requestLayout();}接下來就是繪制了，ViewGroup是默認(rèn)不調(diào)用onDraw（Canvas canvas）方法的，原因很簡單，ViewGroup是個(gè)容器，主要作用是起承載作用，繪畫就交給子View了，但是還是有辦法讓其調(diào)用該方法的，如下：
setWillNotDraw(false);
這就告訴該容器，需要繪制；
接下來就是繪制指向器和選中背景了，一個(gè)圓角矩形和一條線，比較簡單，我就不再詳細(xì)說明了。
@Overrideprotected void onDraw(Canvas canvas) { //left = getMeasuredWidth() / mChildCount * mSelectPosition; super.onDraw(canvas); mPaint.setColor(Color.GREEN); int top = getMeasuredHeight() / 4; int right = leftForTabLayout + getMeasuredWidth() / mMaxLineNum; int bottom = getMeasuredHeight() - getMeasuredHeight() / 4; RectF rectF = new RectF(leftForTabLayout, top, right, bottom); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); canvas.drawRoundRect(rectF, 10, 10, mPaint); mPaint.setColor(Color.RED); mPaint.setStrokeWidth(5); canvas.drawLine(leftForTabLayout,getMeasuredHeight()-5,right,getMeasuredHeight()-5,mPaint);}接下來介紹建與ViewPager建立關(guān)聯(lián)的方法
/** * 于ViewPager建立聯(lián)系,這里必須先要給ViewPager設(shè)置Adapter * * @param viewPager */public void setUpWithViewPager(ViewPager viewPager) { mViewPager = viewPager; mChildCount = viewPager.getAdapter().getCount(); mSelectPosition = viewPager.getCurrentItem(); viewPager.setOnPageChangeListener(this);}初始化的方法
/** * 為Tab添加View */private void init() { setWillNotDraw(false); mPaint = new Paint(); for (int i = 0; i < mChildCount; i++) { final TextView tv = new TextView(getContext()); int w = getMeasuredWidth()/mMaxLineNum; LinearLayout.LayoutParams lp = new LayoutParams(w, ViewGroup.LayoutParams.MATCH_PARENT); tv.setText("tab" + i); tv.setGravity(Gravity.CENTER); tv.setLayoutParams(lp); final int finalI = i; tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (monTabSelecterListener != null){ monTabSelecterListener.selecter(finalI,tv); } } }); addView(tv); }}這里只是很簡單的加了幾個(gè)TextView進(jìn)去，也可以弄個(gè)方法，通過用戶動(dòng)態(tài)添加自己想要的View，都可以實(shí)現(xiàn)的。至于監(jiān)聽的話就很簡單了.上面已經(jīng)寫到了。
YzzTab的代碼
package a6he.android.yzz.com.mytablayout;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Rect;import android.graphics.RectF;import android.support.v4.view.ViewPager;import android.util.AttributeSet;import android.util.Log;import android.view.Gravity;import android.view.View;import android.view.ViewGroup;import android.widget.LinearLayout;import android.widget.Switch;import android.widget.TextView;/** * Created by yzz on 2017/2/24 0024. * <p/> * 實(shí)現(xiàn)背景隨著ViewPager的滑動(dòng)跟著移動(dòng) */public class YzzTab extends LinearLayout implements ViewPager.OnPageChangeListener {private ViewPager mViewPager;private Paint mPaint;//tab的數(shù)量private int mChildCount;//tab選中的位置private int mSelectPosition;//繪制指向器的左頂點(diǎn)private int leftForTabLayout = 0;private int leftForInvidator = 0;private int mMaxLineNum = 3;private int scrollContent = 0;private onTabSelecterListener monTabSelecterListener;public YzzTab(Context context) { super(context);}public YzzTab(Context context, AttributeSet attrs) { super(context, attrs);}public YzzTab(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr);}@Overrideprotected void onFinishInflate() { super.onFinishInflate();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); init();}/** * 于ViewPager建立聯(lián)系,這里必須先要給ViewPager設(shè)置Adapter * * @param viewPager */public void setUpWithViewPager(ViewPager viewPager) { mViewPager = viewPager; mChildCount = viewPager.getAdapter().getCount(); mSelectPosition = viewPager.getCurrentItem(); viewPager.setOnPageChangeListener(this);}/** * 為Tab添加View */private void init() { setWillNotDraw(false); mPaint = new Paint(); for (int i = 0; i < mChildCount; i++) { final TextView tv = new TextView(getContext()); int w = getMeasuredWidth()/mMaxLineNum; LinearLayout.LayoutParams lp = new LayoutParams(w, ViewGroup.LayoutParams.MATCH_PARENT); tv.setText("tab" + i); tv.setGravity(Gravity.CENTER); tv.setLayoutParams(lp); final int finalI = i; tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (monTabSelecterListener != null){ monTabSelecterListener.selecter(finalI,tv); } } }); addView(tv); }}@Overrideprotected void onDraw(Canvas canvas) { //left = getMeasuredWidth() / mChildCount * mSelectPosition; super.onDraw(canvas); mPaint.setColor(Color.GREEN); int top = getMeasuredHeight() / 4; int right = leftForTabLayout + getMeasuredWidth() / mMaxLineNum; int bottom = getMeasuredHeight() - getMeasuredHeight() / 4; RectF rectF = new RectF(leftForTabLayout, top, right, bottom); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); canvas.drawRoundRect(rectF, 10, 10, mPaint); mPaint.setColor(Color.RED); mPaint.setStrokeWidth(5); canvas.drawLine(leftForTabLayout,getMeasuredHeight()-5,right,getMeasuredHeight()-5,mPaint);}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { if (positionOffset>1){ return; } int leftCop = (int) (positionOffset*(getMeasuredWidth()/mMaxLineNum)+position*getMeasuredWidth()/mMaxLineNum); if (leftCop!=leftForTabLayout){ //這里要做判斷是否滑動(dòng),當(dāng)選擇的位置大于TabLayout中顯示的最大數(shù)-1時(shí)，會(huì)向左右滑動(dòng)，指示器也會(huì) //跟這滑動(dòng)，相對(duì)靜止，否則指示器滑動(dòng)，Tab布局不移動(dòng) if (position>=mMaxLineNum-1) { scrollContent += leftCop - leftForTabLayout; scrollTo(scrollContent, 0); //這里要重新layout update(); } leftForTabLayout = leftCop; invalidate(); }}private void update() { for (int i = 0; i <mChildCount ; i++) { View v = getChildAt(i); v.setLeft(v.getLeft()+scrollContent); } requestLayout();}@Overridepublic void onPageSelected(int position) {}@Overridepublic void onPageScrollStateChanged(int state) { switch (state){ }}public void setmMaxLineNum(int mMaxLineNum) { this.mMaxLineNum = mMaxLineNum;}public void setonTabSelecterListener(onTabSelecterListener monTabSelecterListener) { this.monTabSelecterListener = monTabSelecterListener;}interface onTabSelecterListener{ void selecter(int position,View view); }}好啦，就介紹這么多，還有待完善，繼續(xù)封裝，完成更強(qiáng)大的功能。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
