编程是一种美德,是促使一个人不断向上发展的一种原动力

—————–以下是正文———————
最近好多app的底部标签导航使用以下形式了,所以我们就来学习一下它是如何实现的。

先看效果:

中间的“+”我给了一个旋转动画,看起来还是不错的,有兴趣的同学可以下载Demo看一下。

最近准备开发一款新App, 产品也给出了这么一个底部标签导航。于是就开始研究这个样式怎么实现的。常规的做法是粘贴复制…,我就在想可以简单点不。于是就开始了网上海选工作,在gitHub上找到了MainNavigateTabBar,他是一个普通的底部标签导航。不太符合我的需求,于是就对其源码进行了一些修改,把消息提示加进去了。
,先看一下这个功能的实现吧,有了图之后,分分钟搞定
MainActivity 代码:

public class MainActivity extends AppCompatActivity {

    private static final String TAG_PAGE_HOME = "首页";
private static final String TAG_PAGE_CITY = "同城";
private static final String TAG_PAGE_PUBLISH = "发布";
private static final String TAG_PAGE_MESSAGE = "消息";
private static final String TAG_PAGE_PERSON = "我的"; private MainNavigateTabBar mNavigateTabBar; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main); mNavigateTabBar = (MainNavigateTabBar) findViewById(R.id.mainTabBar);
mNavigateTabBar.onRestoreInstanceState(savedInstanceState);
mNavigateTabBar.setTabTextColor(getResources().getColor(R.color.blue_btn_disabled));
//对应xml中的navigateTabSelectedTextColor
mNavigateTabBar.setSelectedTabTextColor(getResources().getColor(R.color.blue_btn_normal));
mNavigateTabBar.addTab(HomeFragment.class, new MainNavigateTabBar.TabParam(R.mipmap.tab_home_n, R.mipmap.tab_home_p, TAG_PAGE_HOME));
mNavigateTabBar.addTab(CityFragment.class, new MainNavigateTabBar.TabParam(R.mipmap.tab_class_n, R.mipmap.tab_class_p, TAG_PAGE_CITY));
mNavigateTabBar.addTab(null, new MainNavigateTabBar.TabParam(0, 0, TAG_PAGE_PUBLISH));
mNavigateTabBar.addTab(MessageFragment.class, new MainNavigateTabBar.TabParam(R.mipmap.tab_user_n, R.mipmap.tab_user_p, TAG_PAGE_MESSAGE));
mNavigateTabBar.addTab(PersonFragment.class, new MainNavigateTabBar.TabParam(R.mipmap.tab_more_n, R.mipmap.tab_more_p, TAG_PAGE_PERSON)); //消息提醒 显示
mNavigateTabBar.disPlayBadgeCount(0, 2);
mNavigateTabBar.disPlayBadgeCount(1, 2);
mNavigateTabBar.disPlayBadgeCount(2, 2);
mNavigateTabBar.disPlayBadgeCount(3, 2);
} @Override
protected void onSaveInstanceState(Bundle outState) {
super.onSaveInstanceState(outState);
mNavigateTabBar.onSaveInstanceState(outState);
} public void onClickPublish(View v) {
//消息提醒 消失
mNavigateTabBar.disMissBadgeCount(0, 0);
mNavigateTabBar.disMissBadgeCount(1, 0);
mNavigateTabBar.disMissBadgeCount(2, 0);
mNavigateTabBar.disMissBadgeCount(3, 0);
//中间图片动画
RotateAnimation myAnimation_Rotate = new RotateAnimation(0.0f, 90.0f,
Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF, 0.5f);
v.startAnimation(myAnimation_Rotate);
myAnimation_Rotate.setDuration(300);
Toast.makeText(this, "发布", Toast.LENGTH_LONG).show();
}
}

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"> <FrameLayout
android:id="@+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/mainTabBar"/> <com.startsmake.mainnavigatetabbar.widget.MainNavigateTabBar
android:id="@+id/mainTabBar"
android:layout_width="match_parent"
android:layout_height="50.0dip"
android:layout_alignParentBottom="true"
android:background="@android:color/white"
app:containerId="@+id/main_container"
app:navigateTabSelectedTextColor="@color/blue_btn_disabled"
app:navigateTabTextColor="@color/blue_btn_normal"/> <ImageView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_above="@+id/mainTabBar"
android:background="@mipmap/comui_bar_top_shadow"/> <LinearLayout
android:layout_width="match_parent"
android:layout_height="80.0dip"
android:layout_alignParentBottom="true"
android:background="@android:color/transparent"
android:gravity="center|top"
android:orientation="vertical"> <ImageView
android:id="@+id/tab_post_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="onClickPublish"
android:src="@mipmap/comui_tab_post"/>
</LinearLayout>
</RelativeLayout>

这就把主页搞定了,简单吧,当然还有几个Fragment。具体内容根据项目需求来开发了

来说说怎么修改的MainNavigateTabBar吧,其实也很简单,就是找了个BadgeView 把它加到MainNavigateTabBar里就OK了,

 /**
* 隐藏消息数量提示
* @param index 底部导航的位置
* @param count 消息数量 count >0 显示
*/ public void disPlayBadgeCount(int index,int count){
if (index >= 0 && index < mViewHolderList.size()) {
ViewHolder holder = mViewHolderList.get(index); holder.badgeView.setTargetView(holder.view);
holder.badgeView.setBadgeMargin(0,0,10,0);
holder.badgeView.setBadgeCount(count);
}
}
/**
* 隐藏消息数量提示
* @param index 底部导航的位置
* @param count 消息数量 count = 0 消失
*/ public void disMissBadgeCount(int index,int count){
if (index >= 0 && index < mViewHolderList.size()) {
ViewHolder holder = mViewHolderList.get(index);
holder.badgeView.setBadgeCount(count);
}
}

加一句话: 除了消息提示是我加上去的,其他的是其他人的劳动成果。遗憾的他的链接找不到了….

闲鱼demo的更多相关文章

  1. 23Flutter FloatingActionButton实现类似闲鱼App底部导航凸起按钮:

    /* 一.Flutter FloatingActionButton介绍 FloatingActionButton简称FAB,可以实现浮动按钮,也可以实现类型闲鱼app的底部凸起导航. child:子视 ...

  2. Dubbo Mesh 在闲鱼生产环境中的落地实践

    本文作者至简曾在 2018 QCon 上海站以<Service Mesh 的本质.价值和应用探索>为题做了一次分享,其中谈到了 Dubbo Mesh 的整体发展思路是“借力开源.反哺开源” ...

  3. 自己动手制作的淘宝闲鱼APP宝贝数据采集工具软件

    之前做过淘宝PC端宝贝和店铺数据的采集,后来需要做APP端的数据采集,因为没有学过Android,以前也都是做PC端的软件,有没有其他方法呢? 突然想到了用手机模拟器,可以在电脑端控制运行手机APP端 ...

  4. 如何用 Flutter 实现混合开发?闲鱼公开源代码实例

    Flutter: 必火,转两篇软文预热哈哈~ 中文网: https://flutterchina.club/get-started/test-drive/ 如何用 Flutter 实现混合开发?闲鱼公 ...

  5. 闲鱼hu超赞,有赞必回,24小时在线!咸鱼互赞超赞留言评

    有没有在闲鱼上卖东西没有浏览量的人! 我们来一起互赞互相提高彼此宝贝的浏览量,从而更快的促进交易! 我打算建个群,我们可以一起交流下哈! 需要的进入QQ群   : 530980712

  6. 闲鱼Flutter&FaaS云端一体化架构

    讲师介绍 国有,闲鱼架构团队负责人.在7月13号落幕的2019年Archsummit峰会上就近一年来闲鱼在Flutter&FaaS一体化项目上的探索和实践进行了分享. 传统Native+Web ...

  7. GIAC2019 演讲精选 | 面向未来的黑科技——UI2CODE闲鱼基于图片生成跨端代码

    一直以来, 如何从‘视觉稿’精确的还原出 对应的UI侧代码 一直是端侧开发同学工作里消耗比较大的部分,一方面这部分的工作 比较确定缺少技术深度,另一方面视觉设计师也需要投入大量的走查时间,有大量无谓的 ...

  8. GMTC2019|闲鱼-基于Flutter的架构演进与创新

    2012年应届毕业加入阿里巴巴,主导了闲鱼基于Flutter的新混合架构,同时推进了Flutter在闲鱼各业务线的落地.未来将持续关注终端技术的演变及趋势 Flutter的优势与挑战 Flutter是 ...

  9. 走近科学,探究阿里闲鱼团队通过数据提升Flutter体验的真相

    背景 闲鱼客户端的flutter页面已经服务上亿级用户,这个时候Flutter页面的用户体验尤其重要,完善Flutter性能稳定性监控体系,可以及早发现线上性能问题,也可以作为用户体验提升的衡量标准. ...

随机推荐

  1. 如何在spring容器开始后,和销毁前,执行一些操作

    转:参考文档:资料链接

  2. ThinPHP命名空间,连接数据库是要修改的配置文件,Model数据模型层,跨控制器调用,如何获取系统常量信息,

    一.命名空间(主要是为了实现自动加载类) *命名空间(相当于虚拟的目录),为了让类有一个统一的文件夹来管理(可以自动加载'类'),每个文件都要有命名空间*tp如何做命名空间:*TP框架下有一个初始命名 ...

  3. sql注入漏洞

    在这么多bug里给我印象最深的就是sql注入漏洞,看上去没有问题的代码却会因为用户的不正常输入而带来极其严重的问题. 现在给大家分享一下如何修复SQL注入漏洞.下面是网上的两种解决方法,其中第二方法有 ...

  4. http之Session&Cookie

    百度了一波session与Cookie,我发现这东西远比我想象中更复杂(可能是因为我不明白底层的运行原理).网上也是一堆的关于Session与Cookie区别/联系的文章,然而,我看完了还是一脸懵逼的 ...

  5. SQLSERVER2012 Audit (审核)功能

    数据库表结构和数据有时会被无意或者恶意,或者需要追踪最近的数据结构变更记录,以往必须通过日志查询,SQL Server2008开始提供了 审核(Audit )功能,SQL2012有所升级,利用它可以实 ...

  6. scanf、printf、gets、puts的应用及区别

    1.scanf()函数 函数scanf()按指定的格式从键盘读取数据,并将其赋给一个或多个变量.例如: scanf(“%d %f”, &x,&rate);  输入多个变量时,scanf ...

  7. 给div加上背景图片

    <div class="panel-body" style="background:url('pages/upload/brief/img/bg.jpg');bac ...

  8. marathon新建应用映射端口限制

    映射端口范围不能使用:1~1024 (除 80 443), 5000~5100, 6000~6999, 10000~20000, 31000~32000 映射端口可能与 Chrome 冲突: 6665 ...

  9. nexus

    下载地址:http://pan.baidu.com/s/1nvwIoa9   (Jfrog/Nexus) maven 仓库: http://mvnrepository.com/ 用户名密码分别是:ad ...

  10. SqlServer数据库空间使用情况常用命令

    --最简单的办法就是使用SSM客户端,报表查看 --查询数据文件的空间情况 dbcc showfilestats --查询日志文件的空间情况 dbcc sqlperf(logspace) --查询te ...