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

前言：从零开始，手把手带你实现一个「专注睡前的 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，段子模块

段子数据的获取
段子的显示

Day one

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

一、功能需求

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

1、日记的增删改
2、显示一些有趣好玩的段子
3、瀑布流展示漂亮的妹子
4、保存日记的内容以及缓存妹子图片

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

二、可行性分析

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

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

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

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

Day Three

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

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

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

分享技术

程序员不再猿

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