文档章节

程序猿媛二:Android底部导航栏(选项卡)

花佟林雨月
 花佟林雨月
发布于 2013/11/10 18:32
字数 843
阅读 17576
收藏 35

底部导航栏(选项卡)

ViewPager+RadioGroup

声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。源码请通过应用内下载。

转载请保留原文出处“http://my.oschina.net/gluoyer/blog”,谢谢!

应用下载:“http://mail.sina.com.cn/netdisk/download.php?id=d156f9c2124d9db7ce5de4007594800463

    引子:昨天群里有人说用Button做导航栏,然后,用ViewPager结合Fragment做显示,后退会崩溃!?!
强烈表示不相信,今天整理了一下类似功能,给吖看看,也顺便记录一下。

    本文介绍:利用RadioGroup做导航栏,ViewPager结合Fragment管理显示页面。

  •     可以通过点击导航栏,或者左右滑动手势,切换页面。
  •     Fragment的内容,根据需求设置。示例中,添加了文本,列表,ViewPager三种。

    实现效果如下:

image    image    image

  •     主页面的布局文件activity_btm_navi.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_view_bkg" >
    <RadioGroup
        android:id="@+id/navi_switcher"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
    	android:orientation="horizontal"
    	android:gravity="center_vertical"
    	android:checkedButton="@+id/navi_switcher_item_hp" >
        <RadioButton
            android:id="@+id/navi_switcher_item_hp"
            style="@style/radio_btn_style"
            android:text="@string/str_btm_navi_name_hp" />
        <RadioButton
            android:id="@+id/navi_switcher_item_lv"
            style="@style/radio_btn_style"
            android:text="@string/str_btm_navi_name_lv" />
        <RadioButton
            android:id="@+id/navi_switcher_item_vp"
            style="@style/radio_btn_style"
            android:text="@string/str_btm_navi_name_vp" />
    </RadioGroup>    

    <android.support.v4.view.ViewPager
        android:id="@+id/navi_view_pager"
        android:layout_above="@id/navi_switcher"
        android:layout_alignParentTop="true"
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        android:padding="0dip" />
</RelativeLayout>

    它的基础是RelativeLayout。RadioGroup包含三个子项置于页面底部,点击进行页面切换。

ViewPager,在RadioGroup上面,铺满剩余页面,进行内容的管理、显示。

  •     主页面Activity里的处理:

    主要是在导航栏的点击或手势滑动后,对另外的控件内容进行更新

    Activity中定义了如下静态变量,对应三项内容,在更新时进行控制:

    private final int CB_INDEX_HP = 0;
    private final int CB_INDEX_LV = 1;
    private final int CB_INDEX_VP = 2;

    View分别为:

    导航栏RadioGroup mSwitcher;

    页面ViewPager mSearchVp;

    更新主要有两处处理:

一、点击导航栏后,页面显示项的更新:

OnCheckedChangeListener mCheckedChgLitener = new OnCheckedChangeListener() {
	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		int cur = CB_INDEX_HP;
		switch(checkedId) {
			case R.id.navi_switcher_item_hp:
				cur = CB_INDEX_HP;
				break;
			case R.id.navi_switcher_item_lv:
				cur = CB_INDEX_LV;
				break;
			case R.id.navi_switcher_item_vp:
				cur = CB_INDEX_VP;
				break;
		}
		if(mSearchVp.getCurrentItem() != cur) {
			mSearchVp.setCurrentItem(cur);
		}
	}
};

代码在导航栏被点击的回调事件中,通过判断更新了页面的当前显示项。

二、手势滑动后,导航栏的更新:

OnPageChangeListener mPageChgListener = new OnPageChangeListener() {
	@Override
	public void onPageSelected(int position) {
		int vpItem = mSearchVp.getCurrentItem();
		switch(vpItem) {
			case CB_INDEX_HP:
				mSwitcher.check(R.id.navi_switcher_item_hp);
				break;
			case CB_INDEX_LV:
				mSwitcher.check(R.id.navi_switcher_item_lv);
				break;
			case CB_INDEX_VP:
				mSwitcher.check(R.id.navi_switcher_item_vp);
				break;
		}
	}
};

代码在页面改变回调事件中,重新设置了导航栏的显示项。

    另:用ViewPager设置FragmentPagerAdapter,实现结合Fragment管理页面,比较简单。

在自定义的Adapter里面,通过列表保留所需的Fragment即可,不赘述!

——————————————————————————————————————

因为涉及到后续的更新,为了方便源码的管理和更新,采取了应用的方式来获取源码,保证可用。

应用下载:“http://mail.sina.com.cn/netdisk/download.php?id=d156f9c2124d9db7ce5de4007594800463

    应用运行后,按钮点击可进入效果演示;

    按手机的菜单键,显示“关于”,点击进入笔者相关页面,并在底部提供按钮“获取源码”。

    下面附录,运行初始页面;获取源码成功提示页面;及打开源码压缩文件截图:

image

全文完,希望对您有帮助,谢谢!

应用下载:“http://mail.sina.com.cn/netdisk/download.php?id=d156f9c2124d9db7ce5de4007594800463

转载请保留原文出处“http://my.oschina.net/gluoyer/blog”,谢谢!

© 著作权归作者所有

共有 人打赏支持
花佟林雨月
粉丝 77
博文 11
码字总数 10652
作品 0
成都
私信 提问
加载中

评论(3)

程序猿媛七:slidingmenu侧滑栏导航

SlidingMenu侧滑栏导航 声明:博文为原创,文章内容为,效果展示,思路阐述,及代码片段。 转载请保留原文出处“http://my.oschina.net/gluoyer/blog/214399”,谢谢! 您可以到博客的“友情...

花佟林雨月
2014/03/30
0
0
Android底部导航栏(可滑动)----TabLayout+viewPager

【TabLayout】   ①TabLayout是选项卡,在屏幕空间有限的情况下,对不同的空间进行分组。属于android support design,更多的用于新闻上,如果放在底部也可做底部导航栏        ②T...

汪菜菜
03/12
0
0
Android 4.0设计规范10大改变

对比Android 4.0与Android2.3及之前版本的App设计指导,总结了Android 4.0设计的10大改变: 1. 导航栏 (详见模式PATTERNS>导航Navigation) 由之前的物理按键导航(返回、菜单、搜索、主页)变...

晨曦之光
2012/03/01
730
1
Android 用户界面---操作栏(Action Bar 二)

选择操作项 通过评估一些关键的特性,你应该仔细的选择选项菜单中的那些菜单项应该作为操作项来显示,通常,每个操作项应该至少满足下列特性之一: 1. 经常使用:用户百分之七十以上的访问都...

长平狐
2012/10/16
2.5K
0
React Navigation

https://reactnavigation.org/docs/intro/nesting 官网 http://blog.csdn.net/u013718120/article/details/72357698 http://www.jianshu.com/p/2f575cc35780 这里只是基本用法,高级详情用法......

Chason-洪
2017/11/15
0
0

没有更多内容

加载失败,请刷新页面

加载更多

rabbitmq安装教程

RabbitMQ有Windows与Linux版本的,这里先写Windows版本的安装。 以前安装软件总是在百度上找某某安装教程,结果能按照教程安装好的软件真的不多。想起先前以为大牛说的一句话,去官网按照官网...

em_aaron
今天
6
0
Android 贝塞尔曲线实践——波浪式运动

一、波浪效果如下 贝塞尔曲线自定义波浪效果的案例很多,同样方法也很简单,大多数和本案例一样使用二次贝塞尔曲线实现,同样还有一种是PathMeasure的方式,这里我们后续补充,先来看贝塞尔曲...

IamOkay
今天
2
0
Nmap之防火墙/IDS逃逸

选项 解释 -f 报文分段 --mtu 指定偏移大小 -D IP欺骗 -sI 原地址欺骗 --source-port 源端口欺骗 --data-length 指定发包长度 --randomize-hosts 目标主机随机排序 --spoof-mac Mac地址欺骗 ...

Frost729
今天
2
0
带你搭一个SpringBoot+SpringData JPA的环境

不知道大家对SpringBoot和Spring Data JPA了解多少,如果你已经学过Spring和Hibernate的话,那么SpringBoot和SpringData JPA可以分分钟上手的。 其实我在学完SpringBoot和SpringData JPA了之...

java菜分享
今天
7
0
Chocolatey 在Window搭建一个开发环境

在看了(利用 Chocolatey 快速在 Windows 下搭建一个开发环境)后,准备从零开始 一、准备工作 1、用管理员权限启动:powershell,执行错误请参考(PowerShell因为在此系统中禁止执行脚本的解...

近在咫尺远在天涯
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部