TabLayout 两种使用方式

Posted 2023-03-18

参考技术A 现在我们开发的项目基本都会用到导航栏或者下面功能列表切换。那我简单了解一下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" />

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());

   



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));