TabLayout+Viewpager+Fragment+选中的Tab突出显示

转载请标明出处http://blog.csdn.net/cx1229/article/details/52817375

自古图片留人心，先上两张图。这是你想要的吗

是不是心动了呢，接下来我将一步步带你实现这个功能。

1.准备工作

添加依赖：

在app的bulid.gradle下添加

compile 'com.android.support:appcompat-v7:24.2.1'
compile 'com.android.support:design:24.2.1'

2.添加布局文件

这个简单，中间部分是Viewpager，下面是Tablayout（上面的Toolbar不是本文的重点，无视他~~）

<RelativeLayout
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.dwm.ggw.module.home.HomeActivity">

<android.support.v7.widget.Toolbar
android:id="@+id/tb_title"
android:layout_width="match_parent"
android:layout_height="120px"
android:background="@color/cardview_dark_background"
android:paddingTop="30px">

<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="九吉网"
android:textColor="@color/cardview_light_background"
android:textSize="50px"/>
</android.support.v7.widget.Toolbar>

<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="120px"
android:layout_alignParentBottom="true"
app:tabIndicatorHeight="0dp">
</android.support.design.widget.TabLayout>

<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/tb_title"
android:layout_alignParentStart="true"></android.support.v4.view.ViewPager>
</RelativeLayout>

注意：

是

android.support.design.widget.TabLayout

3.实现切换滑动切换fragment

（1）将你的fragment都添加进一个集合：

List<Fragment> fragmentList = new ArrayList<>();

（2）将fragment、viewpager和tablayout关联起来

HomeFragmentAdapter homeFragmentAdapter = new HomeFragmentAdapter(getSupportFragmentManager(), fragmentList);
mViewPager.setAdapter(homeFragmentAdapter);
mTablelayout.setupWithViewPager(mViewPager);

上面的操作是为viewpager添加一个适配器把fragment关联起来viewpager，再通过setupWithViewPager把tablayout和viewpager关联起来。

那这个HomeFragmentAdapter是什么呢？让我们来一探究竟

public class HomeFragmentAdapter extends FragmentPagerAdapter {

private List<Fragment> mFragmentList;

public HomeFragmentAdapter(FragmentManager fm, List<Fragment> fragmentList) {
super(fm);
mFragmentList = fragmentList;

}

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

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

}

可以很清晰的看出来这是一个继承FragmentPagerAdapter的类，getItem返回的是一个fragment，getCount返回的就是fragment集合的大小，是不是很简单呢？

好了到此为止，功能就已经实现了，但是你会发现，咦？tab怎么全是空白，说好的切换图片效果在哪呢？

别急~~

继续看。

4.填充Tab并实现选选中的Tab突出显示

准备8张图片，四张是普通状态下显示的，另外四张是选中状态下显示的。

mNormalTabImage = new int[]{R.mipmap.home_normal,R.mipmap.search_normal, R.mipmap.map_normal, R.mipmap.user_normal};

mSelectorTabImage = new int[]{R.mipmap.home_selected,R.mipmap.search_selected, R.mipmap.map_selected,R.mipmap.user_selected};

mTabName = new String[]{"首页", "搜索", "附近", "我的"};

（1）设置tab的图标和文字

for (int i = 0; i < mTablelayout.getTabCount(); i++) {
mTablelayout.getTabAt(i).setIcon(mNormalTabImage[i]);
mTablelayout.getTabAt(i).setText(mTabName[i]);
}
//默认第一个图标是选中的
mTablelayout.getTabAt(0).setIcon(mSelectorTabImage[0]);

（2）实现选中的Tab突出显示

mTablelayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) {
//选中时显示的图标
mTablelayout.getTabAt(tab.getPosition())
.setIcon(mSelectorTabImage[tab.getPosition()]);
}

@Override
public void onTabUnselected(TabLayout.Tab tab) {
//未选中时显示的图标
mTablelayout.getTabAt(tab.getPosition())
.setIcon(mNormalTabImage[tab.getPosition()]);
}

@Override
public void onTabReselected(TabLayout.Tab tab) {

}
});

5.去除Tab指示器

到这里所有的功能都实现了，不过你会发现，tab会有一个指示器，显得很累赘又不好看，这时候可以到布局中的tablayout下设置：

app:tabIndicatorHeight="0dp"

将指示器的高度设置为0就可以啦~~