android 的TabLayout的使用(TabLayotu選中時改變字型大小)
阿新 • • 發佈:2018-12-16
本文不介紹TabLayout的基本使用方法,只對個性化使用做些說明。現在是凌晨,太困,所以寫的不太詳細,見諒。
並且聯合ViewPager使用的時候
1、不自定義選項卡的佈局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@mipmap/aa_background" android:orientation="vertical"> <android.support.design.widget.TabLayout android:id="@+id/tab_layout" android:layout_width="match_parent" android:layout_height="wrap_content" app:tabBackground="@drawable/tab_bg" app:tabTextAppearance="@style/TextApppearance.Design.Tab.Custom" app:tabMaxWidth="0dp" app:tabGravity="fill" app:tabMode="fixed"> </android.support.design.widget.TabLayout> <ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent"/> </LinearLayout>
<style name="TextApppearance.Design.Tab.Custom" parent="TextAppearance.AppCompat.Button"> <item name="android:textSize">40sp</item> <item name="android:textColor">?android:textColorPrimary</item> <item name="textAllCaps">false</item> </style>
mViewPager = (ViewPager) findViewById(R.id.view_pager);
mViewPager.setAdapter(mSectionsPagerAdapter);
mTabLayout.setupWithViewPager(mViewPager);
監聽:
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { } @Override public void onTabUnselected(TabLayout.Tab tab) { } @Override public void onTabReselected(TabLayout.Tab tab) { } }); }
public class SectionsPagerAdapter extends FragmentPagerAdapter {
private static final String TAG = "SectionsPagerAdapter";
private List<Fragment> fragments = null;
private String[] titles;
public SectionsPagerAdapter(Context context, FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
if (fragments == null) {
throw new RuntimeException("請通過setFragments方法,設定fragment");
}
return fragments.size();
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
Fragment fragment = null;
try {
fragment = (Fragment) super.instantiateItem(container, position);
} catch (Exception e) {
e.printStackTrace();
}
return fragment;
}
public void setFragments(List<Fragment> fragments) {
this.fragments = fragments;
}
public void setTitles(String[] titles) {
this.titles = titles;
}
//tablayout 如果使用自定義的customview那麼就不需要此處
@Override
public CharSequence getPageTitle(int position) {
return this.titles[position];
}
}
這樣,就可以使用了。注意,此種方式下,選項卡字型的大小隻能在app:tabTextAppearance(或者對應的java程式碼中)修改,所以即使你獲取到對應tab下的子元素,也無法改變字型大小。
2、自定義tab的view,這種方式,可以自由的修改字型大小
首先,把pagerAdapter中的如下函式的實現註釋掉
public CharSequence getPageTitle(int position)
自定義一個tab_iterm.xml的layout作為自定義的view
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center">
<TextView
android:id="@+id/tv_tab"
android:text="sss"
android:gravity="center"
android:textSize="@dimen/tab_unselect_size"
android:textColor="@color/white"
android:layout_gravity="center"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
然後,把tab載入到Tablayout裡
for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
//獲取每一個tab物件
TabLayout.Tab tabAt = mTabLayout.getTabAt(i);
//將每一個條目設定我們自定義的檢視
tabAt.setCustomView(R.layout.tab_item);
//預設選中第一個
if (i == 0) {
// 設定第一個tab的TextView是被選擇的樣式
// tabAt.getCustomView().findViewById(R.id.tv_tab).setSelected(true);//第一個tab被選中
//設定選中標籤的文字大小
tabAt.getCustomView().findViewById(R.id.tv_tab)).setTextSize(10);
}
//通過tab物件找到自定義檢視的ID
TextView textView = (TextView) tabAt.getCustomView().findViewById(R.id.tv_tab);
textView.setText(titles[i]);//設定tab上的文字
}
另外,在監聽裡 動態更改文字的大小
mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//獲取textview
TextView tv_tab = (TextView) tab.getCustomView().findViewById(R.id.tv_tab);
tv_tab.setTextSize(16);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
//獲取textview
TextView tv_tab = (TextView) tab.getCustomView().findViewById(R.id.tv_tab);
tv_tab.setTextSize(10);
}
@Override
public void onTabReselected(TabLayout.Tab tab) {
}
});
}
這樣,就可以點選選中時,文字大小變化了。