在没有Material Design的年代,要实现一个类似微信主页面的效果,我们有以下几种解决方案:

1.Fragment + ViewPager  +  RadioGroup自定义固定导航条

2.Fragment + ViewPager  带滑动导航条

3.Fragment + ViewPager +  HorizontalScrollView自定义滑动导航条

当然,除了这些之外,还有许多已经被Google丢弃的方案,我们就不说了。当有了Material Design之后,一切都变得那么漂亮,也变得那么简单,我们今天就来看看怎么用TabLayout快速实现一个导航栏。先来看看效果图:

这就是我们要实现的一个效果,好了,开始吧。

1.添加依赖文件

  1. compile 'com.android.support:design:23.1.1'
  2. compile 'com.android.support:support-v4:23.1.1'

在gradle文件中添加上面两个文件的依赖。

2.在布局文件中引入TabLayout

主布局文件如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3. xmlns:tools="http://schemas.android.com/tools"
  4. android:layout_width="match_parent"
  5. android:layout_height="match_parent"
  6. xmlns:app="http://schemas.android.com/apk/res-auto"
  7. android:orientation="vertical">
  8.  
  9. <android.support.design.widget.TabLayout
  10. android:id="@+id/tab_layout_navi"
  11. android:layout_width="match_parent"
  12. app:tabMode="scrollable"
  13. android:layout_height="wrap_content" />
  14.  
  15. <android.support.v4.view.ViewPager
  16. android:id="@+id/view_pager"
  17. android:layout_width="match_parent"
  18. android:layout_height="0dp"
  19. android:layout_weight="1"></android.support.v4.view.ViewPager>
  20. </LinearLayout>

通过上面的示例图我们已经看到了,我们的App上面是一个TabLayout,下面是一个ViewPager,所以我们的布局文件中添加这两个东西就可以了,注意TabLayout的引用方式。

3.创建Fragment

实际开发中我们可能需要创建多个Fragment,在这里做示例我就只创建一个,然后多次使用,思路是这样的,每次实例化一个Fragment的时候,传入该Fragment要显示的文本,代码如下:

  1. public class MyFragment extends Fragment {
  2. private static final String ARG_PARAM1 = "param1";
  3. private String mParam1;
  4.  
  5. public static MyFragment newInstance(String param1) {
  6. MyFragment fragment = new MyFragment();
  7. Bundle args = new Bundle();
  8. args.putString(ARG_PARAM1, param1);
  9. fragment.setArguments(args);
  10. return fragment;
  11. }
  12.  
  13. @Override
  14. public void onCreate(Bundle savedInstanceState) {
  15. super.onCreate(savedInstanceState);
  16. if (getArguments() != null) {
  17. mParam1 = getArguments().getString(ARG_PARAM1);
  18. }
  19. }
  20.  
  21. @Override
  22. public View onCreateView(LayoutInflater inflater, ViewGroup container,
  23. Bundle savedInstanceState) {
  24. View view = inflater.inflate(R.layout.fragment_my, null);
  25. TextView content = (TextView) view.findViewById(R.id.fg_tv);
  26. content.setText(mParam1);
  27. return view;
  28. }
  29. }

Fragment的布局文件是这样的:

  1. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2. xmlns:tools="http://schemas.android.com/tools"
  3. android:layout_width="match_parent"
  4. android:layout_height="match_parent"
  5. tools:context="lenve.tablayouttest.fragment.MyFragment">
  6.  
  7. <!-- TODO: Update blank fragment layout -->
  8. <TextView
  9. android:layout_width="match_parent"
  10. android:layout_height="match_parent"
  11. android:gravity="center"
  12. android:id="@+id/fg_tv"
  13. android:text="@string/hello_blank_fragment" />
  14.  
  15. </FrameLayout>

4.自定义一个FragmentPagerAdapter

这个FragmentPagerAdapter我们在之前使用ViewPager的时候都有自定义过,这里就不多说了,直接上代码:

  1. public class MyFragmentAdapter extends FragmentPagerAdapter {
  2. private final int PAGE_COUNT = 3;
  3. private final String[] titles;
  4. private Context context;
  5. private List<Fragment> fragments;
  6.  
  7. public MyFragmentAdapter(List<Fragment> fragments,String[] titles, FragmentManager fm, Context context) {
  8. super(fm);
  9. this.context = context;
  10. this.fragments = fragments;
  11. this.titles = titles;
  12. }
  13.  
  14. @Override
  15. public Fragment getItem(int position) {
  16. return fragments.get(position);
  17. }
  18.  
  19. @Override
  20. public int getCount() {
  21. return fragments.size();
  22. }
  23.  
  24. @Override
  25. public CharSequence getPageTitle(int position) {
  26. return titles[position];
  27. }
  28. }

注意,这里有个不同的地方就是我们重写了方法getPageTitle,这个方法返回ViewPager中每个Fragment对应的title。

最后,我们再来看看MainActivity,首先初始化数据,初始化Fragment,这些都是ViewPager基本用法,我们来看看最后一句,这一句就是将ViewPager和TabLayout绑定在一起,实现了ViewPager和TabLayout的同步。

  1. public class MainActivity extends AppCompatActivity {
  2.  
  3. private String[] titles = new String[]{"聊天", "好友", "发现", "我的","聊天", "好友", "发现", "我的","聊天", "好友", "发现", "我的"};
  4.  
  5. @Override
  6. protected void onCreate(Bundle savedInstanceState) {
  7. super.onCreate(savedInstanceState);
  8. setContentView(R.layout.activity_main);
  9. ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
  10. List<Fragment> fragments = new ArrayList<Fragment>();
  11. for (int i = 0; i < titles.length; i++) {
  12. fragments.add(MyFragment.newInstance(titles[i]));
  13. }
  14. FragmentPagerAdapter adapter = new MyFragmentAdapter(fragments, titles, getSupportFragmentManager(), this);
  15. viewPager.setAdapter(adapter);
  16. TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout_navi);
  17. tabLayout.setupWithViewPager(viewPager);
  18. }
  19. }

Demo下载http://download.csdn.net/detail/u012702547/9349175

使用TabLayout快速实现一个导航栏的更多相关文章

  1. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  2. 如何做一个导航栏————浮动跟伪类(hover)事件的应用

    我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...

  3. html表单——使用frameset写一个导航栏效果

    主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...

  4. TabLayout+ViewPager制作简单导航栏

    先看样例,有图有真相 绑定viewpager 此处主要说明tablayout的使用方法,viewpager绑定fragment的介绍在其他文章说明 mBinding.tabsLayout.setupW ...

  5. 使用『jQuery』『原生js』制作一个导航栏动效 —— { }

    效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="n ...

  6. jquery-仿flash的一个导航栏特效

    演示地址:http://itxiaoming.sinaapp.com/demo05/demo.html <html> <head> <meta http-equiv=&q ...

  7. Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏

    一.Bootstrap Bootstrap,来自 Twitter,是目前最受欢迎的前端框架. Python中,同样可以使用Bootstrap. 1. 导入Bootstrap库 from flask_b ...

  8. iOS导航栏的正确隐藏方式【转】

    简介:在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如 ...

  9. IOS导航栏的使用方法

    本文是使用纯代码实现一个导航栏的效果.单击按钮并且产生事件.基本思路是: 1.创建一个导航栏(UINavigationBar对象) 2.创建一个导航栏集合(UINavigationItem对象) 3. ...

随机推荐

  1. perl + 匹配前导模式一次或者多次

    Vsftp:/data01/mysqllog/binlog# cat a2.pl $_="aaaa@[2]sasas"; if ($_ =~/.*?(\@\[[0-9]+\]).* ...

  2. Java金字塔及变形

    Java金字塔 package com.tfj.test; public class JinZiTa { public static void main(String[] args){ int num ...

  3. 结构体dtype_t

    /* SQL data type struct */ typedef struct dtype_struct dtype_t; struct dtype_struct{ unsigned mtype: ...

  4. 把USB打印机映射到LPT端口

    把USB打印机映射到LPT端口(pos小票机测试成功)2010-12-23 18:11:00| 分类: 編程 | 标签: |字号大中小 订阅 注释:在DOS命令行下运行以下命令(以下为示例,根据实际情 ...

  5. linux 系统获取网络ip, mask, gateway, dns信息小程序

    net_util.c #define WIRED_DEV                   "eth0"     #define WIRELESS_DEV             ...

  6. MongoDB之三(高级操作 聚合、游标)

    一: 聚合 常见的聚合操作跟sql server一样,有:count,distinct,group,mapReduce. <1> count count是最简单,最容易,也是最常用的聚合工 ...

  7. “System.Exception”类型的异常在 NHibernate.dll 中发生,但未在用户代码中进行处理

    “System.Exception”类型的异常在 NHibernate.dll 中发生,但未在用户代码中进行处理 其他信息: OCIEnvCreate 失败,返回代码为 -,但错误消息文本不可用. 如 ...

  8. kafka在虚拟机环境的优化

    首先是,多磁盘的并发的问题.不管怎么说,虚拟机环境至少剥夺了单个kafka同时使用多个磁盘的优势.也就意味着,在同一个虚拟机,同一个topic,最好只有一partition:当然,不同topic之间p ...

  9. bzoj 1951 [Sdoi2010]古代猪文(数论知识)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1951 [思路] 一道优(e)秀(xin)的数论题. 首先我们要求的是(G^sigma{ ...

  10. POJ 3279 Fliptile (质量不错)

    题意:有一个M*N的棋盘,每一个格子只有两种状态0或1,每次可以选择一个格子执行翻转操作,并且与该格子相邻的4个格子都会被翻转,求将所有格子都翻转成0所需要的最小操作数,若有多种方案,输出字典序最小的 ...