TabLayout +ViewPager 自定义Tab的UI

Posted 2023-03-24

参考技术A 在使用TabLayout +ViewPager底部按钮时，想要自定义Tab的UI是很麻烦的。
需要在完后TabLayout和ViewPager绑定之后，在TabLayout添加完Tab之后再去遍历tab：

CoordinatorLayout+ViewPager+RecyclerView+自定义TabLayout布局

首先看看效果确定是不是你想要的：

如果效果是你想要的，那就接着往下看吧，我会一一介绍

（1）整体布局：

布局采用CoordinatorLayout+ViewPager+RecyclerView+自定义TabLayout实现，其中CoordinatorLayout为可上下滚动部分，ViewPager作为左右切换部分，tablayout作为标签部分

先给出整体布局的xml代码：

<android.support.design.widget.CoordinatorLayout
    android:layout_below="@+id/rel_home"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <LinearLayout
            android:id="@+id/ll_banner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/dp12"
            android:layout_marginTop="@dimen/dp12"
            android:layout_marginRight="@dimen/dp12"
            app:layout_scrollFlags="scroll">

            <com.bigkoo.convenientbanner.ConvenientBanner
                android:id="@+id/convenient_banner"
                android:layout_width="match_parent"
                android:layout_height="@dimen/dp104"
                app:canLoop="true" />
        </LinearLayout>

        <android.support.design.widget.TabLayout
            android:id="@+id/tablayout"
            android:layout_width="match_parent"
            app:tabMaxWidth="@dimen/dp84"
            android:layout_height="@dimen/dp34"
            style="@style/aliwx_column_third_grade_with_click_style"
            app:tabPaddingEnd="0dp"
            app:tabPaddingStart="@dimen/dp0"
            android:layout_marginBottom="@dimen/dp12"
            android:layout_marginLeft="@dimen/dp12"
            android:layout_marginRight="@dimen/dp12"
            app:tabIndicatorHeight="0dp"
            android:layout_marginTop="@dimen/dp12"
            android:background="@drawable/iv_homefragment_label" />
        <!--</LinearLayout>-->
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_marginLeft="@dimen/dp12"
        android:layout_marginRight="@dimen/dp12"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

布局可见，CoordinatorLayout为滚动部分的整体布局，甚至可看做行为可控制的ScrollView。

AppBarLayout作为悬浮窗口，什么地方要悬浮就在此ViewGroup里面写布局，而需要注意的是标红部分app:layout_scrollFlags="scroll" 其中值有五种，具体差异可在这篇博客中看到：https://www.jianshu.com/p/7caa5f4f49bd

此处的意思是其ChildView跟随滚动事件移除屏幕外或移进。

而 app:layout_behavior="@string/appbar_scrolling_view_behavior"指定了ViewPager的滚动行为

当总体布局写成这样就能基本实现框架了，接下来将各部分关联起来

（2）ViewPager部分

viewpager这里设计的是使用viewpager+fragment+recyclerview的方式是实现。

首先viewpager与tablayout绑定就很简单的一句话：mTablayout.setupWithViewPager(mViewpager);

这样的话。viewpager与tablayout的行为就实现了绑定，具体内容填充后面会介绍到

接着viewpager的部分，首先是viewpager的适配器，此处使用FragmentPagerAdapter：

public class HomeViewPagerAdapter extends FragmentPagerAdapter 
    private List<HomeLabelsEntity.LabelsListBean> mLabelsListBeanList;
    private Context mContext;
    private List<ViewPagerFragment> mViewPagerFragments;
    FragmentManager fM;
    public HomeViewPagerAdapter(Context context,FragmentManager fm, List<HomeLabelsEntity.LabelsListBean> labelsListBeanList) 
        super(fm);
        fM = fm;
        mContext=context;
        mLabelsListBeanList=labelsListBeanList;
        mViewPagerFragments=new ArrayList<>();
    

    @Override
    public Fragment getItem(int position) 
        ViewPagerFragment fragment = new ViewPagerFragment();
        Bundle bundle=new Bundle();
        bundle.putParcelable("data",mLabelsListBeanList.get(position));
        fragment.setArguments(bundle);
        return fragment;
    
    public void notifData( List<HomeLabelsEntity.LabelsListBean> labelsListBeanList)
        mLabelsListBeanList=labelsListBeanList;
        notifyDataSetChanged();
    

    @Override
    public Object instantiateItem(ViewGroup container, int position) 
        ViewPagerFragment fragment = (ViewPagerFragment)super.instantiateItem(container,
                position);
        FragmentTransaction ft =fM.beginTransaction();
        String fragmentTag = fragment.getTag();
        ft.remove(fragment);
        fragment = new ViewPagerFragment();
        Bundle bundle=new Bundle();
        bundle.putParcelable("data",mLabelsListBeanList.get(position));
        fragment.setArguments(bundle);
        ft.add(container.getId(), fragment, fragmentTag);
        ft.attach(fragment);
        ft.commitAllowingStateLoss();
        return fragment;
    



    @Override
    public int getCount() 
        return mLabelsListBeanList==null?0:mLabelsListBeanList.size();
    

    @Override
    public int getItemPosition(Object object) 
        return POSITION_NONE;
    

此处需要注意的就是两个标红方法的重载，getItem当Viewpager创建新界面的时候启用，instantiateItem是当前界面渲染的时候使用，因为我写的效果里面需要切换城市，要刷新Viewpager的状态与数据，所以需要使用到instantiateItem，没有这个需求的，getItem就能够实现。此处使用的是传参方式将数据传递到new出来的fragment。至于fragment部分就拿到数据，展示到recyclerview里面，这里就不做说明了。

（3）自定义tablayout

首先说明如果是纯文字的tablayout只需要在viewpager的adapter中加上

  @Override
    public CharSequence getPageTitle(int position)
        return tabStringList.get(position);
   

tagStringList即为标签文字集合

而如果采用自定义tablayout的话就需要在绑定之后进行布局的渲染：

  //此处设置tablayout的内容
    for (int i = 0; i < mLabelsListBeanLists.size(); i++) 
        TabLayout.Tab tabAt = mHomePageChangeFragmentView.getTabLayout().getTabAt(i);
        View view= LayoutInflater.from(mContext).inflate(R.layout.item_recycler_home,null);
        if (i==mLabelsListBeanLists.size()-1)
            //最后一个不显示箭头
            view.findViewById(R.id.iv_cutline).setVisibility(View.GONE);
        else
            view.findViewById(R.id.iv_cutline).setVisibility(View.VISIBLE);
        
        ((TextView)view.findViewById(R.id.tv_selected)).setText(mLabelsListBeanLists.get(i).getName());
        ((TextView)view.findViewById(R.id.tv_unselect)).setText(mLabelsListBeanLists.get(i).getName());
        if (i==0)
            //第一个默认设置被选中
            view.findViewById(R.id.llyout_selected).setVisibility(View.VISIBLE);
            view.findViewById(R.id.tv_unselect).setVisibility(View.INVISIBLE);
        else
            //其他设置为不选中状态
            view.findViewById(R.id.llyout_selected).setVisibility(View.INVISIBLE);
            view.findViewById(R.id.tv_unselect).setVisibility(View.VISIBLE);
        
        tabAt.setCustomView(view);
    
    mHomePageChangeFragmentView.getTabLayout().addOnTabSelectedListener(this);

如代码所示，在tablayout绑定viewpager后，填充tablayout的布局，并处理事件，处理事件采用监听

@Override
public void onTabSelected(TabLayout.Tab tab) 
    if (tab!=null&&tab.getCustomView()!=null)
        tab.getCustomView().findViewById(R.id.llyout_selected).setVisibility(View.VISIBLE);
        tab.getCustomView().findViewById(R.id.tv_unselect).setVisibility(View.INVISIBLE);
    


@Override
public void onTabUnselected(TabLayout.Tab tab) 
    if (tab!=null&&tab.getCustomView()!=null)
        tab.getCustomView().findViewById(R.id.llyout_selected).setVisibility(View.INVISIBLE);
        tab.getCustomView().findViewById(R.id.tv_unselect).setVisibility(View.VISIBLE);
    


@Override
public void onTabReselected(TabLayout.Tab tab) 

而此处说一说自己踩的坑，首先tablayout的子布局tabitem宽度，并不是根据你设置的宽度进行渲染的，它会在计算的时候进行重新计算，类似于LinearLayout子布局中加android:layout_weight=""的效果，平分tablayout的宽度，想要自行设置宽度的话，在tablyout中设置属性app:tabMaxWidth="@dimen/dp84"即可，然后tabitem自带padding，所以发现自己布局不对的话，设置其属性

app:tabPaddingEnd="0dp"
app:tabPaddingStart="@dimen/dp0"

而想要设置没有下划线则设置，app:tabIndicatorHeight="0dp"，此处不再多做赘述，因为属性有点多，具体的根据想要实现的效果填充即可

 

本篇博客到此结束，感谢观看。

如有不对，请指正。

因为此效果是在项目中， 所以不太好传源码，见谅！