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

        }

}

}

开发过程中经常会遇到Tab左右或中间的圆角不一样，如下图所示：

根据上图发现两个Tab圆角不同，且不对称，无法通过设置tabBackground属性来实现不同的圆角，解决方案是采用自定义TabView的方法。具体实现方案如下：

TabLayout属性设置：

tabPadding和padding全部设置为0，由自定义TabView来设置相应的padding，tabIndicatorHeight设置为0，tabSelectedTextColor设置选中Tab文字颜色，tabTextAppearance设置Tab未选中文字颜色。

左边Tab选中背景bg_tab_left_select.xml：

左边Tab未选中背景bg_tab_left_unselect.xml：

右边Tab选中背景bg_tab_right_select.xml：

右边Tab未选中背景bg_tab_right_unselect.xml：

左边Tab背景选择器tab_left_selector.xml：

右边Tab背景选择器tab_right_selector.xml：

左边TabView自定义布局文件：

右边TabView自定义布局文件：

注意：

自定义View的高度要保持与TabLayout高度一致，负责背景填充有问题。

最后代码实现：

---