android开发(1):底部导航条的实现 | navigation tab

底部导航条,在iOS中叫tabbar,在android中叫bottombar或bottom navigation,是一个常用的切换页面的导航条。

同样,如果有良好的第三方库,我们应该优先考虑,能用好别人的东西,已经很厉害。

github上的roughike/BottomBar,曾经是热度较高的库,但是已经过时了,没有再维护,加到项目也会遇到编译的问题,所以这里不使用,这里使用的是PagerBottomTabStrip,地址是:https://github.com/tyzlmjj/PagerBottomTabStrip

使用PagerBottomTabStrip,既可实现底部导航条,也可实现顶部导航条。

(0)添加activity

上一节创建的“知音”项目是没带activity的,而实际的APP一定是带activity,所以先给这个项目增加一个界面,让它能正常运行起来。

把上一节介绍的“知音”项目打开,选中app/src,然后在菜单File->New的最下方选择activity,如下面截图所示:

这样就给APP添加了一个窗口。之时,在res目录下会创建一个layout目录,里面有一个activity_main.xml文件,文件名就是在创建activity时的命名,比如:

这个xml就代表一个界面,跟iOS的view与vc一样,界面要跟界面容器也就是activity关联起来,而实际上,在创建xml时,activity_main.xml(界面)对应的activity也被创建起来,而且这个activity已经使用了activity_main.xml,也就是关联起来了,请看截图:
https://free-picture1.oss-cn-shenzhen.aliyuncs.com/android/%E5%AF%BC%E8%88%AA%E6%9D%A1/mainactivity1.jpg" alt="xml界面与activity类的关联" />

另外,在创建activity_main.xml时,还会自动修改了AndroidManifest.xml文件,这个文件是APP的总配置文件。我们需要在这个文件里面加入intent-filter字段,如下面的截图:

如果在创建activity_main时,有勾选Launcher Activity,则会自动生成截图上面的内容。

所以,简单来说,要显示一个界面,我们要做的是:

  1. 用File->new菜单来创建一个界面(xml),不需要考虑关联的事情(AS帮你创建界面与类并关联了)。
  2. 如果有必要则修改AndroidManifest.xml文件。

到此,就可以编译并运行,使用真机或下载某个模拟器(按指引下载即可,但请准备10G的运行空间),就可以看到运行起来的APP。

(1)引入PagerBottomTabStrip

在app/build.gradle中加入对PagerBottomTabStrip的引用,这个跟iOS使用cocoapods来引用第三方库一样的道理,加入这一句:

implementation ‘me.majiajie:pager-bottom-tab-strip:+‘

在gradle有改动时,as会提示sync。sync一下,成功引入,command+f9编译一下,通过编译。

(2)在activity中使用导航条

这里使用约束布局,在布局中加入PageNavigationView实例(也就是导航条)。

操作上,先在xml文本中加入me.majiajie.pagerbottomtabstrip.PageNavigationView对象跟少量属性(比如android:id等),然后在AS的Design界面对其增加位置约束。如果没有位置约束,则运行时会跳到(0,0)位置,那就不是底部的导航条了。如截图:

对于布局与约束,以后紧接着介绍,这里先让其较正常的运行起来即可。

这时,这个APP运行就可以看到导航条,但是还没有tab。写代码,给导航条添加tab,如截图:

这时运行效果是这样的:

(3)响应tab的点击

给导航条写上事件监听,如下图:

至此,一个底部导航条的基本功能与效果就实现了,是不是很简单?后继再介绍更多的界面效果。

原文地址:http://blog.51cto.com/13136504/2347043

时间: 2024-10-23 19:30:35

android开发(1):底部导航条的实现 | navigation tab的相关文章

android开发(1):底部导航条的实现 | navigation tab | activity的创建

底部导航条,在iOS中叫tabbar,在android中叫bottombar或bottom navigation,是一个常用的切换页面的导航条. 同样,如果有良好的第三方库,我们应该优先考虑,能用好别人的东西,已经很厉害. github上的roughike/BottomBar,曾经是热度较高的库,但是已经过时了,没有再维护,加到项目也会遇到编译的问题,所以这里不使用,这里使用的是PagerBottomTabStrip,地址是:https://github.com/tyzlmjj/PagerBot

Android 修改TabLayout底部导航条Indicator的长短

关于Tablayout,使用的应该很频繁了,但是底部导航条长短是固定死的,需要自己来改动长短,找了半天没找着方法,看了下官方建议,可以通过映射来修改自己想要的长短,其实也就几行代码的问题,看代码: public static void setIndicator(Context context, TabLayout tabs, int leftDip, int rightDip) { Class<?> tabLayout = tabs.getClass(); Field tabStrip = n

Android开发关闭虚拟按钮、底部导航条

在Android开发中,遇到了一系列大大小小的问题,其中一个就是屏蔽底部实体键,我找了很多的博客也尝试了许许多多的方法,但始终不能屏蔽 HOME键,后来看见一篇博客说在Android 4.0以后,屏蔽底部HOME键必须反编译,修改Android底部原生代码,于是我便放弃了.废话不多说,我先分享一个屏蔽Android虚拟按键的方法,以及最简单的屏蔽Android的Back按钮,适合所有版本(未测试,感觉是这样): 1. Android 屏蔽Back按键 只需要重写 onKeyDown 方法就可以了

Android仿小米商城底部导航栏之二(BottomNavigationBar、ViewPager和Fragment的联动使用)

简介 在前文<Android仿小米商城底部导航栏(基于BottomNavigationBar)>我们使用BottomNavigationBar控件模仿实现了小米商城底部导航栏效果.接下来更进一步的,我们将通过BottomNavigationBar控件和ViewPager空间的联动使用来实现主界面的滑动导航. 导航是移动应用最重要的方面之一,对用户体验是良好还是糟糕起着至关重要的作用.好的导航可以让一款应用更加易用并且让用户快速上手.相反,糟糕的应用导航很容易让人讨厌,并遭到用户的抛弃.为了打造

【AmazeUI】底部导航条的改进

AmazeUI的底部导航条已经在<[AmazeUI]底部导航栏与分享按钮>(点击打开链接)中介绍过了. 其实如果你的底部导航条中的导航过多,这个底部导航条还可以把后面的导航项隐藏起来. 然后提供一个上拉工具的"更多" 如果要实现这种效果,关键是在ul节点的属性中加入am-cf am-avg-sm-3这两个属性,如果不加,无论你的屏幕多窄,它都不隐藏选项,如果加上了,当设备的屏幕过小,它会隐藏多余的项的. <div class="am-navbar am-na

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏啦

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏啦 Xamarin.Forms 3.1.0以上版本终于支持Android底部导航栏啦,可以不用第三方的支持库了. https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/ C#代码: On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); Xaml代码:

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏

Xamarin.Forms 3.1.0+版本 Android 原生支持底部导航栏 Xamarin.Forms 3.1.0以上版本终于支持Android底部导航栏啦,可以不用第三方的支持库了. https://developer.xamarin.com/releases/xamarin-forms/xamarin-forms-3.1/3.1.0/ C#代码: On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom); Xaml代码: &

Android UI-仿微信底部导航栏布局

现在App基本的标配除了侧滑菜单,还有一个就是底部导航栏,常见的聊天工具QQ,微信,购物App都有底部导航栏,用户可以随便切换看不同的内容,说是情怀也好,用户体验也罢.我们开发的主要的还是讲的是如何如何实现其功能,网上实现的方式无外乎两种,一种是使用tabhost进行切换,一种是直接使用Fragment进行切换,底部导航栏的布局有的使用的是线性布局,有的是使用的RadioGroup,本文中是使用fragment+RadioGroup是实现的,看正文吧: 基础布局 其中主要低 底部导航栏,其他都没

android开发键盘把导航顶上去了解决办法

解决办法,在mainfest.xml中,在和导航条相关的Activity中加: <activity            android:name=".filing.AddFilingActivity"            android:windowSoftInputMode="adjustResize|stateHidden"             /> android:windowSoftInputMode="adjustResize