Randy _ 孤獨(dú)患者
書接上章： （1）改下指示標(biāo)的一些屬性：例如顏色酣栈，寬高论笔，大小寫等 （2）自定義導(dǎo)航欄
: 沒有看過第一篇赚瘦，建議先看第一篇：
Android 5.x Material design 之 TabLayout (01)
-----------------------------華麗麗的分割線----------------------
一爹谭，改變指示標(biāo)的特性
01,
- 其實(shí)很簡單：
- 只需在 style文件中：
<style name="MyTabLayoutStyle" parent="Widget.Design.TabLayout">
<!--tab的最大的寬度-->
<item name="tabMaxWidth">@dimen/design_tab_max_width</item>
<!--tab指示標(biāo)的顏色-->
<item name="tabIndicatorColor">#69f</item>
<!--tab 指示標(biāo)的高度-->
<item name="tabIndicatorHeight">2dp</item>
<!--tab字體的樣式-->
<item name="tabTextAppearance">@style/MyTabTextStyle</item>
<!--tab 選中時的顏色-->
<item name="tabSelectedTextColor">#69f</item>
</style>
- 上述MyTabTextStyle，也是一個自己定義的樣式隙畜，如下
<style name="MyTabTextStyle" parent="TextAppearance.Design.Tab">
<!--Tab字體的大小-->
<item name="android:textSize">@dimen/design_tab_text_size</item>
<!--Tab字體的默認(rèn)的顏色-->
<item name="android:textColor">#1d000000</item>
<!--Tab字體是否為大寫-->
<item name="textAllCaps">true</item>
</style>
02抖部，在你的布局文件中，引用自定義style就ok了
<android.support.design.widget.TabLayout
android:id="@+id/tl_sliding"
android:layout_width="match_parent"
style="@style/MyTabLayoutStyle"
android:layout_height="wrap_content" />
03,最后议惰，看看效果咯
-- 發(fā)現(xiàn)字體顏色慎颗，指示標(biāo)等，都已經(jīng)改變咯换淆。哗总。。
1D2C109F-1663-42CA-86A1-604D5AD42D4A.png
二倍试，自定義導(dǎo)航欄
- 有時候讯屈，可能，這些并不能滿足我們的需要县习，所以涮母，我們要自定義一些導(dǎo)航欄，來滿足我們的需求躁愿。我們可以用如下方法來實(shí)現(xiàn)我們想要的效果哦~~
01 首先寫我們的自定義tab的布局 layout/tab_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_tab"
android:layout_width="30dp"
android:scaleType="fitXY"
android:layout_height="30dp" />
<TextView
android:id="@+id/tv_tab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center" />
</LinearLayout>
- 布局很賤單叛本，不多說了
02,來到適配器PagerAdapter中
public class PagerAdaper extends FragmentPagerAdapter {
/** * 標(biāo)題欄 */
private static final String[] mTitles = {"tab0", "tab1", "tab2", "tab3", "tab4", "tab5", "tab6"};
private static final int[] mImgIds = {android.R.drawable.ic_delete, android.R.drawable.ic_menu_add, android.R.drawable.ic_menu_agenda, android.R.drawable.ic_dialog_alert, android.R.drawable.ic_lock_lock, android.R.drawable.ic_search_category_default, android.R.drawable.ic_input_get};
private Context mContext;
public PagerAdaper(FragmentManager fm, Context context) {
super(fm);
this.mContext = context;
}
@Override
public Fragment getItem(int position) {
return CommonFragment.newInstance(position);
}
@Override
public int getCount() {
return mTitles.length; }
//自定義返回 標(biāo)題欄的方法
public View getTabView(int position) {
View view = LayoutInflater.from(mContext).inflate(R.layout.tab_layout, null);
ImageView iv_tab = (ImageView) view.findViewById(R.id.iv_tab);
TextView tv_tab = (TextView) view.findViewById(R.id.tv_tab);
iv_tab.setImageResource(mImgIds[position]);
tv_tab.setText(mTitles[position]);
return view;
}
}
- 這個類中，加了一個我們自定義的 方法getTabView(int pos)彤钟， 為了返回對應(yīng)標(biāo)題位置的 自定義的標(biāo)題
03来候，最后回到我們的MainActivity中，來初始化我們的標(biāo)題
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//初始化控件
ViewPager vp_content = (ViewPager) findViewById(R.id.vp_content);
TabLayout tl_sliding = (TabLayout) findViewById(R.id.tl_sliding);
PagerAdaper adapter = new PagerAdaper(getSupportFragmentManager(), this);
vp_content.setAdapter(adapter);
/**讓標(biāo)題欄和viewpager聯(lián)動起來*/
tl_sliding.setTabMode(TabLayout.MODE_SCROLLABLE);
tl_sliding.setupWithViewPager(vp_content);
//設(shè)置自定義標(biāo)題
for (int i = 0; i < tl_sliding.getTabCount(); i++) {
//獲得到對應(yīng)位置的Tab
TabLayout.Tab tab = tl_sliding.getTabAt(i);
//設(shè)置自定義的標(biāo)題
tab.setCustomView(adapter.getTabView(i));
}
}
- 上述代碼逸雹，01)主要通過 getTabCount得到TabLayout中的tab的數(shù)目营搅，
02)然后通過方法getTabAt（int pos）獲得每個位置上的tab,- 調(diào)用 Tab類中的setCustomView();方法來設(shè)置每個標(biāo)題
DE02FA91-1E91-4A0D-AAAE-AE41720A346E.png
