由于最近要使用TabLayout加载顶部导航栏,但是产品需求是将我们选中的标签变大,上网找了一下,发现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);
}
}
效果就是这样~: