一個Adapter輕松實現(xiàn)微信底部導航欄（順便一行代碼完成消息提示）
相信國內(nèi)的很多應(yīng)用都和微信的界面結(jié)構(gòu)很像苞轿，都是一個底部導航欄+ViewPager,或者就是新聞類的頂部導航欄+ViewPager的模式，當然導航欄的實現(xiàn)方式有很多種火惊，比如RadioGroup+RadioButton ，TabLayout(Android 底部導航欄 (底部 Tab) 最佳實踐 這篇文章講了很多方式)寄症，今天主要介紹一個開源庫古徒，只要一個adapter就能完成(設(shè)置默認)。
Github地址
face1.gif
new.gif
1停蕉，引入依賴
compile 'com.yun.ospl:jtabstrip:1.4.1'
2，布局
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context=".MainActivity"/>
<april.yun.JPagerSlidingTabStrip
android:id="@+id/tab_buttom"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="5dp"/>
2钙态，屬性設(shè)置(當然也可以在布局里面設(shè)置相關(guān)屬性)
1, 找控件
ISlidingTabStrip buttomTabStrip = (ISlidingTabStrip) findViewById(R.id.tab_buttom);
2慧起，拿TabStyleDelegate
tabStyleDelegate = buttomTabStrip.getTabStyleDelegate();
3, 用TabStyleDelegate設(shè)置屬性
tabStyleDelegate.setJTabStyle(type)//類型有提供3種，還可以自己實現(xiàn)想要的效果册倒，待會兒詳細介紹
.setShouldExpand(true)//用過的都知道干啥用的
.setFrameColor(Color.parseColor("#45C01A"))//邊框顏色 設(shè)置為透明則不畫邊框
.setTabTextSize(getDimen(R.dimen.tabstrip_textsize))//tab欄的字體大小
//也可以直接傳字符串的顏色蚓挤，第一個顏色表示checked狀態(tài)的顏色第二個表示normal狀態(tài)
.setTextColor(Color.parseColor("#45C01A"),Color.GRAY)
.setDividerColor(Color.parseColor("#45C01A"))//tab之間的分割線 設(shè)置透明不畫
.setDividerPadding(0)//tab之間分割線 的上下pading
.setUnderlineColor(Color.parseColor("#3045C01A"))//底部橫線 透明不畫
.setUnderlineHeight(0)//底部橫線的高度
.setCornerRadio(0)//設(shè)置滾動指示器和邊框的圓角半徑
.setIndicatorColor(Color.parseColor("#7045C01A"))//滾動的指示欄的顏色 透明不畫
//滾動的指示欄的高度 ：高度如果大于0小于tab高的一半則指示欄在底部 小于0則在tab欄的頂部 高度如果大于tab欄高度的一般那么包裹文字
.setIndicatorHeight(-8);
3, 給ViewPager寫個Adapter
public class MyPagerAdapter extends FragmentPagerAdapter implements ISlidingTabStrip.IconTabProvider {
public MyPagerAdapter(FragmentManager fm) {
super(fm);
}
@Override public CharSequence getPageTitle(int position) {
return mTitles[position];//標題
}
//返回的是一個數(shù)組 第一個normal狀態(tài)的icon 第二個checked狀態(tài)下的
@Override public int[] getPageIconResIds(int position) {
//return new int[]{mNormal[position],mChecked[position]};
return null;
}
@Override public int getPageIconResId(int position) {
// return mPressed[position];
return mSelectors[position];
}
@Override public int getCount() {
return mTitles.length;
}
@Override public Fragment getItem(int position) {
return DemoCardFragment.newInstance(position);
}
}
如果要實現(xiàn)微信的底部導航欄的效果那么 adapter需要實現(xiàn)IconTabProvider接口
- 重點3個方法getPageTitle（提供標題文字內(nèi)容），getPageIconResIds（提供標題的icon圖標）驻子，getPageIconResId（提供標題的icon圖標）灿意，
- 后面兩個方法的區(qū)別是：getPageIconResIds只需要兩個數(shù)組，getPageIconResId需要一個數(shù)組+多個selector文件
mTitles = getResources().getStringArray(R.array.tabs);
//for getPageIconResIds
mNormal = new int[] { R.drawable.ic_tab_msg, R.drawable.ic_tab_contact,
R.drawable.ic_tab_moments, R.drawable.ic_tab_profile };
mChecked = new int[] { R.drawable.ic_tab_msg_h, R.drawable.ic_tab_contact_h,
R.drawable.ic_tab_moments_h, R.drawable.ic_tab_profile_h };
//for getPageIconResId (需要selector)
mSelectors = new int[] { R.drawable.tab_msg, R.drawable.tab_contact, R.drawable.tab_moment, R.drawable.tab_profile };
R.drawable.tab_msg 如下：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="@drawable/ic_tab_msg_h"/>
<item android:drawable="@drawable/ic_tab_msg"/>
</selector>
4拴孤，綁定ViewPager
(JPagerSlidingTabStrip) buttomTabStrip.bindViewPager(viewpager);
效果圖：
weichat.png
=============================================
tabStyleDelegate.setJTabStyle 方法詳細介紹
setJTabStyle有兩個重載方法 setJTabStyle(int tabStyle)和setJTabStyle(JTabStyle tabStyle)
setJTabStyle(int tabStyle)提供三種Style脾歧，分別是STYLE_DEFAULT，STYLE_ROUND演熟，STYLE_DOTS-
STYLE_DEFAULT效果
default2.gif -
STYLE_ROUND效果
round.gif -
STYLE_DOTS效果
dots.gif
-
setJTabStyle(JTabStyle tabStyle)自己實現(xiàn)tab欄的效果繪制-
比如這個效果
custom.gif
-
示例代碼：
public class CustomTabStyle extends JTabStyle {
private Path mTrianglePath = new Path();
private int mTrigangleHeight = 10;
public CustomTabStyle(ISlidingTabStrip slidingTabStrip) {
super(slidingTabStrip);
}
@Override
public void onDraw(Canvas canvas, ViewGroup tabsContainer, float currentPositionOffset, int lastCheckedPosition) {
//計算指示欄滾動時左右兩邊的位置 具體實現(xiàn)方式在父類
calcuteIndicatorLinePosition(tabsContainer, currentPositionOffset, lastCheckedPosition);
if (mTabStyleDelegate.getIndicatorColor() != Color.TRANSPARENT) {
// draw indicator line
calcuteIndicatorLinePosition(tabsContainer, currentPositionOffset, lastCheckedPosition);
//draw indicator
calcuteTrianglePath();
canvas.drawPath(mTrianglePath,mIndicatorPaint);
}
}
//計算三角形的path
private void calcuteTrianglePath() {
float tabWidth = mLinePosition.y - mLinePosition.x;
float vertex = mH-mTrigangleHeight;
float tr_left = mLinePosition.x+tabWidth/2-mTrigangleHeight;
float tr_right = mLinePosition.x+tabWidth/2+mTrigangleHeight;
mTrianglePath.reset();
mTrianglePath.moveTo(tr_left, mH);
mTrianglePath.lineTo(mLinePosition.x + tabWidth / 2, vertex);
mTrianglePath.lineTo(tr_right, mH);
mTrianglePath.close();
}
}
setIndicatorHeight（int）和setCornerRadio()
shuxin.png
.setTextColor()設(shè)置tab欄文字顏色
兩個重載方法setTextColor(@Size(value = 2)@ColorInt int... colors)和setTextColor(@Size(value = 2) String... colorStrs)
setTabIconGravity(int tabIconGravity)
設(shè)置icon顯示的位置鞭执，默認Gravity.TOP(微信導航欄效果)也可以設(shè)置下左右和Gravity.NO_GRAVITY（就是background了）
一行代碼完成微信的消息提示
截圖011.png
//index:導航欄種第幾個tab ,msgNum:(0~99 顯示數(shù)字,0 移除消,>99 顯示~)
(JPagerSlidingTabStrip) buttomTabStrip..setPromptNum(index, msgNum);
