使用TabLayout快速实现一个导航栏
在没有Material Design的年代,要实现一个类似微信主页面的效果,我们有以下几种解决方案:
1.Fragment + ViewPager + RadioGroup自定义固定导航条
2.Fragment + ViewPager 带滑动导航条
3.Fragment + ViewPager + HorizontalScrollView自定义滑动导航条
当然,除了这些之外,还有许多已经被Google丢弃的方案,我们就不说了。当有了Material Design之后,一切都变得那么漂亮,也变得那么简单,我们今天就来看看怎么用TabLayout快速实现一个导航栏。先来看看效果图:
这就是我们要实现的一个效果,好了,开始吧。
1.添加依赖文件
- compile 'com.android.support:design:23.1.1'
- compile 'com.android.support:support-v4:23.1.1'
在gradle文件中添加上面两个文件的依赖。
2.在布局文件中引入TabLayout
主布局文件如下:
- <?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"
- xmlns:app="http://schemas.android.com/apk/res-auto"
- android:orientation="vertical">
- <android.support.design.widget.TabLayout
- android:id="@+id/tab_layout_navi"
- android:layout_width="match_parent"
- app:tabMode="scrollable"
- android:layout_height="wrap_content" />
- <android.support.v4.view.ViewPager
- android:id="@+id/view_pager"
- android:layout_width="match_parent"
- android:layout_height="0dp"
- android:layout_weight="1"></android.support.v4.view.ViewPager>
- </LinearLayout>
通过上面的示例图我们已经看到了,我们的App上面是一个TabLayout,下面是一个ViewPager,所以我们的布局文件中添加这两个东西就可以了,注意TabLayout的引用方式。
3.创建Fragment
实际开发中我们可能需要创建多个Fragment,在这里做示例我就只创建一个,然后多次使用,思路是这样的,每次实例化一个Fragment的时候,传入该Fragment要显示的文本,代码如下:
- public class MyFragment extends Fragment {
- private static final String ARG_PARAM1 = "param1";
- private String mParam1;
- public static MyFragment newInstance(String param1) {
- MyFragment fragment = new MyFragment();
- Bundle args = new Bundle();
- args.putString(ARG_PARAM1, param1);
- fragment.setArguments(args);
- return fragment;
- }
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- if (getArguments() != null) {
- mParam1 = getArguments().getString(ARG_PARAM1);
- }
- }
- @Override
- public View onCreateView(LayoutInflater inflater, ViewGroup container,
- Bundle savedInstanceState) {
- View view = inflater.inflate(R.layout.fragment_my, null);
- TextView content = (TextView) view.findViewById(R.id.fg_tv);
- content.setText(mParam1);
- return view;
- }
- }
Fragment的布局文件是这样的:
- <FrameLayout 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"
- tools:context="lenve.tablayouttest.fragment.MyFragment">
- <!-- TODO: Update blank fragment layout -->
- <TextView
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:gravity="center"
- android:id="@+id/fg_tv"
- android:text="@string/hello_blank_fragment" />
- </FrameLayout>
4.自定义一个FragmentPagerAdapter
这个FragmentPagerAdapter我们在之前使用ViewPager的时候都有自定义过,这里就不多说了,直接上代码:
- public class MyFragmentAdapter extends FragmentPagerAdapter {
- private final int PAGE_COUNT = 3;
- private final String[] titles;
- private Context context;
- private List<Fragment> fragments;
- public MyFragmentAdapter(List<Fragment> fragments,String[] titles, FragmentManager fm, Context context) {
- super(fm);
- this.context = context;
- this.fragments = fragments;
- this.titles = titles;
- }
- @Override
- public Fragment getItem(int position) {
- return fragments.get(position);
- }
- @Override
- public int getCount() {
- return fragments.size();
- }
- @Override
- public CharSequence getPageTitle(int position) {
- return titles[position];
- }
- }
注意,这里有个不同的地方就是我们重写了方法getPageTitle,这个方法返回ViewPager中每个Fragment对应的title。
最后,我们再来看看MainActivity,首先初始化数据,初始化Fragment,这些都是ViewPager基本用法,我们来看看最后一句,这一句就是将ViewPager和TabLayout绑定在一起,实现了ViewPager和TabLayout的同步。
- public class MainActivity extends AppCompatActivity {
- private String[] titles = new String[]{"聊天", "好友", "发现", "我的","聊天", "好友", "发现", "我的","聊天", "好友", "发现", "我的"};
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- ViewPager viewPager = (ViewPager) findViewById(R.id.view_pager);
- List<Fragment> fragments = new ArrayList<Fragment>();
- for (int i = 0; i < titles.length; i++) {
- fragments.add(MyFragment.newInstance(titles[i]));
- }
- FragmentPagerAdapter adapter = new MyFragmentAdapter(fragments, titles, getSupportFragmentManager(), this);
- viewPager.setAdapter(adapter);
- TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout_navi);
- tabLayout.setupWithViewPager(viewPager);
- }
- }
Demo下载http://download.csdn.net/detail/u012702547/9349175
使用TabLayout快速实现一个导航栏的更多相关文章
- [置顶]
xamarin Tablayout+Viewpager+Fragment顶部导航栏
最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...
- 如何做一个导航栏————浮动跟伪类(hover)事件的应用
我们先说一下伪类选择器的写法: 写法:选择器名称:伪类状态{}4 常见伪类状态: 未访问:link 鼠标移上去:hover 激活选定:active 已访问:visited 获得焦点的时候触发:focu ...
- html表单——使用frameset写一个导航栏效果
主页面: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 ...
- TabLayout+ViewPager制作简单导航栏
先看样例,有图有真相 绑定viewpager 此处主要说明tablayout的使用方法,viewpager绑定fragment的介绍在其他文章说明 mBinding.tabsLayout.setupW ...
- 使用『jQuery』『原生js』制作一个导航栏动效 —— { }
效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="n ...
- jquery-仿flash的一个导航栏特效
演示地址:http://itxiaoming.sinaapp.com/demo05/demo.html <html> <head> <meta http-equiv=&q ...
- Flask入门之Bootstrap介绍使用和Flask-Nav快速导航栏
一.Bootstrap Bootstrap,来自 Twitter,是目前最受欢迎的前端框架. Python中,同样可以使用Bootstrap. 1. 导入Bootstrap库 from flask_b ...
- iOS导航栏的正确隐藏方式【转】
简介:在项目中经常碰到首页顶部是无限轮播,需要靠最上面显示.有的设置导航栏为透明等一系列的方法,这个可以借助第三方.或者干脆简单粗暴的直接隐藏掉导航栏.可是push到下一个页面的时候是需要导航栏的,如 ...
- IOS导航栏的使用方法
本文是使用纯代码实现一个导航栏的效果.单击按钮并且产生事件.基本思路是: 1.创建一个导航栏(UINavigationBar对象) 2.创建一个导航栏集合(UINavigationItem对象) 3. ...
随机推荐
- perl + 匹配前导模式一次或者多次
Vsftp:/data01/mysqllog/binlog# cat a2.pl $_="aaaa@[2]sasas"; if ($_ =~/.*?(\@\[[0-9]+\]).* ...
- Java金字塔及变形
Java金字塔 package com.tfj.test; public class JinZiTa { public static void main(String[] args){ int num ...
- 结构体dtype_t
/* SQL data type struct */ typedef struct dtype_struct dtype_t; struct dtype_struct{ unsigned mtype: ...
- 把USB打印机映射到LPT端口
把USB打印机映射到LPT端口(pos小票机测试成功)2010-12-23 18:11:00| 分类: 編程 | 标签: |字号大中小 订阅 注释:在DOS命令行下运行以下命令(以下为示例,根据实际情 ...
- linux 系统获取网络ip, mask, gateway, dns信息小程序
net_util.c #define WIRED_DEV "eth0" #define WIRELESS_DEV ...
- MongoDB之三(高级操作 聚合、游标)
一: 聚合 常见的聚合操作跟sql server一样,有:count,distinct,group,mapReduce. <1> count count是最简单,最容易,也是最常用的聚合工 ...
- “System.Exception”类型的异常在 NHibernate.dll 中发生,但未在用户代码中进行处理
“System.Exception”类型的异常在 NHibernate.dll 中发生,但未在用户代码中进行处理 其他信息: OCIEnvCreate 失败,返回代码为 -,但错误消息文本不可用. 如 ...
- kafka在虚拟机环境的优化
首先是,多磁盘的并发的问题.不管怎么说,虚拟机环境至少剥夺了单个kafka同时使用多个磁盘的优势.也就意味着,在同一个虚拟机,同一个topic,最好只有一partition:当然,不同topic之间p ...
- bzoj 1951 [Sdoi2010]古代猪文(数论知识)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1951 [思路] 一道优(e)秀(xin)的数论题. 首先我们要求的是(G^sigma{ ...
- POJ 3279 Fliptile (质量不错)
题意:有一个M*N的棋盘,每一个格子只有两种状态0或1,每次可以选择一个格子执行翻转操作,并且与该格子相邻的4个格子都会被翻转,求将所有格子都翻转成0所需要的最小操作数,若有多种方案,输出字典序最小的 ...