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

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

 

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

PS ：有兴趣的加入Android工程师交流QQ群：752016839 主要针对Android开发人员提升自己，突破瓶颈，相信你来学习，会有提升和收获。

手把手教你从零开始做一个好看的 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

 

 

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

 

 

 

以上便是本文的全部内容