Android商城开发--实现商城底部导航栏
让我们先看效果图:
图一是默认效果图,图二是点击首页的效果图(图标和字体颜色会变化)
接下来是实现方法
1、先写布局。
我新建了一个ShoppingActivity,在activity_shopping.xml文件中,写整体布局,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"android:background="#fff"tools:context=".ShoppingActivity"><FrameLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1" /><RadioGroupandroid:id="@+id/rg_main"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:background="#FBFBFA"android:orientation="horizontal"><RadioButtonandroid:id="@+id/rb_home"android:drawableTop="@drawable/home_button_selector"style="@style/MainButtonStyle"android:text="首页"/><RadioButtonandroid:id="@+id/rb_type"android:drawableTop="@drawable/type_button_selector"style="@style/MainButtonStyle"android:text="分类"/><RadioButtonandroid:id="@+id/rb_community"android:drawableTop="@drawable/community_button_selector"style="@style/MainButtonStyle"android:text="发现"/><RadioButtonandroid:id="@+id/rb_cart"android:drawableTop="@drawable/cart_button_selector"style="@style/MainButtonStyle"android:text="购物车"/><RadioButtonandroid:id="@+id/rb_user"android:drawableTop="@drawable/user_button_selector"style="@style/MainButtonStyle"android:text="个人中心"/></RadioGroup></LinearLayout>
相信很多小伙伴写了上面代码后,有不少飘红,那是因为样式和图片没有添加。
2、接下来添加图片。我这里是在图标库找的一些图标,这里给大家分享一个网址,里面有很多图标,大家可以根据自己需要去下载。
iconfont-阿里巴巴矢量图标库
下面这些是我保存的一些图标,大家下载的时候,最好每个图标下载两个不一样颜色的,后面样式中会用到(灰色图标是默认效果,橙红色图标是点击的效果)
将下载好的图标保存在drawable文件夹中。
3、下面为RadioButton按钮添加样式。
首先在styles文件中,添加下面代码:
<style name="MainButtonStyle"><item name="android:layout_width">0dp</item><item name="android:layout_height">wrap_content</item><item name="android:layout_weight">1</item><item name="android:textColor">@drawable/bottom_button_text_selector</item><item name="android:button">@null</item><item name="android:textSize">10sp</item><item name="android:gravity">center</item><item name="android:padding">8dp</item>
</style>
接着在drawable里面新建 bottom_button_text_selector.xml。为RadioButton按钮中的文本添加点击时的样式。
这是新建的文件的方法,截图如下:
这是具体代码:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 设置下方图标被选中时,文本颜色--><item android:color="#535353" android:state_checked="false"></item><item android:color="#ff4040" android:state_checked="true"></item>
</selector>
在drawable里面新建home_button_selector.xml。为RadioButton按钮中的"首页"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时,图标颜色--><item android:drawable="@drawable/index" android:state_checked="false"></item><item android:drawable="@drawable/index1" android:state_checked="true"></item></selector>
在drawable里面新建type_button_selector.xml。为RadioButton按钮中的"分类"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时,图标颜色--><item android:drawable="@drawable/type" android:state_checked="false"></item><item android:drawable="@drawable/type1" android:state_checked="true"></item></selector>
在drawable里面新建community_button_selector.xml。为RadioButton按钮中的"发现"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时,图标颜色--><item android:drawable="@drawable/found" android:state_checked="false"></item><item android:drawable="@drawable/found1" android:state_checked="true"></item></selector>
在drawable里面新建cart_button_selector.xml。为RadioButton按钮中的"购物车"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时,图标颜色--><item android:drawable="@drawable/shop" android:state_checked="false"></item><item android:drawable="@drawable/shop1" android:state_checked="true"></item></selector>
在drawable里面新建user_button_selector.xml。为RadioButton按钮中的"个人中心"添加点击时的样式。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"><!-- 设置下方图标被选中时,图标颜色--><item android:drawable="@drawable/my" android:state_checked="false"></item><item android:drawable="@drawable/my1" android:state_checked="true"></item></selector>
实现效果如下:
以上就是商城的底部导航的样式。运行后,点击首页,就是上图的样式,点击个人中心,个人中心的图标会变亮,其他的图标都是灰色。
想看商城的具体实现,可以去主页看看其他文章哦。
Android商城开发--实现商城底部导航栏相关推荐
- android自定义底部中间突出导航栏,Android选中突出背景效果的底部导航栏功能
今天在群里看到一个底部导航选中突出效果像这样 就想着 这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种 是选中哪个,哪个就突出 第一种方法 简单快捷,让UI帮忙切几张带突出背景的图片, 选中 ...
- android radiobutton底部导航,android中Fragment+RadioButton实现底部导航栏
在App中经常看到这样的tab底部导航栏 那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activity ...
- Android Navigation与BottomNavigationView实现底部导航栏
底部导航栏 一.效果图 二.实现 1.创建Fragment以及布局文件 2.添加FragmentContainerView和BottomNavigationView两个控件 3.配置xml资源文件 4 ...
- android获取刘海屏状态栏高度,Android刘海屏全面屏底部导航栏的适配
关于Android状态栏和虚拟导航栏的适配,文章:https://blog.csdn.net/leogentleman/article/details/54566319 讲的很不错. 状态栏的适配: ...
- 微信小程序开发笔记二—底部导航栏tabar
文章目录 一.实现效果 二.实现方法 1.准备图标 2.app.json文件添加新页面 3.app.json中添加tabar组件 三.注意事项 一.实现效果 首先展示一下实现效果 底部导航栏有三个按键 ...
- 在android Studio中设计app的底部导航栏
准备工作 新建一个空白android项目 命名为csdn 在res/layout路径下设置主页面 使用线性布局 linearLayout 使用自定义的viewPager(切换多个页面会秒跳转,提升体验 ...
- android底部导航栏选中动画,Android选中突出背景效果的底部导航栏功能
今天在群里看到一个底部导航选中突出效果像这样 就想着 这个应该怎么做呢,我记得类似咸鱼那种的是中间突出,不像这种 是选中哪个,哪个就突出 第一种方法 简单快捷,让UI帮忙切几张带突出背景的图片, 选中 ...
- Android 泽宇三种底部导航栏
compile 'com.flyco.tablayout:FlycoTabLayout_Lib:2.0.8@aar'//底部导航 <com.flyco.tablayout.CommonTabLa ...
- Android——Fragment实例精讲——底部导航栏+ViewPager滑动切换页面
说明: 实现效果: 1- 用ViewPager实现Fragmen之间的切换 2- 底部用RadioGroup实现,更方便的实现图片和字体颜色的改变,更方便的通过RadioButton的点击事件来控制页 ...
- Android三种风格的底部导航栏
?参考:https://blog.csdn.net/afei__/article/details/80950288
最新文章
- 剑指offer:机器人的运动范围
- tar方式安装oracle11g
- oracle中有类似split的方法么,Oracle 实现拆分列数据的split()方法
- SDEBECMSrv服务
- forth day ---内置函数、匿名函数
- 程序员如何避免半途而废?
- ubuntu解决安装Scrapy库时报x86_64-linux-gnu-gcc错误
- VS2015断点调试方法
- filepath直接指定到文件名吗_按照txt中指定的文件名,从src_path中拷贝文件到dest_path(copyfile_from_txt)...
- 进程间通信有哪几种方式?
- drain open 线与_【转】open-drain与push-pull
- sMRI影像数据3维CNN卷积
- Goland环境下同一个package下出现undefined
- STM32F407ZET6的RTC闹钟二次设置笔记
- 工控机主板与ARM工控机主板有什么不同呢?
- 大数据开发要学习什么
- Linux认证考试心得:RHCE考试心得
- k8s每天报告服务器状态信息,[工作随笔] 配置 cron 检查 K8s Pod 存活状态以推送钉钉消息...
- LOJ2758 年轮蛋糕
- 高端人才必看,生意人必读