书史足自悦，安用勤与劬。这篇文章主要讲述Android 导航条效果实现 TabLayout+ViewPager+Fragment相关的知识，希望能为你提供帮助。
TabLayout一、继承结构

public class TabLayoutextends HorizontalScrollView

java.lang.Object
        ?android.view.View
                ?android.view.ViewGroup
                        ?android.widget.FrameLayout
                                ?android.widget.HorizontalScrollView
                                        ?android.support.design.widget.TabLayout
二、TabLayout的使用1、TabLayout简单使用

• TabLayout来自design兼容包，使用需要添加依赖。android studio 添加依赖如下：

dependencies { ~~~ compile ‘com.android.support:appcompat-v7:23.4.0‘ compile ‘com.android.support:design:24.2.0‘ }

• TabLayout可以水平放置一些tab标签

• 标签的展示通过 TabLayout.Tab的实例来实现，通过 newTab()方法可以创建这些示例，并且可以通过 setText(int)和setIcon(int)方法分别设置标签的文本的图标。 另外，需要通过layout的setTab(Tab)方法把一个标签展示出来。例如：

tabLayout = (TabLayout)findViewById(R.id.tablayout); tabLayout.addTab(tabLayout.newTab().setText("Tab 1")); tabLayout.addTab(tabLayout.newTab().setText("Tab 2")); tabLayout.addTab(tabLayout.newTab().setText("Tab 3"));

效果：

文章图片

• 你需要通过setOnTabSelectedListener(OnTabSelectedListener)方法，来给标签的选择改变设定一个监听器。当选择状态改变的时候，会通知你的监听器。
  
• 你在布局中也可以通过使用TabItem标签给TabLayout设置子标签，例如：
  

< android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content"> < android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="标签" /> < android.support.design.widget.TabItem android:layout_width="wrap_content" android:layout_height="wrap_content" android:icon="@mipmap/ic_launcher" /> < /android.support.design.widget.TabLayout>

效果如下：

文章图片






ViewPager+TabLayout实现导航效果
目标效果一：
文章图片

方法一：如果你将TabLayout与ViewPager一起使用，你可以通过调用setupWithViewPager(ViewPager)方法来绑定绑定两个控件。TabLayout将自动出现在ViewPager的标题位置。
方法如下：
MainActivity.java

package com.noonecode.tablayoutdemo; 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.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity {private TabLayout tabLayout; private ViewPager viewPager; private List< Fragment> list; private MyAdapter adapter; private String[] titles = {"页面1", "页面2", "页面3"}; @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); //页面，数据源 list = new ArrayList< > (); list.add(new Tab1Fragment()); list.add(new Tab2Fragment()); list.add(new Tab3Fragment()); //ViewPager的适配器 adapter = new MyAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); //绑定 tabLayout.setupWithViewPager(viewPager); }class MyAdapter extends FragmentPagerAdapter {public MyAdapter(FragmentManager fm) { super(fm); } @Override public Fragment getItem(int position) { return list.get(position); }@Override public int getCount() { return list.size(); }//重写这个方法，将设置每个Tab的标题 @Override public CharSequence getPageTitle(int position) { return titles[position]; } } }

activity_main.java

< ?xml version="1.0" encoding="utf-8"?> < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.noonecode.tablayoutdemo.MainActivity"> < android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" /> < 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> < /LinearLayout>

方法二：TabLayout也支持当作ViewPager的装饰来使用，通过在布局中直接把它添加到ViewPager的内部（将自动将ViewPager的标题作为TabLayout的Tab）。
如下方式使用：
MainActivity.java

package com.noonecode.tablayoutdemo; 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.ViewPager; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity {private ViewPager viewPager; private List< Fragment> list; private MyAdapter adapter; private String[] titles = {"页面1", "页面2", "页面3"}; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //实例化 viewPager = (ViewPager) findViewById(R.id.viewpager); //页面，数据源 list = new ArrayList< > (); list.add(new Tab1Fragment()); list.add(new Tab2Fragment()); list.add(new Tab3Fragment()); //ViewPager的适配器 adapter = new MyAdapter(getSupportFragmentManager()); viewPager.setAdapter(adapter); }class MyAdapter extends FragmentPagerAdapter {...//重写这个方法，将设置每个Tab的标题 @Override public CharSequence getPageTitle(int position) { return titles[position]; } } }

activity_main.java

< ?xml version="1.0" encoding="utf-8"?> < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.noonecode.tablayoutdemo.MainActivity"> < android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent"> < android.support.design.widget.TabLayout android:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="wrap_content" /> < /android.support.v4.view.ViewPager> < /LinearLayout>

目标效果二
文章图片

实现方法：

//MODE_SCROLLABLE可滑动的展示 //MODE_FIXED固定展示 tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);

其他可定制属性：

XML attributes
android.support.design:tabBackground	Reference to a background to be applied to tabs.
android.support.design:tabContentStart	Position in the Y axis from the starting edge that tabs should be positioned from.
android.support.design:tabGravity	Gravity constant for tabs.
android.support.design:tabIndicatorColor	Color of the indicator used to show the currently selected tab.
android.support.design:tabIndicatorHeight	Height of the indicator used to show the currently selected tab.
android.support.design:tabMaxWidth	The maximum width for tabs.
android.support.design:tabMinWidth	The minimum width for tabs.
android.support.design:tabMode	The behavior mode for the Tabs in this layout Must be one of the following constant values.
android.support.design:tabPadding	The preferred padding along all edges of tabs.
android.support.design:tabPaddingBottom	The preferred padding along the bottom edge of tabs.
android.support.design:tabPaddingEnd	The preferred padding along the end edge of tabs.
android.support.design:tabPaddingStart	The preferred padding along the start edge of tabs.
android.support.design:tabPaddingTop	The preferred padding along the top edge of tabs.
android.support.design:tabSelectedTextColor	The text color to be applied to the currently selected tab.
android.support.design:tabTextAppearance	A reference to a TextAppearance style to be applied to tabs.
android.support.design:tabTextColor	The default text color to be applied to tabs.

Constants
int	GRAVITY_CENTER	Gravity used to lay out the tabs in the center of the TabLayout.
int	GRAVITY_FILL	Gravity used to fill the TabLayout as much as possible.
int	MODE_FIXED	Fixed tabs display all tabs concurrently and are best used with content that benefits from quick pivots between tabs.
int	MODE_SCROLLABLE	Scrollable tabs display a subset of tabs at any given moment, and can contain longer tab labels and a larger number of tabs.

目标效果三：
文章图片



实现方法：
TabLayout默认可以实现图示的效果的，比较简单，这里讲述，如何自定义效果。
可以自定义每个Tab的的布局样式，实现丰富的效果。如下：
tab_custom.xml

< ?xml version="1.0" encoding="utf-8"?> < LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical"> < ImageView android:id="@+id/iv_icon" android:layout_width="30dp" android:layout_height="30dp" /> < TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" /> < /LinearLayout>

activity_main.xml
这里需要把指示条隐藏掉：tabIndicatorHeight="0dp"

< ?xml version="1.0" encoding="utf-8"?> < 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:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.noonecode.tablayoutdemo.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:id="@+id/tablayout" android:layout_width="match_parent" android:layout_height="60dp" app:tabSelectedTextColor="#59D" app:tabTextColor="#999" app:tabIndicatorHeight="0dp" /> < /LinearLayout>

MainActivity.java

package com.noonecode.tablayoutdemo; import android.content.Context; 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.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 java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity {private TabLayout tabLayout; private ViewPager viewPager; private List< Fragment> list; private MyAdapter adapter; private String[] titles = {"主页", "群组", "搜索", "消息", "更多"}; private int images[] = {R.drawable.home_selector, R.drawable.group_selector, R.drawable.square_selector, R.drawable.message_selector, R.drawable.more_selector}; @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); //页面，数据源 list = new ArrayList< > (); list.add(new Tab1Fragment()); list.add(new Tab2Fragment()); list.add(new Tab3Fragment()); list.add(new Tab4Fragment()); list.add(new Tab5Fragment()); //ViewPager的适配器 adapter = new MyAdapter(getSupportFragmentManager(), this); viewPager.setAdapter(adapter); //绑定 tabLayout.setupWithViewPager(viewPager); //设置自定义视图 for (int i = 0; i < tabLayout.getTabCount(); i++) { TabLayout.Tab tab = tabLayout.getTabAt(i); tab.setCustomView(adapter.getTabView(i)); } }class MyAdapter extends FragmentPagerAdapter {private Context context; public MyAdapter(FragmentManager fm, Context context) { super(fm); this.context = context; }@Override public Fragment getItem(int position) { return list.get(position); }@Override public int getCount() { return list.size(); }/** * 自定义方法，提供自定义Tab * * @param position 位置 * @return 返回Tab的View */ public View getTabView(int position) { View v = LayoutInflater.from(context).inflate(R.layout.tab_custom, null); TextView textView = (TextView) v.findViewById(R.id.tv_title); ImageView imageView = (ImageView) v.findViewById(R.id.iv_icon); textView.setText(titles[position]); imageView.setImageResource(images[position]); //添加一行，设置颜色 textView.setTextColor(tabLayout.getTabTextColors()); // return v; } } }

一些资源：
home_selector.xml，其他的类似

< ?xml version="1.0" encoding="utf-8"?> < selector xmlns:android="http://schemas.android.com/apk/res/android"> < item android:drawable="@mipmap/icon_home_sel" android:state_selected="true" /> < item android:drawable="@mipmap/icon_home_nor" /> < /selector>

图片资源：

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片

文章图片









注意

• TabLayout是5.0出来后的design兼容包内的，如要使用，请手动添加依赖。
• 本例使用Android Studio导包只需要添加添加依赖，将自动下载项目。
• 绑定ViewPager之后，将自动将ViewPager的标题作为Tab标签，需要重写适配器的getPageTitle方法给其设置标题。这时，通过addTab添加的Tab将是无效的。
• AppCompatActivity继承自FragmentActivity，小伙伴们继承自FragmentActivity也是一样使用的。
• 如有问题请留言。

（完毕）
导航：
Android 导航条效果实现（一） TabActivity+TabHost
http://blog.csdn.net/qq_33425116/article/details/52573967
Android 导航条效果实现（二） FragmentTabHost
http://blog.csdn.net/qq_33425116/article/details/52575811
Android 导航条效果实现（三） ViewPager+PagerTabStrip
http://blog.csdn.net/qq_33425116/article/details/52577570
Android 导航条效果实现（四） ViewPager+自定义导航条
http://blog.csdn.net/qq_33425116/article/details/52584282
Android 导航条效果实现（五） ActionBar+Fragment
http://blog.csdn.net/qq_33425116/article/details/52587635
【Android 导航条效果实现 TabLayout+ViewPager+Fragment】Android 导航条效果实现（六） TabLayout+ViewPager+Fragment
http://blog.csdn.net/qq_33425116/article/details/52599818

推荐阅读

• 

  如何激活电子医保卡? 如何激活mongodb
• 

  空气炸锅烤橘子温度和时间 空气炸锅烤橘子要多久
• 

  《冰与火之歌》 《权力的游戏》第八季,你觉得最终谁会坐上七国的铁王座？
• 

  ps流线分析图,ps怎么做流线分析箭头
• 

  关于739游戏棋牌的信息
• 

  软件实用性分析报告,中国软件股票分析报告
• 

  功能机|售价249元，诺基亚发布新款功能机，外形方正能扫码
• 

  亚马逊|亚马逊封店潮背后，溃散的实体工厂与芯片炒货客
• 

  新疆最好的葡萄品种是什么品种 中国最好吃的葡萄品种排名
• 

  黄码怎么变绿码需要几次核酸检测
• 

  K3有没有上市? k3为什么停产
• 

  北京生育津贴领取条件及标准2023最新?北京生育津贴怎么计算?
• 

  用Photoshop给穿古装的云浮女孩调些暗青色效果
• 

  中移电子华院是什么 中移电商华院是什么平台，中移电子商务有限公司-华院
• 

  吃海鲜可以喝茶吗
• 

  资生堂哪几款产品值得购买？
• 

  税务季度申报如何网上申报 企业所得税哪里申报，一般纳税人企业所得税
• 

  想创业,有没有好点的冷门项目？
• 

  一日为师，终身为父
• 

  临安房屋出租信息最新 临安房屋出租信息

• Android去掉button阴影
• android studio ndk配置和ndk开发
• Android RecyclerView.Adapter notifyDataSetChanged 不起作用
• Android在Eclipse上的环境配置
• android button 函数调用栈
• Android 手机卫士--是否有密码区分对话框类型
• android拓展之使用bmob后端云来实现短信验证码
• Android中对list的日期元素进行排序
• JavaScript如何使用rest参数（代码示例）