欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android 底部導(dǎo)航控件實(shí)例代碼

 更新時(shí)間：2016年03月21日 15:20:32   作者：周文凱  
這篇文章主要介紹了Android 底部導(dǎo)航控件實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下

一、先給大家展示下最終效果

通過(guò)以上可以看到，圖一是簡(jiǎn)單的使用，圖二、圖三中為結(jié)合ViewPager共同使用，而且都可以隨ViewPager的滑動(dòng)漸變色，不同點(diǎn)是圖二為選中非選中兩張圖片，圖三的選中非選中是一張圖片只是做了顏色變化。

二、 需求

我們希望做可以做成這樣的，可以在xml布局中引入控件并綁定數(shù)據(jù)，在代碼中設(shè)置監(jiān)聽(tīng)回調(diào)，并且配置使用要非常簡(jiǎn)單！

三、需求分析

根據(jù)我們多年做不明確需求項(xiàng)目的經(jīng)驗(yàn)，以上需求還算明確。那么我們可以采用在LinearLayout添加子View控件，這個(gè)子View控件就是我們自定義的每個(gè)tab條目，當(dāng)然對(duì)LinearLayout要設(shè)置權(quán)重。

需求大致明確之后就先設(shè)計(jì)每個(gè)條目的子View控件，這個(gè)子View控件是一個(gè)可以切換狀態(tài)變化的，一張、兩張都可以切換狀態(tài)(參考圖一、圖三)。那么這個(gè)View要可以設(shè)置底部顯示的文字，設(shè)置選中時(shí)顏色、未選中時(shí)顏色、選中時(shí)圖片、未選中時(shí)圖片、文字大小、設(shè)置是否有指示點(diǎn)、設(shè)置指示點(diǎn)大小、設(shè)置指示點(diǎn)圖片等等。

四、Tab條目接口

通過(guò)需求分析，我們可以定義如下的Tab子View操作接口：

仔細(xì)的朋友會(huì)發(fā)現(xiàn)，為什么在接口中沒(méi)有設(shè)置選中圖片以及設(shè)置非選中時(shí)圖片，那是因?yàn)檫@個(gè)屬性不是通用的，在不同的實(shí)現(xiàn)中再去定義。

五、Tab條目實(shí)現(xiàn)

類的繼承關(guān)系及說(shuō)明：

類圖如下所示：

在TabViewBase中主要的方法就是測(cè)量，其他的都是對(duì)接口的簡(jiǎn)單實(shí)現(xiàn)。

@Override 
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
// 得到繪制icon的寬 
int bitmapWidth = Math.min(getMeasuredWidth() - getPaddingLeft() 
- getPaddingRight(), getMeasuredHeight() - getPaddingTop() 
- getPaddingBottom() - mTextBound.height()); 
int left = getMeasuredWidth() / 2 - bitmapWidth / 2; 
int top = (getMeasuredHeight() - mTextBound.height()) / 2 - bitmapWidth / 2; 
// 設(shè)置icon的繪制范圍 
mIconRect = new Rect(left, top, left + bitmapWidth, top + bitmapWidth); 
// 設(shè)置指示點(diǎn)的范圍 
int indicatorRadius = mIndicatorSize / 2; 
int tabRealHeight = bitmapWidth + mTextBound.height(); 
mIndicatorRect = new Rect(left + tabRealHeight* 4/5 - indicatorRadius, top, left+tabRealHeight* 4/5 + indicatorRadius, top + mIndicatorSize); 
}

在以上代碼中可以看到，測(cè)量文字的高度，用控件的高度減去文字的高度和控件的寬度對(duì)比，取較小的為圖片的大小，也就是設(shè)置的圖片要為正方形，否則會(huì)產(chǎn)生變形。

看下普通兩張圖片切換的TabView的繪制：

@Override 
protected void onDraw(Canvas canvas) { 
super.onDraw(canvas); 
setupTargetBitmap(canvas); 
drawIndicator(canvas); 
if(null != mText) { 
drawTargetText(canvas); 
} 
} 
/** 
* 繪制圖標(biāo)圖片 
* @param canvas 
*/ 
private void setupTargetBitmap(Canvas canvas) { 
canvas.drawBitmap(isSelected ? mSelectedIconBitmap : mUnselectedIconBitmap, null, mIconRect, null); 
} 
/** 
* 繪制指示點(diǎn) 
* @param canvas 
*/ 
protected void drawIndicator(Canvas canvas) { 
if(isIndicateDisplay) { 
canvas.drawBitmap(mIndicatorBitmap, null, mIndicatorRect, null); 
} 
} 
/** 
* 繪制文字 
* @param canvas 
*/ 
protected void drawTargetText(Canvas canvas) { 
mTextPaint.setColor(isSelected ? mSelectedColor : mUnselectedColor); 
canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2 
- mTextBound.width() / 2, 
mIconRect.bottom + mTextBound.height(), mTextPaint); 
}

可以看到非常的簡(jiǎn)單，就是繪制圖標(biāo)圖片以及繪制指示點(diǎn)，在繪制圖標(biāo)圖片時(shí)判斷當(dāng)前條目是否在選中狀態(tài)，根據(jù)是否選中來(lái)繪制不同的圖片，在繪制指示點(diǎn)的時(shí)候首先判斷下是否設(shè)置了顯示指示點(diǎn)。如果有底部文字，那么久繪制底部文字。
在ViewPager兩張圖片圖片的時(shí)，我們?cè)侔研Ч麍D拿過(guò)來(lái)觀察下：

這里有兩種模式，即隨著ViewPager的滾動(dòng)圖標(biāo)漸變及普通變化。OK，了解之后我們就能很輕松的來(lái)編寫(xiě)它的繪制了，可以通過(guò)繪制兩張圖片，但是在繪制的時(shí)候控制它的透明度就可以啦，是不是也很簡(jiǎn)單。

@Override 
protected void onDraw(Canvas canvas) { 
super.onDraw(canvas); 
int alpha = (int) Math.ceil((255 * mAlpha)); 
drawSourceBitmap(canvas, alpha); 
drawTargetBitmap(canvas, alpha); 
if(null != mText) { 
drawSourceText(canvas, alpha); 
drawTargetText(canvas, alpha); 
} 
drawIndicator(canvas); 
} 
/** 
* 繪制未選中圖標(biāo) 
* @param canvas 
* @param alpha 
*/ 
private void drawSourceBitmap(Canvas canvas, int alpha) { 
mPaint.setAntiAlias(true); 
mPaint.setDither(true); 
mPaint.setAlpha(255 - alpha); 
canvas.drawBitmap(mUnselectedIconBitmap, null, mIconRect, mPaint); 
} 
/** 
* 繪制選中圖標(biāo) 
* @param canvas 
* @param alpha 
*/ 
private void drawTargetBitmap(Canvas canvas, int alpha) { 
mPaint.setAntiAlias(true); 
mPaint.setDither(true); 
mPaint.setAlpha(alpha); 
canvas.drawBitmap(mSelectedIconBitmap, null, mIconRect, mPaint); 
} 
/** 
* 畫(huà)未選中文字 
* @param canvas 
* @param alpha 
*/ 
private void drawSourceText(Canvas canvas, int alpha) { 
mTextPaint.setTextSize(mTextSize); 
mTextPaint.setColor(mUnselectedColor); 
mTextPaint.setAlpha(255 - alpha); 
canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2 
- mTextBound.width() / 2, 
mIconRect.bottom + mTextBound.height(), mTextPaint); 
} 
/** 
* 畫(huà)選中文字 
* @param canvas 
* @param alpha 
*/ 
private void drawTargetText(Canvas canvas, int alpha) { 
mTextPaint.setColor(mSelectedColor); 
mTextPaint.setAlpha(alpha); 
canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2 
- mTextBound.width() / 2, 
mIconRect.bottom + mTextBound.height(), mTextPaint); 
}

代碼中的mAlpha是ViewPager滾動(dòng)的百分比，然后分別繪制選中以及未選中的圖標(biāo)和文本，但是繪制的時(shí)候設(shè)置的透明度不同，這樣就會(huì)有一個(gè)漸變的效果。

在ViewPager單張圖片圖片的時(shí)，我們?cè)侔研Ч麍D拿過(guò)來(lái)觀察下：

private void setupTargetBitmap(int alpha) { 
mBitmap = Bitmap.createBitmap(getMeasuredWidth(), getMeasuredHeight(), Config.ARGB_8888); 
mCanvas = new Canvas(mBitmap); 
mPaint = new Paint(); 
mPaint.setColor(mSelectedColor); 
mPaint.setAntiAlias(true); 
mPaint.setDither(true); 
mPaint.setAlpha(alpha); 
mCanvas.drawRect(mIconRect, mPaint); 
mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN)); 
mPaint.setAlpha(255); 
mCanvas.drawBitmap(mIconBitmap, null, mIconRect, mPaint); 
} 
private void drawSourceText(Canvas canvas, int alpha) { 
mTextPaint.setTextSize(mTextSize); 
mTextPaint.setColor(mUnselectedColor); 
mTextPaint.setAlpha(255 - alpha); 
canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2 
- mTextBound.width() / 2, 
mIconRect.bottom + mTextBound.height(), mTextPaint); 
} 
private void drawTargetText(Canvas canvas, int alpha) { 
mTextPaint.setColor(mSelectedColor); 
mTextPaint.setAlpha(alpha); 
canvas.drawText(mText, mIconRect.left + mIconRect.width() / 2 
- mTextBound.width() / 2, 
mIconRect.bottom + mTextBound.height(), mTextPaint); 
}

繪制的過(guò)程大致與兩張圖片相同，不同點(diǎn)就是在繪制圖片的時(shí)候Paint設(shè)置 Xfermode，來(lái)控制顏色的漸變。

OK，Tab條目的自定義View搞定之后剩下的就簡(jiǎn)單多了。

六、定義屬性

接下來(lái)就是封裝繼承自LinearLayout的整體控件，先來(lái)定義下屬性。

可以看到tabIcons為單張圖片漸變效果特殊的，tabSelectedIcons和tabUnselectedIcon為兩張圖標(biāo)切換效果特殊的。

七、 控件編寫(xiě)

由于三中樣式有公共的部分，我們進(jìn)行積累抽取。類圖結(jié)構(gòu)如下：

1. 構(gòu)造函數(shù)初始化自定義屬性

在TabIndicatorBase中初始化自定義屬性

private void init(Context context, AttributeSet attrs) { 
setOrientation(LinearLayout.HORIZONTAL); 
setGravity(Gravity.CENTER); 
//Load defaults from resources 
final Resources res = getResources(); 
final int defaultSelectedColor = res.getColor(R.color.default_tab_view_selected_color); 
final int defaultUnselectedColor = res.getColor(R.color.default_tab_view_unselected_color); 
final float defaultTextSize = res.getDimension(R.dimen.default_tab_view_text_size); 
final float defaultTabPadding = res.getDimension(R.dimen.default_tab_view_padding); 
final float defaultIndicatorSize = res.getDimension(R.dimen.default_tab_view_indicator_size); 
// Styleables from XML 
TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TabIndicator); 
// 讀取布局中，各個(gè)tab使用的文字 
if (a.hasValue(R.styleable.TabIndicator_tabLabels)) { 
mLabels = a.getTextArray(R.styleable.TabIndicator_tabLabels); 
} 
mSelectedColor = a.getColor(R.styleable.TabIndicator_tabSelectedColor, defaultSelectedColor); 
mUnselectedColor = a.getColor(R.styleable.TabIndicator_tabUnselectedColor, defaultUnselectedColor); 
mTextSize = (int) a.getDimension(R.styleable.TabIndicator_tabTextSize, defaultTextSize); 
mIndicatorSize = (int) a.getDimension(R.styleable.TabIndicator_TabIndicatorSize, defaultIndicatorSize); 
mTabPadding = (int) a.getDimension(R.styleable.TabIndicator_tabItemPadding, defaultTabPadding); 
handleStyledAttributes(a); 
a.recycle(); 
initView(); 
}

由于有些屬性不是公共的，這里定義handleStyleAttributes(a)的抽象方法，在子類中去實(shí)現(xiàn)。

2. 初始化View

/** 
* 初始化控件 
*/ 
private void initView() { 
LayoutParams params = new LayoutParams(0, LayoutParams.MATCH_PARENT, 1); 
params.gravity = Gravity.CENTER; 
int size = getTabSize(); 
for (int i = 0; i < size; i++) { 
final int index = i; 
T tabItemView = createTabView(); 
tabItemView.setPadding(mTabPadding, mTabPadding, mTabPadding, mTabPadding); 
// 圖標(biāo)及文字 
if(null != mLabels) { 
tabItemView.setText(mLabels[index]); 
tabItemView.setTextSize(mTextSize); 
} 
tabItemView.setSelectedColor(mSelectedColor); 
tabItemView.setUnselectedColor(mUnselectedColor); 
tabItemView.setIndicatorSize(mIndicatorSize); 
setProperties(tabItemView, i); 
this.addView(tabItemView, params); 
tabItemView.setTag(index); // CheckedTextView設(shè)置索引作為tag，以便后續(xù)更改顏色、圖片等 
mCheckedList.add(tabItemView); // 將CheckedTextView添加到list中，便于操作 
tabItemView.setOnClickListener(new OnClickListener() 
@Override 
public void onClick(View v) { 
setTabsDisplay(index); // 設(shè)置底部圖片和文字的顯示 
if (null != mTabListener) { 
mTabListener.onTabSelected(index); // tab項(xiàng)被選中的回調(diào)事件 
} 
} 
}); 
// 初始化 底部菜單選中狀態(tài),默認(rèn)第一個(gè)選中 
if (i == 0) { 
tabItemView.setSelected(true); 
} else { 
tabItemView.setSelected(false); 
} 
} 
}

生成Tab條目以及設(shè)置特殊的屬性都通過(guò)抽象方法的方式交給子類去完成。

/** 
* 生成TabView 
* @return 
*/ 
protected abstract T createTabView(); 
/** 
* 設(shè)置特殊屬性 
* @param t 
*/ 
protected abstract void setProperties(T t, int index);

3. 子類實(shí)現(xiàn)

由于這里都比較簡(jiǎn)單，我們選取其中一個(gè)簡(jiǎn)單的雙圖標(biāo)圖片來(lái)說(shuō)明:

@Override 
protected void handleStyledAttributes(TypedArray a) { 
// 讀取布局中，各個(gè)tab使用的圖標(biāo) 
int selectedIconsResId = a.getResourceId(R.styleable.TabIndicator_tabSelectedIcons, 0); 
TypedArray ta = getContext().getResources().obtainTypedArray(selectedIconsResId); 
int len = ta.length(); 
mSelectedDrawableIds = new int[len]; 
for(int i = 0; i < len; i++) { 
mSelectedDrawableIds[i] = ta.getResourceId(i, 0); 
} 
int unselectedIconsResId = a.getResourceId(R.styleable.TabIndicator_tabUnselectedIcons, 0); 
ta = getContext().getResources().obtainTypedArray(unselectedIconsResId); 
len = ta.length(); 
mUnselectedDrawableIds = new int[len]; 
for(int i = 0; i < len; i++) { 
mUnselectedDrawableIds[i] = ta.getResourceId(i, 0); 
} 
ta.recycle(); 
}

這里讀取了xml中配置的選中及未選中圖標(biāo)

生成TabView

@Override 
protected TabView createTabView() { 
return new TabView(getContext()); 
}

設(shè)置特殊屬性

@Override 
protected void setProperties(TabView tabView, int index) { 
tabView.setSelectedIcon(mSelectedDrawableIds[index]); 
tabView.setUnselectedIcon(mUnselectedDrawableIds[index]); 
}

獲取條目個(gè)數(shù)

@Override 
protected int getTabSize() { 
return mSelectedDrawableIds.length; 
}

八、源碼及示例

給大家提供一個(gè)github的地址： Android-TabIndicator
另外，歡迎 star or f**k me on github!

九、一行引入庫(kù)

如果您的項(xiàng)目使用 Gradle 構(gòu)建, 只需要在您的build.gradle文件添加下面一行到 dependencies :
compile 'com.kevin:tabindicator:1.0.1'

關(guān)于小編給大家分享的Android 底部導(dǎo)航控件實(shí)例代碼就到此結(jié)束了，希望對(duì)大家有所幫助！

相關(guān)文章

最新評(píng)論