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/zqHero/ViewPagerTabLayoutDemo

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