Android商城开发--实现商城底部导航栏

让我们先看效果图:

图一是默认效果图,图二是点击首页的效果图(图标和字体颜色会变化)

Android商城开发--实现商城底部导航栏_第1张图片          Android商城开发--实现商城底部导航栏_第2张图片

接下来是实现方法

1、先写布局。

我新建了一个ShoppingActivity,在activity_shopping.xml文件中,写整体布局,代码如下:



    
    
        
        
        
        
        
    

相信很多小伙伴写了上面代码后,有不少飘红,那是因为样式和图片没有添加。

2、接下来添加图片。我这里是在图标库找的一些图标,这里给大家分享一个网址,里面有很多图标,大家可以根据自己需要去下载。

iconfont-阿里巴巴矢量图标库

下面这些是我保存的一些图标,大家下载的时候,最好每个图标下载两个不一样颜色的,后面样式中会用到(灰色图标是默认效果,橙红色图标是点击的效果)

将下载好的图标保存在drawable文件夹中。

Android商城开发--实现商城底部导航栏_第3张图片

 3、下面为RadioButton按钮添加样式。

首先在styles文件中,添加下面代码:

接着在drawable里面新建 bottom_button_text_selector.xml。为RadioButton按钮中的文本添加点击时的样式。

这是新建的文件的方法,截图如下:

Android商城开发--实现商城底部导航栏_第4张图片

 这是具体代码:




    
    

 在drawable里面新建home_button_selector.xml。为RadioButton按钮中的"首页"添加点击时的样式。



    
    
    

  在drawable里面新建type_button_selector.xml。为RadioButton按钮中的"分类"添加点击时的样式。



    
    
    

  在drawable里面新建community_button_selector.xml。为RadioButton按钮中的"发现"添加点击时的样式。



    
    
    

  在drawable里面新建cart_button_selector.xml。为RadioButton按钮中的"购物车"添加点击时的样式。



    
    
    

在drawable里面新建user_button_selector.xml。为RadioButton按钮中的"个人中心"添加点击时的样式。



    
    
    

实现效果如下:

Android商城开发--实现商城底部导航栏_第5张图片

以上就是商城的底部导航的样式。运行后,点击首页,就是上图的样式,点击个人中心,个人中心的图标会变亮,其他的图标都是灰色。

想看商城的具体实现,可以去主页看看其他文章哦。

你可能感兴趣的:(android,android,studio)