自定义底部导航栏

首先,在做底部导航栏界面之前,先来分析一下界面结构,比如界面的基本布局,用到哪些基础的控件。


界面分析.png

整体是一个纵向的线性布局(紫色框),自上到下放了一个线性布局(红色框)和一个单选按钮组(橙色框)。单选按钮组类似于一个横向的线性布局,从左到右放了四个单选按钮。
分析完后开始写代码,
因为我们的单选按钮是自定义的样式,所以先做下面这些准备。
第一,准备素材资源。
把图片资源放入res/drawable/文件夹下。ctrl+c,选中res/drawable 文件夹ctrl+v
第二,准备样式资源。
把写好的selector_nav_course.xml,



    
    

selector_nav_excise.xml,



    
    

selector_nav_massage.xml,



    
    

selector_nav_my.xml,



    
    

selector_nav_text.xml,



    
    

如果你selector_nav_text.xml文件中用到的颜色没有定义,请在res/value/color.xml中定义



    #008577
    #00574B
    #D81B60
    #2F2F2F
    #1E6D96


5个文件放在res/drawable/文件夹下。就像这样


6.png

第三,资源准备完毕,自定义按钮样式。在res/values/style.xml中写入如下代码



    
    

    


这种写法是引用了下面的知识点,可以回顾一下


样式.png

主题.png

终于最后一步啦!!!

新建一个名为TabMenu的Activity。
1.png

右键-new-Activity-Empty Activity
2.png

在res/layout/activity_tab_bar.xml中写入如下代码



    
     

     
    
    
        
        
        
        
    

需要注意的是第一个LinerLayout的orientation属性是纵向的,RadioGroup的orientation属性是横向的。当第二个LinerLayout的高度设为0dp,RadioGroup的高度设为指定高度是可以实现RadioGroup被LinerLayout顶在最下方的效果。
就做好了。

你可能感兴趣的:(自定义底部导航栏)