android RecyclerTabLayout+VierPager+Fragment架构,实现多分类导航

一,RecyclerTabLayout简介

      RecyclerTabLayout是使用RecyclerView实现的高效TabLayout库,多标签布局时效率高。

        用例效果图:

        

        

        使用步骤:

        在项目的build.gradle中:

dependencies {
   compile 'com.nshmura:recyclertablayout:1.5.0'
}

    在布局中xml中:

<com.nshmura.recyclertablayout.RecyclerTabLayout
        android:id="@+id/recycler_tab_layout"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        rtl_tabIndicatorColor="?attr/colorAccent"
        rtl_tabIndicatorHeight="2dp"
        rtl_tabBackground="?attr/selectableItemBackground"
        rtl_tabTextAppearance="@android:style/TextAppearance.Small"
        rtl_tabSelectedTextColor="?android:textColorPrimary"
        rtl_tabMinWidth="72dp"
        rtl_tabMaxWidth="264dp"
        rtl_tabPaddingStart="12dp"
        rtl_tabPaddingTop="0dp"
        rtl_tabPaddingEnd="12dp"
        rtl_tabPaddingBottom="0dp"
        rtl_tabPadding="0dp"/>


二,RecyclerTabLayout+VierPager+Fragment联合使用

        xml布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:background="@color/bggray"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <com.nshmura.recyclertablayout.RecyclerTabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        android:layout_height="48dp">
    </com.nshmura.recyclertablayout.RecyclerTabLayout>
<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_marginTop="1dp"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
</LinearLayout>

  分类标签数据:

public class BaseData {
    public static final String[] tabList={"热门","男装","女装","鞋包","手机","电器","食品","百货","服饰","汽车","家装","运动",
            "母婴","水果","内衣","家纺","美妆"};
}

架构关联,关键代码:

public class IndexFragment extends BaseFragment {
        @InjectView(R.id.tab_layout)
        RecyclerTabLayout tabLayout;
        @InjectView(R.id.viewpager)
        ViewPager viewpager;
    private IndexFragmentAdapter adapter;
    private ArrayList<GoodsTypeBean> datas=new ArrayList<>();
    private ArrayList<GoodsListFragment> fragments=new ArrayList<>();


    @Override
    protected int getContentId() {
        return R.layout.index_fragment_layout;
    }

    @Override
    protected void init() {
        super.init();

        initData();
        adapter=new IndexFragmentAdapter(getFragmentManager());
        viewpager.setAdapter(adapter);

        tabLayout.setUpWithViewPager(viewpager);//关联viewpager

    }

    /**
     * 初始化数据
     */
    private void initData(){

        for(int i = 0; i< BaseData.tabList.length; i++){
            Bundle bundle=new Bundle();
            bundle.putString("goodTypeId",i+"");//分类标签id,用户对应每一个分类数据刷新
            GoodsListFragment goodsListFragment=new GoodsListFragment();//每一个不同分类标签下页面fragment,显示分类数据
            goodsListFragment.setArguments(bundle);

            fragments.add(goodsListFragment);
        }
    }

    /**
     * viewpager支持Fragment适配器
     */
    public class IndexFragmentAdapter extends FragmentPagerAdapter{

        public IndexFragmentAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            return fragments.get(position);
        }

        @Override
        public int getCount() {
            return fragments.size();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return BaseData.tabList[position];//分类标签
        }
    }
}

效果图:

猜你喜欢

转载自blog.csdn.net/zuo_er_lyf/article/details/80876241