Tablayout+ViewPager+Fragment实现底部导航条并实现recycleview的嵌套

Tablayout+ViewPager+Fragment实现底部导航条并实现recycleview的嵌套

1、首先是配置第三方库

在app下的build.gradle下加上

	implementation 'com.android.support:recyclerview-v7:28.0.0'
    implementation 'com.android.support:design:28.0.0'

2、编写主要布局文件

对ViewPager和TabLyout想认识更多的朋友建议在菜鸟教程的网站直接搜教程，我这里就不对其介绍，通过Fragment控制ViewPager页面显示的内容

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".activity.MainActivity"
    android:orientation="vertical"
    android:background="@android:color/white">
    
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        ></android.support.v4.view.ViewPager>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabIndicatorColor="@null"
        ></android.support.design.widget.TabLayout>

</LinearLayout>

3、编写TabLayout的布局

这里以外卖底部导航栏为例
这里布局分为两步：
1、图片与文字的放置
2、当文字被点击后的颜色转换
3、图片被点击后的颜色转换
（主要布局）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">
    <ImageView
        android:id="@+id/iv_tabIcon"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/ic_tabmain_sel"
        />
    <TextView
        android:id="@+id/tv_tabTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="主页"
        android:textSize="12sp"
        android:textColor="@color/tabtitlecolor"
        />

</LinearLayout>

《文字选择器》

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:color="@color/orange"/>
    <item
        android:state_selected="false"
        android:color="#BEBEBE" />
</selector>

《图片选择器》
这里只写了其中一个，同样的定义

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:drawable="@drawable/ic_tabme_sel"/>
    <item
        android:drawable="@drawable/ic_tabme"
        android:state_selected="false"/>
</selector>

4、用代码实现TabLayout+ViewPager+Fragment三者的绑定

public class MainActivity extends AppCompatActivity {
@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          ViewPager viewPager = findViewById(R.id.viewPager);
        TabLayout tabLayout = findViewById(R.id.tabLayout);
        
        //新建一个集合存放fragment
        final List<Fragment> fragmentList = new ArrayList<>();
        fragmentList.add(new ShopFragment());
        fragmentList.add(new MeFragment());
        fragmentList.add(new OrderFragment());
        FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int i) {
                return fragmentList.get(i) ;
            }
            @Override
            public int getCount() {
                return fragmentList.size();
            }
        };
        //给viewPage设置适配器，ViewPage和Fragment绑定
        viewPager.setAdapter(adapter);
        
        //Tablayout和viewPage实现绑定
        tabLayout.setupWithViewPager(viewPager);

        String tabTitle[] ={"主页","订单","我的"};
        
        //此处加载的是已经配置好的图片选择器
        int tabIcon[] = {R.drawable.tabmain_selected,R.drawable.taborder,R.drawable.tabme};
        for (int i = 0;i<3;i++){
        
            //加载Tablayout自定义样式
            View view = View.inflate(this,R.layout.tabview,null);
            ImageView iv_tabIcon = view.findViewById(R.id.iv_tabIcon);
            TextView tv_tabTitle = view.findViewById(R.id.tv_tabTitle);
            tv_tabTitle.setText(tabTitle[i]);
            iv_tabIcon.setImageResource(tabIcon[i]);
            
            //将自定义切换页添加到组件中
            tabLayout.getTabAt(i).setCustomView(view);
        }
    }
}

最后是recyclerview的嵌套

主要实现recycleview与fragment的连接
1、另新建布局文件放置recycleview

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.RecyclerView
        android:id="@+id/rv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>
</LinearLayout>

2、实现嵌套

public class ShopFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        //加载自定义布局
        View view = inflater.inflate(R.layout.fragment_shop,container,false);
        return view;
    }

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        //绑定控件
        RecyclerView rv= view.findViewById(R.id.rv);
        //新建线性布局管理器
        rv.setLayoutManager(new LinearLayoutManager(getContext()));
        //新建商家消息列表
        List<Shop> shopList = new ArrayList<>();
        for (int i = 0;i<8;i++){
            Shop shop = new Shop(R.drawable.shop_photo1,"必胜客宅急送","月售50","起步 ￥15","配送费 ￥3","平均60分钟");
            shopList.add(shop);
            Shop shop1 = new Shop(R.drawable.shop_photo2,"鸡公煲","月售45","起步 ￥20","配送费 ￥3","平均时间40分钟");
            shopList.add(shop1);
        }
        //将适配器绑定给控件
        rv.setAdapter(new ShopListAdapter(shopList,view.getContext()));
    }
}

看下实现效果