现在我们开发的项目基本都会用到导航栏或者下面功能列表切换。那我简单了解一下TabLayout。
因为谷歌已经有开源的TabLayout直接用就好了，里面可以设置table 字体颜色属性等等可以根据自己的功能需求定义·
<com.google.android.material.tabs.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="@dimen/x41"
android:layout_gravity="bottom"
android:background="@color/f6"
app:tabBackground="@android:color/transparent"
app:tabGravity="fill"
app:tabIndicatorHeight="0dp"
app:tabMode="fixed"
app:tabRippleColor="@android:color/transparent" />
1、简单使用
CustomScrollViewPager viewPager = findViewById(R.id.viewpager);
List list =new ArrayList<>();
list.add(new MainFragment());
list.add(new GoodsFragment());
list.add(new ShopFragment());
list.add(new UserFragment());
ArrayList titles =new ArrayList<>();
titles.add("主页");
titles.add("商品");
titles.add("购物车");
titles.add("我的");
TabFragment tabFragment =new TabFragment(getSupportFragmentManager(), list,titles);
viewPager.setAdapter(tabFragment);
// 如果需要定义icon tablayout.addTab(tab_Maintab.newTab().setText("我的").setIcon(R.drawable.ic_launcher_background));
//设置跟viewpager 联动
tablayout.setupWithViewPager(viewPager);
//防止fragment页面不显示
viewPager.setOffscreenPageLimit(list.size());
/**
* 标签栏切换适配器
*/
public class TabFragmentextends FragmentPagerAdapter {
private ListfragmentList;
private Listtitles;
public TabFragment(FragmentManager fm, List fragmentList, ArrayList titles) {
super(fm);
this.fragmentList = fragmentList;
this.titles = titles;
}
@Override
public FragmentgetItem(int i) {
return fragmentList.get(i);
}
@Override
public int getCount() {
return fragmentList.size();
}
@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
Log.d("destroyItem", position +"");
super.destroyItem(container, position, object);
}
@Nullable
@Override
public CharSequencegetPageTitle(int position) {
return titles.get(position %titles.size());
}
}
2、比如主题类的app根据接口动态设置icon 、字体颜色,那我们就要自定义table 。
private void initPager() {
CustomScrollViewPager viewPager = findViewById(R.id.viewpager);
List list =new ArrayList<>();
list.add(new MainFragment());
list.add(new GoodsFragment());
list.add(new ShopFragment());
list.add(new UserFragment());
// FragmentPagerAdapter 可以不用setTile 自定义tab已经设置了
TabFragment tabFragment =new TabFragment(getSupportFragmentManager(), list);
viewPager.setAdapter(tabFragment);
tablayout.addOnTabSelectedListener(new TabLayoutListener(viewPager));
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tablayout));
//防止fragment页面不显示
viewPager.setOffscreenPageLimit(list.size());
addTab();
}
//添加tab
private void addTab() {
for (int i =0; i < SystemData.systemSetting.getMenu_nav().size(); i++) {
if (i ==0) {
tablayout.addTab(tablayout.newTab().setCustomView(tab_icon(SystemData.systemSetting.getMenu_nav().get(i).getTitle(), SystemData.systemSetting.getMenu_nav().get(i).getImg_url_hover(), ContextCompat.getColor(this, R.color.tab))), true);
}else {
tablayout.addTab(tablayout.newTab().setCustomView(tab_icon(SystemData.systemSetting.getMenu_nav().get(i).getTitle(), SystemData.systemSetting.getMenu_nav().get(i).getImg_url(), ContextCompat.getColor(this, R.color.black6))), false);
}
}
}
private Viewtab_icon(String str, String imageUrl, int color) {
View tab = LayoutInflater.from(this).inflate(R.layout.main_tab_view, null);
TextView tv = tab.findViewById(R.id.tab_view);
tv.setText(str);
tv.setTextColor(color);
ImageView im = tab.findViewById(R.id.tab_img);
Glide.with(this).load(imageUrl).into(im);
return tab;
}
//tab 监听器
public class TabLayoutListenerextends TabLayout.ViewPagerOnTabSelectedListener {
private ViewPagerviewPager;
public TabLayoutListener(ViewPager viewPager) {
super(viewPager);
this.viewPager = viewPager;
}
@Override
public void onTabSelected(TabLayout.Tab tab) {
viewPager.setCurrentItem(tab.getPosition());
setTab(tab, SystemData.systemSetting.getMenu_nav().get(tab.getPosition()).getImg_url_hover(), R.color.tab);
}
@Override
public void onTabUnselected(TabLayout.Tab tab) {
setTab(tab, SystemData.systemSetting.getMenu_nav().get(tab.getPosition()).getImg_url(), R.color.black6);
}
private void setTab(TabLayout.Tab tab, String url, int colorId) {
if (tab.getCustomView() !=null) {
TextView view = tab.getCustomView().findViewById(R.id.tab_view);
ImageView imageView = tab.getCustomView().findViewById(R.id.tab_img);
Glide.with(App.getContext()).load(url).into(imageView);
view.setTextColor(ContextCompat.getColor(App.getContext(), colorId));
}
}
}
