APP市场中大多数新闻App都有导航菜单，导航菜单是一组标签的集合，在新闻客户端中，每个标签标示一个新闻类别，对应下面ViewPager控件的一个分页面，今日头条， 网易新闻等。

本文主要讲的是用：TabLayout+ Fragment + ViewPager  实现  滑动标签栏 效果

先演示下效果：

话不多说，直接开撸：

一、添加依赖

compile 'com.android.support:appcompat-v7:23.4.0'compile'com.android.support:design:23.4.0'compile'com.android.support:recyclerview-v7:23.4.0'compile'com.android.support:cardview-v7:23.4.0'

二、在布局文件中加入Layout

activity_main.xml

android:id="@+id/tab_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="#E0E0E0"app:tabIndicatorColor="@color/colorAccent"

app:tabIndicatorHeight="5dp"

app:tabMode="fixed"

app:tabSelectedTextColor="@color/colorPrimary"

app:tabTextAppearance="@style/TabStyle"/>

android:id="@+id/tab_viewpager"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"android:background="@android:color/white" />

附：几个参数说明下

app:tabMode="scrollable"设置tabMode属性为可以左右滚动，

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

对应的是 app:tabMode="scrollable"   固定的

tabLayout.setTabMode(TabLayout.MODE_FIXED);

android design library提供的TabLayout控件

tabIndicatorColor：菜单下方移动的横线的颜色

tabSelectedTextColor ：菜单被选中之后的颜色

tabTextColor : 菜单正常的颜色

app:tabTextAppearance : 添加样式，这里加了样式主要是为了在文字前面加一个图所用，就是把textAllCaps设置成false

三、Java代码中绑定

package com.jack.apptabview.activity;

import android.support.design.widget.TabLayout;

import android.support.v4.app.Fragment;

import android.support.v4.app.FragmentManager;

import android.support.v4.app.FragmentPagerAdapter;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.Window;

import com.jack.apptabview.R;

import com.jack.apptabview.fragment.TabFragment;public classMainActivity extends AppCompatActivity {private TabLayout tabLayout = null;privateViewPager viewPager;private Fragment[] mFragmentArrays = new Fragment[8];private String[] mTabTitles = new String[8];

@Overrideprotected voidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

supportRequestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

initView();

bindData();

}private voidinitView() {

tabLayout=(TabLayout) findViewById(R.id.tab_layout);

viewPager=(ViewPager) findViewById(R.id.tab_viewpager);

}private voidbindData() {

mTabTitles[0] = "推荐";

mTabTitles[1] = "热点";

mTabTitles[2] = "科技";

mTabTitles[3] = "体育";

mTabTitles[4] = "健康";

mTabTitles[5] = "军事";

mTabTitles[6] = "娱乐";

mTabTitles[7] = "热点";//tabLayout.setTabMode(TabLayout.MODE_FIXED);//固定模式，也就是说 tab顶部不能滚动

tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE); //滚动模式 ,可左右滚动，类 今日头条

mFragmentArrays[0] =TabFragment.newInstance();

mFragmentArrays[1] =TabFragment.newInstance();

mFragmentArrays[2] =TabFragment.newInstance();

mFragmentArrays[3] =TabFragment.newInstance();

mFragmentArrays[4] =TabFragment.newInstance();

mFragmentArrays[5] =TabFragment.newInstance();

mFragmentArrays[6] =TabFragment.newInstance();

mFragmentArrays[7] =TabFragment.newInstance();

PagerAdapter pagerAdapter= newMyViewPagerAdapter(getSupportFragmentManager());

viewPager.setAdapter(pagerAdapter);//将ViewPager和TabLayout绑定

tabLayout.setupWithViewPager(viewPager);

}

finalclassMyViewPagerAdapter extends FragmentPagerAdapter {publicMyViewPagerAdapter(FragmentManager fm) {

super(fm);

}

@Overridepublic Fragment getItem(intposition) {returnmFragmentArrays[position];

}

@Overridepublic intgetCount() {returnmFragmentArrays.length;

}

@Overridepublic CharSequence getPageTitle(intposition) {returnmTabTitles[position];

}

}

}

四、其他实现Fragment等

这里不多说。

五、Talk is cheap. Show me the code

话不多说，代码在这里下载！

如果觉得有帮助，欢迎在 Github 为我 star！

转载请著名出处！谢谢~~