扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
很多android应用底部都有一个底部导航栏,方便用户在使用过程中随意切换。目前常用的做法有三种:一种是使用自定义tabHost,一种是使用activityGroup,一种是结合FrameLayout实现。笔者再做了多款应用后,为了节约开发周期,封装了一个抽象类,只要三步便可完成底部栏的生成及不同页面的调用。
创新互联专业为企业提供禹王台网站建设、禹王台做网站、禹王台网站设计、禹王台网站制作等企业网站建设、网页设计与制作、禹王台企业网站模板建站服务,10余年禹王台做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
public class ActivitycollectiondemoActivity extends ActivityCollection {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//setBottomTabBackground(resId);// 设置底部导航背景图
@Override
protected boolean isShowWindowFeature() {
return true;//设置是否显示title;
@Override
protected ListIndicatorInfo setDrawableCollections() {
ListIndicatorInfo IndicatorInfos = new ArrayListIndicatorInfo();
IndicatorInfo indicatorInfo_1 = new IndicatorInfo(R.drawable.baby1,
R.drawable.baby1_s, R.string.baby1, 12, Color.WHITE,
new Intent(ActivitycollectiondemoActivity.this,
Activity01.class));
IndicatorInfo indicatorInfo_2 = new IndicatorInfo(R.drawable.baby2,
R.drawable.baby2_s, R.string.baby2, 12, Color.WHITE,
new Intent(ActivitycollectiondemoActivity.this,
Activity02.class));
IndicatorInfo indicatorInfo_3 = new IndicatorInfo(R.drawable.baby3,
R.drawable.baby3_s, R.string.baby3, 12, Color.WHITE,
new Intent(ActivitycollectiondemoActivity.this,
Activity03.class));
IndicatorInfo indicatorInfo_4 = new IndicatorInfo(R.drawable.baby4,
R.drawable.baby4_s, R.string.baby4, 12, Color.WHITE,
new Intent(ActivitycollectiondemoActivity.this,
Activity04.class));
IndicatorInfos.add(indicatorInfo_1);
IndicatorInfos.add(indicatorInfo_2);
IndicatorInfos.add(indicatorInfo_3);
IndicatorInfos.add(indicatorInfo_4);
return IndicatorInfos;
第一步:导入jar包;
第二步:让你的homeactivity 继承ActivityCollection类;
第三步:将你的图片资源及跳转intent放入list中,设置可选项;
雏形就形成啦!
咳咳,答应过年增加新功能的,没想到拖到现在,延迟了一个来月,尴尬,尴尬
那个,我们先忽略这尴尬的事情吧,进入正题才是最重要滴
老规矩,先上效果图:
跟原来的图有个很明显的区别,你们也一定都发现了,对不对。那么显眼的小红点,一定都看到了吧。
当然除了这个,还增加了一项功能,虽然不是很明显,但相信也有小伙伴发现了吧,截图的这俩手机屏幕明显大小不同,但是底部导航栏的大小还是相差不大滴。
是的,你们没有看多,这次不仅增加了小红点功能,还增加了底部导航栏的适配,你没有听错,以后底部导航栏也不用那些dp、sp了,都按照UI妹子们标注的px来就可以了,再也不用为了底部导航栏去跟UI妹子解释啥叫dp了。
好了,效果图展示完了,现在该进入枯燥的使用介绍了。
由于这次改动有点大,所以,先介绍下上个稳定版本的用法,到底是用最新的,还是用原来的,就看各位小伙伴的意愿了
上个稳定版本是1.1.3的,引用方式如下
compile 'com.hjm:BottomTabBar:1.1.3'
具体用法如下(备注都加好了,我也就不多废话了):
最新版本是1.2.2的,引用方式如下
compile 'com.hjm:BottomTabBar:1.2.2'
其实1.2.0与1.1.3区别并不大,只有4点改动:
现在默认的,分割线高度都是设置的1个像素。这里以后也固定都用这个默认的高度了,不再对外提供修改的方法。
这就是新增加的适配了,多的也不说了,你们都懂的
标准尺寸,就是UI妹子给你提供的效果图的屏幕尺寸,只要在init()方法里添加上标准尺寸,你就可以放肆的使用px了
这个方法就是控制小红点显示的方法了,index就是需要显示或者隐藏小红点的TabItem,isShow是一个boolean类型的参数,他是控制小红点是否显示的,如果为true,就会显示小红点;如果为false,就会隐藏小红点
1.2.2版本新增了两个方法
介绍到这里,超简单的底部导航栏,第二阶段就可以告一段落了。以后还会持续优化,完善的。
第三阶段我打算封装一下有中间凸起的底部导航栏,这个功能我本地已经做了,但是封装进去的时候,封装的不理想,这次就没有上线,留作下次了。
最后,再上个 GitHub 地址
可以使用radiogroup做底部导航
radiogroup的属性自定义,并设置android:button="@null"
?xml version="1.0" encoding="utf-8"?
LinearLayout xmlns:android=""
android:layout_width="fill_parent"
android:layout_height="60dip"
android:background="@drawable/bottom_bg"
android:orientation="horizontal"
RadioGroup
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
RadioButton
style="@style/navigation_bottom_radio"
android:drawableTop="@drawable/bottom_home_d"
android:text="@string/home_tv" /
RadioButton
style="@style/navigation_bottom_radio"
android:drawableTop="@drawable/bottom_looks_d"
android:text="@string/style_tv" /
RadioButton
style="@style/navigation_bottom_radio"
android:drawableTop="@drawable/bottom_cam"
android:gravity="center"
android:text="拍照"
/
RadioButton
style="@style/navigation_bottom_radio"
android:drawableTop="@drawable/bottom_shopping_d"
android:text="@string/shopping_tv" /
RadioButton
style="@style/navigation_bottom_radio"
android:drawableTop="@drawable/bottom_show_d"
android:text="@string/show_tv" /
/RadioGroup
/LinearLayout
resources
style name="navigation_bottom_radio"
!-- 内部组件的排列 --
item name="android:gravity"center_horizontal/item
!-- 背景样式 --
item name="android:background"@drawable/style_navigation_radio/item
!-- 宽度 --
item name="android:layout_width"fill_parent/item
!-- 高度 --
item name="android:layout_height"wrap_content/item
!-- 设置RadioButton的原来图片为空 --
item name="android:button"@null/item
!-- 与其他组件宽度占相同比重 --
item name="android:layout_weight"1.0/item
!-- 底部的空隙 --
item name="android:paddingBottom"2.0dip/item
!-- 顶部的空隙 --
item name="android:paddingTop"2.0dip/item
!-- 文字的大小 --
item name="android:textSize"11dip/item
!-- 文字的颜色 --
item name="android:textColor"@color/white/item
/style
/resources
参考:
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流