TabLayout選中更改標籤字型大小及顏色
阿新 • • 發佈：2018-11-02
由於最近要使用TabLayout載入頂部導航欄，但是產品需求是將我們選中的標籤變大~~馬磊皮，老老實實的不好麼~
，沒辦法，該做還是得做，上網找了一下，發現TabLayout中除了XML中可以設定字型大小之外，其他沒有啥API能更改
，沒辦法，該做還是得做，上網找了一下，發現TabLayout中除了XML中可以設定字型大小之外，其他沒有啥API能更改
字型大小，，
這個是在XML中設定字型大小，但是我們想要的是在程式碼中設定，所以，我在網上查詢資料的時候，發現了可以自定義TabLayout上的標籤，也就是說，可以設定圖片加文字，或者僅文字，接下來就開始粘程式碼：
首先用TabLayout用的依賴：
compile 'com.android.support:design:27.0.1'XML中的程式碼：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.TabLayout android:id="@+id/tab_id" android:layout_width="match_parent" android:layout_height="match_parent" android:isScrollContainer="true" app:tabBackground="@android:color/white" app:tabContentStart="0dp" app:tabGravity="center" app:tabIndicatorHeight="0dp" app:tabMaxWidth="@dimen/dp_200" app:tabMode="scrollable" app:tabSelectedTextColor="@color/color_f9050d" app:tabTextColor="@color/color_FF000000"> </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:layout_below="@id/view_horizontal" android:id="@+id/No_scroll" android:layout_width="match_parent" android:layout_height="match_parent"></android.support.v4.view.ViewPager> </RelativeLayout>
我們自定義標籤的佈局XML：這裡面就寫了一個TextView
<?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"> <TextView android:id="@+id/tv_tab" android:text="sss" android:textColor="@drawable/tab_textattr" android:layout_gravity="center" android:textSize="@dimen/sp_17" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>
這是主方法中的程式碼：
public class ChoiceFragment extends Fragment { @BindView(R.id.tab_id) TabLayout tabId; @BindView(R.id.No_scroll) ViewPager noScroll; Unbinder unbinder; private View view; //新增資料 private List<DataBean> mStrings; //新增Fragment private List<Fragment> mFragments; //設定title和Fragment的介面卡 private TabFragmentAdapter mTabFragmentAdapter; //自定義檢視的全域性變數 private TextView tv_tab; @Nullable @Override public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) { view = inflater.inflate(R.layout.fragment_choice, null); unbinder = ButterKnife.bind(this, view); return view; } @Override public void onActivityCreated(@Nullable Bundle savedInstanceState) { super.onActivityCreated(savedInstanceState); //定義儲存的頂部資料和Fragment mStrings = new ArrayList<>(); mFragments = new ArrayList<>(); //設定初始化資料 initSet(); //設定Fragment initEvent(); //設定點選 initClick(); } /** * 設定tableLayout的點選監聽事件 */ private void initClick() { tabId.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() { @Override public void onTabSelected(TabLayout.Tab tab) { //定義方法，判斷是否選中 updateTabView(tab, true); } @Override public void onTabUnselected(TabLayout.Tab tab) { //定義方法，判斷是否選中 updateTabView(tab, false); } @Override public void onTabReselected(TabLayout.Tab tab) { } }); } /** * 用來改變tabLayout選中後的字型大小及顏色 * @param tab * @param isSelect */ private void updateTabView(TabLayout.Tab tab, boolean isSelect) { //找到自定義檢視的控制元件ID tv_tab = (TextView) tab.getCustomView().findViewById(R.id.tv_tab); if(isSelect) { //設定標籤選中 tv_tab.setSelected(true); //選中後字型變大 tv_tab.setTextSize(TypedValue.COMPLEX_UNIT_PX,ResourcesUtils.getResource().getDimensionPixelSize(R.dimen.sp_28)); }else{ //設定標籤取消選中 tv_tab.setSelected(false); //恢復為預設字型大小 tv_tab.setTextSize(TypedValue.COMPLEX_UNIT_PX,ResourcesUtils.getResource().getDimensionPixelSize(R.dimen.sp_17)); } } /** * 設定頂部標籤資料 */ private void initSet() { //判斷當前集合是否為空 // if(mStrings.size()!=0||!mStrings.isEmpty()){ // mStrings.clear(); // } //新增資料（資料你自己隨便填幾個就行~） mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_recommend), ResourcesUtils.getString(R.string.title_recommend_ztid), ResourcesUtils.getString(R.string.title_social_type))); mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_social), ResourcesUtils.getString(R.string.title_social_ztid), ResourcesUtils.getString(R.string.title_social_type))); mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_video), ResourcesUtils.getString(R.string.title_video_ztid), ResourcesUtils.getString(R.string.title_video_type))); mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_talking), ResourcesUtils.getString(R.string.title_talking_ztid), ResourcesUtils.getString(R.string.title_talking_type))); mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_life), ResourcesUtils.getString(R.string.title_life_ztid), ResourcesUtils.getString(R.string.title_life_type))); mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_story), ResourcesUtils.getString(R.string.title_story_ztid), ResourcesUtils.getString(R.string.title_story_type))); mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_phone), ResourcesUtils.getString(R.string.title_phone_ztid), ResourcesUtils.getString(R.string.title_phone_type))); mStrings.add(new DataBean(ResourcesUtils.getString(R.string.title_rumour), ResourcesUtils.getString(R.string.title_rumour_ztid), ResourcesUtils.getString(R.string.title_rumour_type))); //設定資料 setTitlte(mStrings); } /** * 銷燬頁面 */ @Override public void onDestroyView() { super.onDestroyView(); unbinder.unbind(); } /** * 設定頂部資料 * @param list */ private void setTitlte(List<DataBean> list) { //迴圈結合資料，判斷不同標籤載入不同的佈局 for (int i = 0; i < list.size(); i++) { if (list.get(i).getType().equals("2")) { //載入不同的Fragment DifferentFragment differentFragment = new DifferentFragment(); differentFragment.setDifferentFragment(list.get(i).getZtid()); mFragments.add(differentFragment); } else { //載入相同的Fragment ChildFragment childFragment = new ChildFragment(); childFragment.setChildFragment(list.get(i).getZtid()); mFragments.add(childFragment); } } //例項化介面卡 mTabFragmentAdapter = new TabFragmentAdapter(getFragmentManager()); //設定載入的Fragment集合 mTabFragmentAdapter.setFragments(mFragments); } /** * 設定Viewpager的介面卡 */ private void initEvent() { //設定Viewpager的介面卡 noScroll.setAdapter(mTabFragmentAdapter); tabId.setupWithViewPager(noScroll);//TabLayout繫結ViewPager tabId.setTabsFromPagerAdapter(mTabFragmentAdapter);//TabLayout的標籤從Adapter中獲取 //用來迴圈介面卡中的檢視總數 for (int i = 0; i < mTabFragmentAdapter.getCount(); i++) { //獲取每一個tab物件 TabLayout.Tab tabAt = tabId.getTabAt(i); //將每一個條目設定我們自定義的檢視 tabAt.setCustomView(R.layout.tablayout_item); //預設選中第一個 if (i == 0) { // 設定第一個tab的TextView是被選擇的樣式 tabAt.getCustomView().findViewById(R.id.tv_tab).setSelected(true);//第一個tab被選中 //設定選中標籤的文字大小 ((TextView) tabAt.getCustomView().findViewById(R.id.tv_tab)).setTextSize(TypedValue.COMPLEX_UNIT_PX, ResourcesUtils.getResource().getDimensionPixelSize(R.dimen.sp_28)); } //通過tab物件找到自定義檢視的ID TextView textView = (TextView) tabAt.getCustomView().findViewById(R.id.tv_tab); textView.setText(mStrings.get(i).getTitle());//設定tab上的文字 } } }
這是介面卡的程式碼：
public class TabFragmentAdapter extends FragmentStatePagerAdapter {
private List<Fragment> mBaseFragments;
public TabFragmentAdapter(FragmentManager fm) {
super(fm);
this.mBaseFragments=new ArrayList<>();
}
public void setFragments(List<Fragment> fragments) {
if (fragments != null) {
mBaseFragments.addAll(fragments);
notifyDataSetChanged();
}
}
@Override
public Fragment getItem(int position) {
return mBaseFragments.get(position);
}
@Override
public int getCount() {
return mBaseFragments.size();
}
}我自己的一個工具類，ResoursesUtils:記得寫完再Application中初始化一下，ResoursesUtils.init();
public class ResourcesUtils {
private static Context context;
private ResourcesUtils() {
throw new UnsupportedOperationException("u can't instantiate me...");
}
/**
* 初始化工具類
*
* @param context 上下文
*/
public static void init(Context context) {
ResourcesUtils.context = context.getApplicationContext();
}
/**
* 獲取ApplicationContext
*
* @return ApplicationContext
*/
public static Context getContext() {
if (context != null) return context;
throw new NullPointerException("u should init first");
}
/**
* 得到resources物件
*
* @return
*/
public static Resources getResource() {
return getContext().getResources();
}
/**
* 得到string.xml中的字串
*
* @param resId
* @return
*/
public static String getString(int resId) {
return getResource().getString(resId);
}
}效果就是這樣~：如果此部落格有問題的話，可以私聊我~QQ：2532852918 （看大片哦~）
