Randy _ 孤独患者
书接上章： （1）改下指示标的一些属性：例如颜色，宽高，大小写等 （2）自定义导航栏
: 没有看过第一篇，建议先看第一篇：
Android 5.x Material design 之 TabLayout (01)
-----------------------------华丽丽的分割线----------------------
一，改变指示标的特性
01,
- 其实很简单：
- 只需在 style文件中：
<style name="MyTabLayoutStyle" parent="Widget.Design.TabLayout">
<!--tab的最大的宽度-->
<item name="tabMaxWidth">@dimen/design_tab_max_width</item>
<!--tab指示标的颜色-->
<item name="tabIndicatorColor">#69f</item>
<!--tab 指示标的高度-->
<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字体的默认的颜色-->
<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,最后，看看效果咯
-- 发现字体颜色，指示标等，都已经改变咯。。。
1D2C109F-1663-42CA-86A1-604D5AD42D4A.png
二，自定义导航栏
- 有时候，可能，这些并不能满足我们的需要，所以，我们要自定义一些导航栏，来满足我们的需求。我们可以用如下方法来实现我们想要的效果哦~~
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 {
/** * 标题栏 */
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; }
//自定义返回 标题栏的方法
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)， 为了返回对应标题位置的 自定义的标题
03，最后回到我们的MainActivity中，来初始化我们的标题
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);
/**让标题栏和viewpager联动起来*/
tl_sliding.setTabMode(TabLayout.MODE_SCROLLABLE);
tl_sliding.setupWithViewPager(vp_content);
//设置自定义标题
for (int i = 0; i < tl_sliding.getTabCount(); i++) {
//获得到对应位置的Tab
TabLayout.Tab tab = tl_sliding.getTabAt(i);
//设置自定义的标题
tab.setCustomView(adapter.getTabView(i));
}
}
- 上述代码，01)主要通过 getTabCount得到TabLayout中的tab的数目，
02)然后通过方法getTabAt（int pos）获得每个位置上的tab,- 调用 Tab类中的setCustomView();方法来设置每个标题
DE02FA91-1E91-4A0D-AAAE-AE41720A346E.png
