TabLayout 两种使用方式

现在我们开发的项目基本都会用到导航栏或者下面功能列表切换。那我简单了解一下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 =0i <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))

        }

}

}

TabLayout，可以完成TabPageIndicator的效果 引用TabLayout只要在build.gradle中加入compile 'com.android.support:design:22.2.0' 添加一个TabLayout和Viewpager作为上下的布局 Find_tab_Adapter.java 是viewpager的Adapter 采用List来直接加载。

---