近日读《Spring MVC 学习指南》,对 Spring MVC 有了更深一些的了解。
主要包含以下几个方面:Spring MVC 框架、模式2和 MVC 模式、Spring MVC 介绍、基于注解的控制器、数据绑定和表单标签库、转换器和格式化、验证器、表达式语言、JSTL、国际化、上传文件、下载文件。
希望本图对你有所帮助。源图连接地址:https://www.processon.com/view/5c541629e4b048f108e44c20
]]>近日,读《Effective JavaScript-编写高质量 JavaScript 代码的68个有效方法》,感觉很实用很不错,特整理出书中的68个方法的思维导图。
脑图如下:
原版在 ProcessOn 上创作,需要原版思维脑图请访问:https://www.processon.com/view/link/5c5464fbe4b0fa03cead9989
ProcessOn 注册地址:https://www.processon.com/i/5467870be4b054d6db9d9ad8
本文地址 http://94275.cn/2019/02/01/Effective-JavaScript/ 作者为 Zhenguo
微信小程序目前仅支持分享给好友,暂不支持直接分享到朋友圈。针对分享到朋友圈这个问题,通常的做法是生成一张海报图片然后把图片分享到朋友圈。朋友圈到我们的小程序,通过长按图片识别图中小程序码实现。
本代码库是微信小程序的一个每日分享案例。每天会中英文美句,推荐给大家,可以点击保存图片到本地,然后分享到朋友圈(小程序暂不支持直接分享到朋友圈)。主要用到的技术点就是 canvas 画图。
欢迎微信扫码体验,有任何问题可以提意见反馈。谢谢!
效果图如下:
如果对小程序不太了解的话,可以先看我的小程序入门介绍:http://ihongqiqu.com/2018/01/10/weixin-app/
本小程序开发中,逻辑并不复杂。相对难处理一点就是中英文换行的问题。针对中英文换行的问题,我实现了一下换行逻辑,代码如下:
1 | /** |
上面方法是把字符串处理为字符串数组,数组每个值代表一行,这里是换行核心逻辑,但不是全部逻辑,全部逻辑见核心代码调用。
核心的 canvas 画图逻辑代码如下:
1 | drawShare: function (imgPath, sRes) { |
有任何问题欢迎留言反馈。
本文地址 http://94275.cn/2018/11/19/wxminiapp-canvas/ 作者为 Zhenguo
本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。
Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔,等到实际需要的时候再异步加载。通过 loader 的转换,任何形式的资源都可以视作模块,比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。
Webpack4 将命令行相关抽离到 webpack-cli 中,所以要使用 webpack 也要安装 webpack-cli。
1 | npm install webpack webpack-cli webpack-dev-server -g |
webpack 最核心的概念主要有以下四个:
entry 指定 weipack 应该使用哪个模块来作为构建内部依赖的开始。多页面应用也在这里配置。
webpack.config.js 的 entry 配置示例如下:
1 | var path = require('path'); |
output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。
webpack.config.js 的 output 配置示例如下:
1 | var path = require('path'); |
loader 用于对模块的源代码进行转换。loader 可以使你在 import 或”加载”模块时预处理文件。因此,loader 类似于其他构建工具中“任务(task)”,并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言(如 TypeScript)转换为 JavaScript,或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件!
常用的 loader 有 style、css、url、html等。安装插件命令如下:
1 | npm install --save-dev css-loader style-loader |
webpack.config.js 的 loader 配置示例如下:
1 | module.exports = { |
插件是 webpack 的支柱功能。webpack 自身也是构建于,你在 webpack 配置中用到的相同的插件系统之上!插件目的在于解决 loader 无法实现的其他事。
webpack.config.js 的 plugins 的配置示例如下:
1 | const HtmlWebpackPlugin = require("html-webpack-plugin"); |
webpack 主要解决了组件封装,规范测试打包上线流程,把很多需要手动处理和配置的工作工具化,给我们提供极大便利。wepack 并不复杂,熟悉核心的概念就能打造出符合我们要求的脚本。
webpack 官方文档地址:https://webpack.js.org/
webpack 中文文档地址:https://webpack.css88.com/
不需重复开发,H5拿来就能用
话不说,直接看图:
图片来自ProcessOn,脑图链接:https://www.processon.com/view/5b4eaf41e4b0f8477d878109
本文地址 http://94275.cn/2018/08/27/weixin-mini-app-api/ 作者为 Zhenguo
话不多说,直接上脑图
图片来自ProcessOn,脑图链接:https://www.processon.com/view/5b4eaf41e4b0f8477d878109
本文地址 http://94275.cn/2018/08/21/wexin-mini-component/ 作者为 Zhenguo
https://www.processon.com/diagraming/5ad46af0e4b0518eacb413f8
]]>微信小程序提供了页面模板支持,很大程度解决了页面布局复用的问题。
官方说明
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
小程序的模板并不难,下面整理了一些基本流程,方便快速上手小程序页面模板。
建议新建目录专门放置模板。本文在pages目录下创建了template目录。
在template目录下创建模板布局文件msg.wxml:
1 | !-- |
上面代码中template表现的name是模板的id;
创建模板样式,建议和模板布局放到相同目录;
在template目录下的模板样式文件msg.wxss:
1 | .msgBg { |
在需要应用模板的地方添加引用:
1 | <!--引入模板--> |
在需要使用模板的地方添加引用代码:
1 | <!-- 使用模板 --> |
完成的业务引用代码如下(index.wxml):
1 | <!--引入模板--> |
is是模板id,data负责传值;data传值使用ES6展开运算符”…”,那么就不需要在模板里面添加item.XXX了。
模板样式也需要添加引用,在引用方的样式代码中添加引用代码如下:
1 | /**引入模板的样式**/ |
完成的样式引用代码如下(index.wxss):
1 | /**引入模板的样式**/ |
通过以上四个步骤,模板布局和样式都有了,剩下的就是如何复制和展示数据了。 代码如下(index.js):
1 | //index.js |
官方介绍地址:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html
本文地址 http://94275.cn/2018/04/09/wxminiapp-template/ 作者为 Zhenguo
微信小程序因其“小”和“轻”,以及微信爸爸的用户量,受到了大家的青睐。下面总结了,我在开发微信小程序的过程中,踩过的坑。希望能够帮助更多的人。
微信小程序中所有网络通信域名,首先都需要在工信部备案,其次都需要在小程序后台添加合法域名。域名主要有四类:request域名、socket域名、upload域名、download域名;其次,在修改次数上也有限制。下面详细说。
这个问题主要针对使用web-view组件的情况。web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
web-view中需要加载的所有域名都需要在微信小程序后台配置。
正确的打开方式是:
如果我们需要在web-view中显示的是一些单页面,这没有什么问题。但是,如果使用了复合页面,涉及到很多页面跳转,那就麻烦了。所有涉及跳转的域名都需要业务域名校验,对是所有的业务域名。如果跳转到三方域名,或者很多外链,添加业务域名校验文件就是很大的难题。
这可能也是微信故意这样设计,微信不推荐使用web-view做很重的业务,这个符合微信小程序的小而轻原则。
功能 | 功能介绍 | 次数 |
---|---|---|
小程序头像 | 小程序的logo | 5次/月 |
介绍 | 小程序的介绍信息 | 5次/月 |
服务类目 | 小程序的分类(类目) | 3次/月 |
服务器域名 | 小程序访问的接口域名 | 5次/月 |
业务域名 | H5页面的域名 | 50次/年 |
限制 | 介绍 | 数量 |
---|---|---|
服务器域名 | 主要包括:request、socket、upload、download | 20个 * 4 |
小程序业务域名 | 小程序可以配置的H5页面的域名 | 20个 |
单业务域名 | 每个域名最多可以添加小程序校验文件的数量 | 20个 |
本文地址 http://94275.cn/2018/04/04/wx-mini-app-bug/ 作者为 Zhenguo
微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验。
访问 https://mp.weixin.qq.com/wxopen/waregister?action=step1 根据提示完成注册账号。注册完成后,登陆 https://mp.weixin.qq.com ,在设置-开发设置中可以找到小程序 AppID。
微信小程序开发工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201818
开发工具详细介绍见:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.html?t=201818
打开微信开发者工具,登录后点击右下角”+”按钮,进入如下界面:
选择项目目录,填写刚刚申请的 AppID 和x项目名称。并选中”建立普通快速启动模板”。点击创建,Hello World就创建出来了。
项目目录结构如图:
app.json 是对当前小程序的全局配置,包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
例子:
1 | { |
pages 和 window 介绍:
类似网页编程的HTML,代码如下:
1 | <!--index.wxml--> |
从上面代码可以看出,代码风格很像HTML,同时也有自己的语法如wx:if和wx:else。更多语法请参考 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/ 。
WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些扩充和修改。示例代码如下:
1 | /**index.wxss**/ |
更多详细请参考 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html
和用户交互需要使用 JavaScript 来实现。我们常见的网络请求,事件处理等都有 JavaScript 来处理。关于 JavaScript 这里不做介绍了。
如果开发中需要预览和测试,微信需要添加相应的权限。添加预览入口:小程序管理后台 - 用户身份 – 成员管理。
添加不会推送告知被添加者。添加成功之后,使用被添加者的微信,扫描微信开发工具生成的预览二维码就可以看到开发的微信小程序了。
开发完成,通过点击微信开发者工具右上角的上传,可以上传到小程序管理后台。在开发管理中可以找到提交的版本。这个时候的版本还是预览版本,通过扫描二维码,可以让添加权限的微信用户体验。
如果测试确认没问题可以上线,点击管理后台-开发管理中的提交审核。提交审核,第一个版本审核时间可能会有几天,之后审核时间会缩短大概一天左右。
审核通过之后,管理员会收到微信推送。这个时候,我们的小程序还没有上线,我们可以再后天点击发布按钮来控制什么时间发布。
官方例子 | 我的例子 |
---|---|
源码地址:https://github.com/jingle1267/demo | 源码地址:https://github.com/jingle1267/HelloCodeDev |
这几年,国内一些对历史毫无了解的年轻人动辄喜欢拿毛主席说事,可看看仇视红色中国的美国人是怎么评价毛泽东的:
是谁能把一个贫瘠的国家,在短短几年的时间里,迅速崛起于世界强国的行列?事实上我记得美国以前有一位总统乔治·华盛顿。他以贫弱的美国北方军,经过多年苦战打败了先进的南方殖民军。使得美国获得了统一与和平。但是,在东方的一个大国,中国,同样出现了一位优秀的领导者:毛泽东先生。正是他领导着他的人民,在贫困,饥饿,压力下却取得了远远超越乔治·华盛顿的伟大成就…1949年,中国在毛先生领导下建立了红色政权,同时也揭开了中国人觉醒的时代。
1950年我们可爱的总统大人,他觉得北韩十分不听话,同时他更加厌恶新生的红色中国,为了灭绝赤祸,他决心先打掉北韩,从而占领亚洲大陆一端,再谋求最终消灭赤色中国。随即他调兵遣将, 以联合国安理会的名义,18国集团为核心,总计出兵51万3千 人。坦克2400辆。战机4000架。各型火炮5万门同时动用了原美国海军第1,2, 3,7四只舰队,排山倒海的杀向北韩。在他看来,这样现代化的庞大战斗集群,任何一个国家,哪怕是当时的苏联也不敢与之交手。然而,他似乎忘记了,那位毛先生伟大的军事战略胆量。毛在前苏联犹豫迟疑下,悍然单方面出兵抗击美国联军。于是一场惊人的战争就此爆发了。
100万中国士兵,在没有远程炮火支援,没有空中火力掩护,没有地面装甲集群突击的情况下,依靠着最原始的卡宾枪(冲锋枪),手雷。打败了强大的美国联军。这也是人类历史上,首次开创了一个国家单独击败了世界力量的先例。但是,中国人也遭受了525000人的惨烈伤亡。但是对于一个几年前还被日本军队肆意侵略蹂躏的国家,在短短几年后,突然间打败了世界上当时最强军事同盟“北大西洋公约组织”的奇迹除了毛先生敢于创造, 任何人都不可能做到。 美国就这样丢下了113000名阵亡士兵,带着84000名伤员,以及换回来的45000名被俘人员迈着沉重的脚步,蹒跚的回到了自己的老家。
前苏联的伟大人物赫鲁晓夫先生,上台后,他觉得中共的毛太不懂得什么叫尊重苏联,竟敢违背他的指令。因此,他发动了一 场更加荒谬的战役——中苏珍宝岛战役。苏军以远东集团军的1个坦克旅,3个摩托化步兵团,总计约20000人在没有事先警告的情况下对中国采取了军事行动。而中国当时最强的主战坦克T59 型也就是前苏联的T54A。战斗全重只有36吨。如果与前苏联最新的T62型坦克对比, 可以说对方无需开火,使用自身就可以将T59 撞翻。 毛先生在接到边防军告警电报后, 他做出了最快决定:打!就把他打疼!结果苏联人丢下了约1个团的装备以及成批尸体气恼的回家去了。 赫鲁晓夫接到失败的电报后,召开了紧急军事会议,先后撤职了隶属于苏联远东集团军1位元帅(坦克装甲诸兵种元帅),3名大将,四名上将,24名中将、少将。抓捕了远东红旗134师(主力师)营级以上全部军事主官。
在毛先生对外战争历史中,还有一场值得提起,那就是中印边界之战:麦克马洪线。 印度为了夺取那块不毛之地,与中国军队公然交手。其实在印度背后有输了韩战无处撒气的华盛顿,有丢了珍宝岛满脸怒火的克里姆林宫。有祈求可以捞足好处的大英帝国等等。他们几乎出现了前所未有的合作! 苏联低价贷款给印度尼赫鲁,装备了7个印度陆军师。华盛顿给了尼赫鲁大批战备物资。英国把自己的那些老式火炮都给了印度。一时间印度成了当时世界两大集团的宠儿。 但是,短短的30天时间,印度军队全军溃败。当时在第2师作战术指挥教导的洛克.弗菲希尔准将说:你见过非洲的斑马群奔跑吗?但是不如印度军队溃逃更加壮观。 8940名印度军人葬身山谷,1370名士兵被俘,1名准将被击毙,亚洲第一旅:“锡克”旅完了。英国全资资助“廓尔柯”营完了。而毛先生在他的官邸中南海,战前就曾说:不管你是印苏联军,还是美印联军,即便是再来一次八国联军我们中国也要与你们打!打出一个真理来。 毛先生的英明是前所未有的。中国拿回来了土地,消灭了印度联军,打败了美国与苏联的再一次的恐吓,这就是毛先生。
毛先生一贯坚持自力更生,也是由于他的如此英明,中国建立了自己的核武器工业。制造远程洲际导弹。可是今天的中国人,是不是还都记得我们这位罕见的民族伟人呢? ……看过之后让人肃然起敬!让我们一起动手,把这篇文章传播出去了,让我们的后代,永远记得这位伟人! 喜欢的就转一下,至少我很愿意再看一遍。
12月26日毛先生的生日,中国人的圣诞节!
]]>LiveData 是一个数据持有者类,它持有一个值并允许观察该值。不同于普通的可观察者,LiveData 遵守应用程序组件的生命周期,以便 Observer 可以指定一个其应该遵守的 Lifecycle。
LiveData实现了对数据的监听,利用这点,我们可以更好的实现获取数据和数据展示解耦。本文着重讲解数据更新和更新UI逻辑分离,LiveData的LifeCycle特性暂不做介绍。
下文用一个简单的例子来介绍如何实现数据更新和UI展示解耦,实现逻辑分离。
UI展示逻辑代码如下:
1 | private MutableLiveData<String> username; |
上面代码对应的布局文件代码如下:
1 | <?xml version="1.0" encoding="utf-8"?> |
从上面代码可以发现,除了基本的初始化操作、设置监听,只剩下UI赋值逻辑。
主线程更新数据代码(点击id为tv_change_username的按钮执行下面的方法):
1 | /** |
子线程更新数据代码如下(点击id为tv_change_username_background的按钮执行下面这个方法):
1 | /** |
从上面同步和异步两个方法,可以发现这里只有对数据的更新逻辑,没有任何UI更新的逻辑。
例子很简单,通过使用LiveData,我们实现了业务逻辑和UI更新逻辑分离。通过使用LiveData可以使我们的架构设计更加合理,职责分工更加明确。从小的方面来看,实现了解耦代码分离,从大的方面说,这会改变应用架构设计。
参考地址:https://developer.android.com/topic/libraries/architecture/livedata.html
源码地址:https://github.com/jingle1267/AndroidArchitectureComponets
本文地址 http://94275.cn/2017/12/14/Android-LiveData/ 作者为 Zhenguo
LifeCycle 架构设计一大利器,旨在减少Activity和Fragment中代码,简化Activity和Fragment职责,实现功能代码分离,达到解耦的目的。
官方解释:
Lifecycle-aware components perform actions in response to a change in the lifecycle status of another component, such as activities and fragments. These components help you produce better-organized, and often lighter-weight code, that is easier to maintain.
译文:Lifecycle-aware 组件感知Activity和Fragment的周明周期,并能响应个生命周期状态。这个组件有助于产生更有序、更轻和更易维护的代码。
LifeCycle作用主要是针对开发中遇到的一些痛点,它的优点也是基于现有的痛点,主要以下有点:
没有LifeCycle组件的时候,我们实现一个定位功能通常会如下实现:
主程序代码如下:
1 | /** |
定位逻辑实现如下:
1 | public class LocationListener { |
从上面的代码,可以发现,实现一个定位,我们需要在activity和fragment处理打开定位和关闭定位。这只是一个定位,在现实开发中,我们会有统计等很多类似的功能,这样我们的activity和fragment代码会变得臃肿,且代码不易复用。
在我们使用LifeCycle之后,主程序如下:
1 | public class LifeCycleActivity extends AppCompatActivity { |
定位逻辑如下:
1 | /** |
显而易见,现在调用程序只需一行代码,简化了调用方的代码,调用方不需要关心生命周期的处理逻辑,这部分逻辑转移到具体的业务实现方,实现高内聚和低耦合。
官方地址:https://developer.android.com/topic/libraries/architecture/lifecycle.html
源码地址:https://github.com/jingle1267/AndroidArchitectureComponets
最近开发了一个APP,虽然是一个小APP,但是麻雀虽小五脏俱全。以下简单介绍一下用到的开源组件。
自从用上Butter Knife,再也不用findViewById这种代码了。Android界JakeWharton大神出品,必属精品,强烈推荐使用。
Github地址:https://github.com/JakeWharton/butterknife
使用文档:http://jakewharton.github.io/butterknife/
自从使用了Lombok,实体类告别了大段大段的set/get方法。简简单单的一行注解,告别成百上千行的实体类。
Github地址:https://github.com/rzwitserloot/lombok
视频演示地址:https://projectlombok.org/
接入文档:https://projectlombok.org/setup/android
开发过程中,工具类必不可少。自从用了android-utils,大大方便了开发,节省了自己开发时间。
Github地址:https://github.com/jingle1267/android-utils
Realm为移动设备而生!替代 SQLite 和 Core Data。为你省下数周的时间和数千行的代码,帮你创造出更棒的用户体验。
Github地址:https://github.com/realm/realm-java
使用文档:https://realm.io/cn/docs/java/latest/
基于retrofit和okhttp封装的网络库,用户不需要了解网络底层实现,通过简单的设置就能实现网络请求。
Github地址:https://github.com/jingle1267/AndroidRequest
RxAndroid是RxJava的扩展, 可以优雅地处理异步请求。很好很强大!
GitHub 地址:https://github.com/ReactiveX/RxAndroid
支持下拉刷新和上拉加载的RefreshLayout,自带越界回弹效果,支持RecyclerView,AbsListView,ScrollView,WebView。
Github地址:https://github.com/lcodecorex/TwinklingRefreshLayout
Google推荐的图片加载库,专注于流畅的滚动。
Github地址:https://github.com/bumptech/glide
类似微信的右滑关闭页面,本开源库支持右滑、左滑、上滑手势
Github地址:https://github.com/ikew0ng/SwipeBackLayout
一个设计良好的本地图片/视频文件选择库,支持不同的图片加载方式。知乎出品,也是精品。
Github地址:https://github.com/zhihu/Matisse
圆形图片,边框等,简单易用。
Github地址:https://github.com/hdodenhof/CircleImageView
Tab切换通用样式。
Github地址:https://github.com/H07000223/FlycoTabLayout
仿iOS的Tag切换效果。
Github地址:https://github.com/7heaven/SHSegmentControl
谷歌官方流式布局,功能强大。
Github地址:https://github.com/google/flexbox-layout
Album是一个MD风格的开源相册,支持国际化,支持国际化扩展;主要功能模块:选择图片与视频、拍照、录视频、画廊。
Github地址:https://github.com/yanzhenjie/Album
日历选择控件,代码简洁。自定义日历控件 支持左右无限滑动 周月切换 标记日期显示 自定义显示效果跳转到指定日期。
Github地址:https://github.com/MagicMashRoom/SuperCalendar
带动画效果的步骤控件。
Github地址:https://github.com/fython/MaterialStepperView
本文地址 http://94275.cn/2017/11/29/Common-Android-Open-Source-Project/ 作者为 Zhenguo
RxJava is a Java VM implementation of Reactive Extensions: a library for composing asynchronous and event-based programs by using observable sequences.
翻译:一个在 Java VM 上使用可观测的序列来组成异步的、基于事件的程序的库。RxJava官方地址:https://github.com/ReactiveX/RxJava
RxJava近两年来越来越流行,越来越收到广大开发者青睐,肯定它有哪些魔力。这魔力解决了开发者开发过程中的某些痛点,结合对RxJava的理解,你会发现,其实它解决的是异步的问题。
RxJava是如何解决异步处理的问题的呢?开发中异步的主要场景时,耗时操作需要放到单独线程中,异步任务执行成功之后,在主线程中执行更新UI等其它操作。
使用RxJava之后,通过简单设置,就可以实现执行线程的切换,开发者只需要关心具体的逻辑,不用太多关心那个线程的问题。
下面举一个异步下载图片,主线程更新显示出来的例子(例子用Android实现):
1 | String url = "https://avatars2.githubusercontent.com/u/3887795?v=2&s=60"; |
以上代码,下载图片逻辑和展示逻辑完全分离,实现逻辑分离。这只是一个Hello World例子,RxJava很有很多炫酷的功能期待你去解锁。
本文地址 http://94275.cn/2017/10/16/RxJava-Hello-World/ 作者为 Zhenguo
要点:本文主要写使用 BottomNavigationView 和遇到的一些问题的解决办法
作为谷歌 Material Design Components 新控件 BottomNavigationView, 提供应用底部导航栏的实现。没有这个控件之前,Android 底部导航栏一般通过 LinearLayout 包裹几个 Button 或使用 RadioGroup 和 RadioButton 来实现。使用 BottomNavigationView 这个控件,可以提供更好的用户体验和开发更容易。此文主要介绍在使用 BottomNavigationView 过程中遇到的几个问题。
这个没有什么好说的
1 | compile 'com.android.support:design:25.0.0' |
布局分两个部分,首先是总的布局:
1 | <android.support.design.widget.BottomNavigationView |
其次,配置导航项。在 res 的 menu 目录下创建上面代码中 app:menu=”@menu/bottom_menu” 要引用到的文件:
1 | <?xml version="1.0" encoding="utf-8"?> |
主要是点击事件的处理,代码如下:
1 | navigation = (BottomNavigationView) findViewById(R.id.navigation); |
通过以上的代码,我们的代码就能运行起来,效果图如下::
很快你会发现,接入简单,但是真正符合我们的设计要求,我们还需要捣腾捣腾。
下面列举一下我遇到的问题:
当我们自定义默认和选中图之后,选中的效果图变色了
问题来了,我们怎么解决呢?
针对第一个问题,在网上查资料后,发现是 mShiftingMode 的问题,默认是开启的且谷歌没有开放修改接口。既然谷歌不给修改接口,那么我们就硬来,用反射来解决。实现代码如下:
1 | BottomNavigationViewHelper.disableShiftMode(navigation); |
BottomNavigationViewHelper 代码如下:
1 | public class BottomNavigationViewHelper { |
针对第二个问题,各种谷歌百度后,发现是控件默认着色器的问题。知道问题所在,解决起来就简单了。只需一行代码禁 tint 就好了
1 | navigation.setItemIconTintList(null); |
默认和选中文字的颜色,只需要添加颜色 selector 就可以了
1 | app:itemTextColor="@color/tab_home" |
另外,BottomNavigationView 支持的导航项数量是3-5个。
谷歌 BottomNavigationView 效果是挺好的,使用很方便,特效也很不错,唯一不足就是接口不太友善。总的来说,这个控件使用容易且效果很赞,建议使用。
本文地址 http://94275.cn/2017/06/14/BottomNavigationView/ 作者为 Zhenguo