美文网首页Android开发经验谈Android开发Android技术知识
android开发(1):底部导航条的实现 | navigati

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

作者: 广州小程 | 来源:发表于2019-01-27 14:35 被阅读10次

    底部导航条,在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,如下面截图所示:


    创建activity1
    创建activity2

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


    activity_main.xml

    这个xml就代表一个界面,跟iOS的view与vc一样,界面要跟界面容器也就是activity关联起来,而实际上,在创建xml时,activity_main.xml(界面)对应的activity也被创建起来,而且这个activity已经使用了activity_main.xml,也就是关联起来了,请看截图:


    xml界面与activity的关联2

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


    修改AndroidManifest

    如果在创建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)位置,那就不是底部的导航条了。如截图:


    添加导航条到布局1
    添加导航条到布局2

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

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


    写代码给导航条添加tab

    这时运行效果是这样的:


    底部导航条运行效果1

    (3)响应tab的点击

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


    tab点击事件

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

    相关文章

      网友评论

        本文标题:android开发(1):底部导航条的实现 | navigati

        本文链接:https://www.haomeiwen.com/subject/vcggjqtx.html