google发布了的Android Support Design库中提供了TabLayout

通过TabLayout+ViewPager实现导航栏效果,点击Tab ,ViewPager跟随变化,滑动ViewPager,Tab跟随变化

看效果图:

通过一个Demo来了解TabLayout的简单使用(Android Studio开发),代码中都有注释了 ,很简单

1、build.gradle文件中加入

compile 'com.android.support:design:22.2.0'

2、写Xml文件,注意TabLayout的三个属性

app:tabIndicatorColor="#0f0"                每个tab下方的下划线的颜色
app:tabSelectedTextColor="#00f" 被选中的tab的文本颜色
app:tabTextColor="#f00" 未被选中的tab的文本颜色
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"> <android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#777"
app:tabIndicatorColor="#0f0"
app:tabSelectedTextColor="#00f"
app:tabTextColor="#f00"
/> <android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:background="#cccc"
/> </LinearLayout>

activity_main.xml

3、创建4个fragment

这里只创建一个,其他三个类似

 package com.xqx.com.tablayoutdemo;

 import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; /**
* A simple {@link Fragment} subclass.
*/
public class OneFragment extends Fragment { public OneFragment() {
// Required empty public constructor
} @Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// Inflate the layout for this fragment
return inflater.inflate(R.layout.fragment_one, container, false);
} }

OneFragment

 <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.xqx.com.tablayoutdemo.OneFragment"> <!-- TODO: Update blank fragment layout -->
<TextView android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:text="第一个fragment界面" /> </LinearLayout>

fragment_one

4、创建ViewPager的适配器

 package com.xqx.com.tablayoutdemo;

 import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter; import java.util.List; public class MyAdapter extends FragmentPagerAdapter{ private List<Fragment> fragments; //fragment集合
private List<String> titles; //tab标题集合 public MyAdapter(FragmentManager fm, List<Fragment> fragments, List<String> titles) {
super(fm);
this.fragments = fragments;
this.titles = titles;
} @Override
public Fragment getItem(int position) {
return fragments.get(position);
} @Override
public int getCount() {
int ret = 0;
if (fragments!=null && fragments.size()!=0){
ret = fragments.size();
}
return ret;
} @Override
public CharSequence getPageTitle(int position) {
return titles.get(position);
} }

MyAdapter.java

5、MainActivity.java

 package com.xqx.com.tablayoutdemo;

 import android.support.design.widget.TabLayout;

 import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.os.Bundle; import java.util.ArrayList;
import java.util.List; public class MainActivity extends FragmentActivity { private TabLayout tabLayout;
private ViewPager viewPager; //四个fragment
private OneFragment oneFragment;
private TwoFragment twoFragment;
private ThreeFragment threeFragment;
private FourFragment fourFragment; //适配器
private MyAdapter adapter; private List<Fragment> fragments; //fragment集合
private List<String> titles; //tab标题集合
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); tabLayout = (TabLayout) findViewById(R.id.tablayout);
viewPager = (ViewPager) findViewById(R.id.viewpager); //创建四个Fragment对象
oneFragment = new OneFragment();
twoFragment = new TwoFragment();
threeFragment = new ThreeFragment();
fourFragment = new FourFragment(); //将四个Fragment对象添加到集合中
fragments = new ArrayList<>();
fragments.add(oneFragment);
fragments.add(twoFragment);
fragments.add(threeFragment);
fragments.add(fourFragment); //给Tab添加标题
titles = new ArrayList<>();
titles.add("one");
titles.add("two");
titles.add("three");
titles.add("four"); //创建适配器
adapter = new MyAdapter(getSupportFragmentManager(),fragments,titles);
//viewpager绑定适配器
viewPager.setAdapter(adapter);
//tabLayout绑定viewpager
tabLayout.setupWithViewPager(viewPager); } }

MainActivity.java

-------------------------------------------------------------------------------------------------

其他相关:

浅谈FloatingActionButton(悬浮按钮)

浅谈DrawerLayout(抽屉效果)

浅谈GridLayout(网格布局)

浅谈RecyclerView(完美替代ListView,GridView)

浅谈TabLayout(ViewPager+Tab联动)的更多相关文章

  1. 浅谈RecyclerView(完美替代ListView,GridView)

    Android RecyclerView 是Android5.0推出来的,导入support-v7包即可使用. 个人体验来说,RecyclerView绝对是一款功能强大的控件. 首先总结下Recycl ...

  2. 浅谈FloatingActionButton(悬浮按钮)

    一.介绍 这个类是继承自ImageView的,所以对于这个控件我们可以使用ImageView的所有属性 android.support.design.widget.FloatingActionButt ...

  3. 使用FragmentTabHost+TabLayout+ViewPager实现双层嵌套Tab

    大多数应用程序都会在底部使用3~5个Tab对应用程序的主要功能进行划分,对于一些信息量非常大的应用程序,还需要在每个Tab下继续划分子Tab对信息进行分类显示. 本文实现采用FragmentTabHo ...

  4. 安卓官方ViewPager与android.support.design.widget.TabLayout双向交互联动切换 。

    该TabLayout的功用,简单的说,就是当用户在该TabLayout的选项卡子item中选择触摸时候,文字和下方的指示器横条滑动指示.android.support.design.widget.Ta ...

  5. 浅谈 Fragment 生命周期

    版权声明:本文为博主原创文章,未经博主允许不得转载. 微博:厉圣杰 源码:AndroidDemo/Fragment 文中如有纰漏,欢迎大家留言指出. Fragment 是在 Android 3.0 中 ...

  6. TabLayout ViewPager Fragment 简介 案例 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  7. 011 Android TabLayout+ViewPager实现顶部滑动效果(多个页面)

    1.TabLayout介绍 TabLayout提供了一个水平的布局用来展示Tabs,很多应用都有这样的设计,典型的有网易新闻,简书,知乎等.TabLayout就可以很好的完成这一职责,首先TabLay ...

  8. Android开发-浅谈架构(二)

    写在前面的话 我记得有一期罗胖的<罗辑思维>中他提到 我们在这个碎片化 充满焦虑的时代该怎么学习--用30%的时间 了解70%该领域的知识然后迅速转移芳草鲜美的地方 像游牧民族那样.原话应 ...

  9. TabLayout + ViewPager

    一.实现思路 1.在build.gradle中添加依赖,例如: compile 'com.android.support:support-v4:23.4.0'compile 'com.android. ...

随机推荐

  1. 高性能ORM 框架之 MySqlSugar

    mysql 3.X API地址:  http://www.cnblogs.com/sunkaixuan/p/5987308.html MySqlSugar 1.5 API 一.介简 SqlSugar ...

  2. 关于Entity Framework自动关联查询与自动关联更新导航属性对应的实体注意事项说明

    一.首先了解下Entity Framework 自动关联查询: Entity Framework 自动关联查询,有三种方法:Lazy Loading(延迟加载),Eager Loading(预先加载) ...

  3. CP/IP,SPDY,WebSocket 三者之间的关系

    按照OSI网络分层模型,IP是网络层协议,TCP是传输层协议,而HTTP是应用层的协议.在这三者之间,SPDY和WebSocket都是与HTTP相关的协议,而TCP是HTTP底层的协议.一.HTTP的 ...

  4. C#基础04

    介绍:泛型介绍,索引,Foreach遍历的解释,yield方法,path文件操作,Directory类基本操作<目录> 一:泛型   百度资料:泛型是 2.0 版 C# 语言和公共语言运行 ...

  5. html的块级、内联、内联块级元素基础

    概念 块级:block 内联:inline 内联块级:inline-block 在html元素中,元素会有display属性 display属性默认值是block,那么该元素是块级元素. displa ...

  6. 对TabControl的简单优化

    之前由于忙于赶项目进度而忽视了软件的用户体验,界面挺难看,有一天看见组长优化了某个窗体,让人感觉完全不一样,我也不甘示弱,要把我的程序做顺眼一点才行.我的程序是一个以TabControl为主要容器的窗 ...

  7. Java总结篇系列:java.lang.Object

    从本篇开始,将对Java中各知识点进行一次具体总结,以便对以往的Java知识进行一次回顾,同时在总结的过程中加深对Java的理解. Java作为一个庞大的知识体系,涉及到的知识点繁多,本文将从Java ...

  8. C#编程总结(四)多线程应用

    C#编程总结(四)多线程应用 多线程应用很广泛,简单总结了一下: 1)不阻断主线程,实现即时响应,由后台线程完成特定操作2)多个线程,完成同类任务,提高并发性能3)一个任务有多个独立的步骤,多个线程并 ...

  9. ASP.NET MVC 网站开发总结(四)——校友平台开发总结

    又历经一个多月的努力,学校的一个校友平台项目也接近内测的尾声了,简单的总结一下这次的项目开发. 与上次做Wing工作室的门户网站相比,同样是团队开发,参与的人员多了一个,用的时间也差不多一个月,但从总 ...

  10. LGLTagsView

    做项目的时候经常会用到标签,比如说现在很多项目中搜索历史用标签展示 和 选择某个产品的不同属性用标签展示....网上的有很多封装好的标签,但是作为一个上进的程序员,都希望能有一个自己写的.其实也是一种 ...