Tablayout 底部导航的实现 （TabLayout 以及ViewPager联动）

TabLayout底部导航 实现和ViewPager的联动效果：

1，之前联动效果大多是使用RadioButton实现。

新的项目需求中需要实现 viewPager嵌套viewPager的联动效果。

先上图:

因为在第一个Fragment中需要嵌套viewPager。而整个主Activity中也需要ViewPager和TabLayout的联动。

当第一个ViewPager滑动到最后一个位置时，就需要主ViewPager的滑动到第二个位置。即ViewPager的联动滑动。

为了不产生ViewPager的嵌套冲突。因此使用TabLayout和ViewPager联动滑动，以及ViewPager的嵌套联动效果。

2，且看代码：

2.1 项目结构：

主Activity中 使用了Tablayout和ViewPager的联动。
第一个ViewPager中也使用了ViewPager和TabLayout的联动。

以及添加 底部菜单的 选择器。

2.2 activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.hero.zhaoq.viewpagerdemo.MainActivity">

<android.support.v4.view.ViewPager
 android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
 />

<android.support.design.widget.TabLayout
 android:background="#0df"
android:id="@+id/tablayout"
android:layout_width="match_parent"
app:tabMode="fixed"
app:tabIndicatorHeight="0dp"
android:layout_height="60dp"
app:tabBackground="@null"
android:layout_below="@id/viewpager"
 />

</LinearLayout>

2.3 MainActivity.java

package com.hero.zhaoq.viewpagerdemo;

import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.hero.zhaoq.viewpagerdemo.fragments.NewsFragment;
import com.hero.zhaoq.viewpagerdemo.fragments.ArmFragment;
import com.hero.zhaoq.viewpagerdemo.fragments.OthersFragment;
import com.hero.zhaoq.viewpagerdemo.fragments.WomenFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity  {

    private FragmentManager manager;
    private TabLayout tabLayout;

    private List<Fragment> fragments;

    private  ViewPager viewpager;

    private final int[] TAB_TITLES = new int[]{R.string.first,R.string.second,R.string.third,R.string.forth};
    //Tab 图片
    private final int[] TAB_IMGS = new int[]{R.drawable.menu1_selector,R.drawable.menu2_selector,R.drawable.menu3_selector,R.drawable.menu4_selector};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        manager  = getSupportFragmentManager();

        tabLayout = (TabLayout) findViewById(R.id.tablayout);
        viewpager = (ViewPager) findViewById(R.id.viewpager);

        initFragment();

        tabLayout.setupWithViewPager(viewpager);

        initTab(tabLayout,TAB_TITLES,TAB_IMGS);
    }

    //初始化 fragment
    private void initFragment() {
        fragments = new ArrayList<>();

        fragments.add(new NewsFragment());
        fragments.add(new ArmFragment());
        fragments.add(new OthersFragment());
        fragments.add(new WomenFragment());

        viewpager.setAdapter(new FragmentPAdapter(this,
                manager,fragments));
    }

    //设置   底部导航图片数据
    private void initTab(TabLayout tabLayout, int[] tabTitlees, int[] tabImgs) {
        for (int i = 0; i < tabLayout.getTabCount(); i++) {
            View view =  LayoutInflater.from(this).inflate(R.layout.tab_bottom_item_view, null);
            tabLayout.getTabAt(i).setCustomView(view);

            TextView tvTitle = (TextView) tabLayout.getTabAt(i).getCustomView().findViewById(R.id.tv_tab);
            tvTitle.setText(tabTitlees[i]);

            ImageView imgTab = (ImageView) tabLayout.getTabAt(i).getCustomView().findViewById(R.id.img_tab);
            imgTab.setImageDrawable(getResources().getDrawable(tabImgs[i]));
        }
    }
}

一个简单的联动效果就这样实现了。非常简单。

记录一下吧 供大家参考学习。

if 你需要这个：

https://github.com/229457269/ViewPagerTabLayoutDemo

请自行下载。。。不需要的可以忽略。