47

手把手教你从零开始做一个好看的 APP

code小生 2017年05月15日 发布于Android mp.weixin.qq.com

做个人app

手把手教你从零开始做一个好看的 APP

2017年05月15日 发布,来源:mp.weixin.qq.com

作者 | developerHaoz

地址 | http://www.jianshu.com/p/8d2d74d6046f

前言:从零开始,手把手带你实现一个「专注睡前的 APP」。睡觉之前如果能有一个 APP,能让我们写一写这一天的见闻或者心得,同时又能看一会段子、瞄一会好看的妹子,放松一下疲惫的身心那该多好,这也是我完成这个 APP 的原因。

本文为这一系列文章的总述,如果觉得篇幅过长,请点击下面的连接

手把手教你从零开始做一个好看的 APP - Day one http://www.jianshu.com/p/c5b12c54c2ba

手把手教你从零开始做一个好看的 APP - Day two http://www.jianshu.com/p/934a6bf274fb

手把手教你从零开始做一个好看的 APP - Day three http://www.jianshu.com/p/b4fde6b835a3 

手把手教你从零开始做一个好看的 APP - Day four http://www.jianshu.com/p/f14fe003ffae

手把手教你从零开始做一个好看的 APP - Day five http://www.jianshu.com/p/de45bc5c75e2

在开始写正文之前,先来一波效果的展示,看看五天过后我们能实现怎样的效果

本次的教程分为 5 天,内容分别为:

  • Day one,准备

    • 功能需求

    • 可行性分析

  • Day two,UI 及公共类的封装

    • 界面的设计及实现

    • 公共类的实现

  • Day three,日记模块

    • 日记的展示

    • 悬浮菜单的实现

    • 日记增删改的实现

  • Day four,妹子模块

    • 图片的获取

    • 图片的展示

    • 详情页面的展示

  • Day five,段子模块

    • 段子数据的获取

    • 段子的显示

1

Day one

俗话说,万事开头难,在开始敲代码之前,先让我们来做一些必要的准备,这样才能事半功倍嘛!

一、功能需求

既然要做一个 APP,那我们首先还是得把 APP 的功能都列出来,有了方向才能更好的努力,因为我想做的是一个专门给睡觉前用的 APP,所以我觉得应该有以下的这些功能

  • 1、日记的增删改

  • 2、显示一些有趣好玩的段子

  • 3、瀑布流展示漂亮的妹子

  • 4、保存日记的内容以及缓存妹子图片

虽然说需求不多,但是却要运用到网络、数据存储、图片缓存、UI 设计等内容,相信整个 APP 完成下来,必定能巩固我们的 Android 基础。

二、可行性分析

我们这个 APP 主要有三个模块,日记模块主要是运用到了数据库的知识,难度不大。但是,段子模块和妹子模块的数据要从哪来,这便是要好好考虑的了。幸好现在是个开源的时代,很多的数据,网上已经开源出来了。

我们先来看一下数据的内容

上面那两段代码分别是段子和妹子模块的 json 类型的数据,我已经将一些没用的字段去掉了。剩下的都是我们想要的数据。可以看到段子数据中,有着段子的内容,以及发布者的头像和名字。而妹子数据中有着图片的 url、id、以及图片的类型。相信有了这么丰富的数据,我们想要完成这个 APP 也是有底气了。

2

 Day two

一、界面的设计及实现

既然我们想要完成一个好看的 APP,那么好看的界面便是必不可少的,这里我强烈推荐 APP 界面的设计必须尽量遵从 Google 提出的 Material Design,在这个推荐一个能够让我们实现 Material Design 变得更加简单的网站 material design palette,我这个 APP 的配色就是用这个网站完成的,贴几张图片,让你感受一下它的强大。

借助这个网站便能让我们完成 APP 的配色以及图标的收集,为下一步功能的实现,先打好了基础,至于界面的设计就仁者见仁智者见智了,篇幅有限,我就不多讲了。

APP 的最终设计效果如下:

二、公共类的实现

因为这个项目有三个模块,有一些东西其实是可以通用的,如果我们先把这些能够通用的东西,封装起来,供给所有的模块调用的话,相信会大大提高我们的开发效率。

1、网络工具类的封装

这个 APP 中,很多地方都要用到网络请求,因此也就很有必要将网络请求封装起来,因为这个 APP 的规模比较小,因此我选择了 Volley 这个网络框架作为我们网络请求库,把网络请求封装起来,哪个地方需要,调用一下就行了。对于网络请求,我觉得每个程序员都该懂点 HTTP,这里附上一篇有关 HTTP 的文章 程序员都该懂点 HTTP http://www.jianshu.com/p/d86b66672ef4

先让我们来写个将网络请求进行回调的接口

然后将网络请求封装起来

2、Json 解析的帮助类

因为我们这个 APP 中,获取到的数据都是 Json 格式的,因此也就有必要将有关的 Json 解析封装成一个工具类,传入一个 String 类型的数据,直接得到数据实体类的 List。

3、HomeActivity(主页面)的封装

主页面我用的是 TabLayout + ViewPager + Fragment,也是现在主流 APP 主页面的显示方式。主界面底部是我们三个模块的图标和名称,通过左右滑动能实现界面的跳转。

底部图标的实体类 CommonTabBean

ViewPager + Fragment 通用的 Adapter

3

 Day Three

关于日记模块的实现,其实我是复用了以前写过的一个日记APP https://github.com/developerHaoz/WatermelonDiaryNew,具体的思路和做法,可以参考我的这篇文章 Android 一款十分简洁、优雅的日记 APP http://www.jianshu.com/p/b4fde6b835a3

4

 Day Four

一、图片的获取

1、根据返回的数据来编写图片的实体类

 

2、图片的展示

可以看到我是用瀑布流的方式来实现图片的展示,效果还不错,但其实实现起来也是很简单的

先写个图片的布局作为 RecyclerView 的 Item

可以看到我在 ImageView 的外面加了一个 CardView,这个一种卡片式布局,能让图片看起来就像一张卡片一样,相当的优雅、美观。

接着编写 Adapter,将数据和界面进行绑定

最后在 Fragment 进行数据的获取,以及布局的初始化就行了

3、详情页面的展示

干巴巴的,整个模块只能显示妹子的图片怎么行呢!!!怎么着也得能查看大图,根据手势放大缩小,以及浏览下一张图片才行嘛,说干就干。

因为图片需要有根据手势来放大缩小的功能,因此我便想到了 PhotoView https://github.com/chrisbanes/PhotoView,这是网上一个大神写的,继承自 ImageView 的一个自定义控件。图片加载我用的是
Glide,如果没了解过这个库的,强烈推荐,一行代码就能搞定图片加载,你确定不研究一下。这里附上一篇有关 Glide 的文章 Glide 一个强大的图片加载框架 http://www.jianshu.com/p/fae51d781987

5

 Day Five

一、段子数据的获取

段子数据的获取其实跟妹子模块的方法基本一样

先编写实体类;写好实体类之后,使用我们之前已经封装好的网络请求工具以及解析工具,便能将返回的数据,解析成一个包含段子实体类的 List。

二、段子的显示

老规矩,先写个 RecyclerView 的 Item

然后编写将数据和界面进行绑定的 Adapter

最后段子页面中进行数据和获取以及界面的初始化

以上便是本文的全部内容,这个 APP 的全部代码我已经分享到 Github https://github.com/developerHaoz/SleepHelper 上了,如果觉得对你有帮助的话,就赏个 star 吧。

code小生

简书:http://www.jianshu.com/u/645342ca3cad

csdn:http://blog.csdn.net/wufeng55

分享技术

程序员不再猿

4.9k 浏览 304 收藏 报告 阅读模式
12 条评论
白鲸 · 2017年05月15日

学习了了。

+2 回复

0

@白鲸 可以关注公众号,里面干货很多

code小生 分享者 · 2017年05月15日
对望亿光年 · 2017年05月19日

谢谢分享!楼主好人!

+1 回复

0

@对望亿光年 ?

code小生 分享者 · 2017年05月19日
teaaa · 2017年05月17日

我要去关注啦

+1 回复

0

@__Shirleyy 支持,也有技术交流群

code小生 分享者 · 2017年05月17日
code小生 分享者 · 2017年05月17日

觉得好,可以关注公众号「code小生」,每天技术干货,并接受您的博客投稿,一起学习!

+1 回复

niunan · 2017年05月17日

支持支持

+1 回复

0

@niunan 感谢,公众号每天都有更新

code小生 分享者 · 2017年05月17日
孙丽 · 2018年04月02日

把几句话那你就

回复

高率航 · 2017年08月23日

话说是什么语言啊。python可不可以

回复

大鹏 · 2017年05月22日

就是做不好看 审美水平是硬伤

回复

载入中...