如何開發一款手機軟件？

從零開始，手把手帶你實現一個「專注睡前的 APP」。睡覺之前如果能有一個 APP，能讓我們寫一寫這一天的見聞或者心得，同時又能看一會段子、瞄一會好看的妹子，放松一下疲憊的身心那該多好，這也是我完成這個 APP 的原因。APP 的全部代碼我已經分享到 Github 上了，需要的直接 點擊這里，如果喜歡的話，麻煩給個贊，謝謝啦。

在開始寫正文之前，先來一波效果的展示，看看五天過后我們能實現怎樣的效果

本次的教程分為 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。

先讓我們來寫個將網絡請求進行回調的接口

然后將網絡請求封裝起來

2、Json 解析的幫助類

因為我們這個 APP 中，獲取到的數據都是 Json 格式的，因此也就有必要將有關的 Json 解析封裝成一個工具類，傳入一個 String 類型的數據，直接得到數據實體類的 List。

3、HomeActivity（主頁面）的封裝

主頁面我用的是 TabLayout + ViewPager + Fragment，也是現在主流 APP 主頁面的顯示方式。主界面底部是我們三個模塊的圖標和名稱，通過左右滑動能實現界面的跳轉。

底部圖標的實體類 CommonTabBean

ViewPager + Fragment 通用的 Adapter

Day three

關于日記模塊的實現，其實我是復用了以前寫過的一個日記 APP，具體的思路和做法，可以參考我的這篇文章 Android 一款十分簡潔、優雅的日記 APP

Day four

一、圖片的獲取

1、根據返回的數據來編寫圖片的實體類

2、圖片的展示

可以看到我是用瀑布流的方式來實現圖片的展示，效果還不錯，但其實實現起來也是很簡單的

先寫個圖片的布局作為 RecyclerView 的 Item

可以看到我在 ImageView 的外面加了一個 CardView，這個一種卡片式布局，能讓圖片看起來就像一張卡片一樣，相當的優雅、美觀。

接著編寫 Adapter，將數據和界面進行綁定

最后在 Fragment 進行數據的獲取，以及布局的初始化就行了

3、詳情頁面的展示

干巴巴的，整個模塊只能顯示妹子的圖片怎么行呢！！！怎么著也得能查看大圖，根據手勢放大縮小，以及瀏覽下一張圖片才行嘛，說干就干。

因為圖片需要有根據手勢來放大縮小的功能，因此我便想到了 PhotoView，這是網上一個大神寫的，繼承自 ImageView 的一個自定義控件。圖片加載我用的是

Glide，如果沒了解過這個庫的，強烈推薦，一行代碼就能搞定圖片加載，你確定不研究一下。

Day five

一、段子數據的獲取

段子數據的獲取其實跟妹子模塊的方法基本一樣

先編寫實體類

寫好實體類之后，使用我們之前已經封裝好的網絡請求工具以及解析工具，便能將返回的數據，解析成一個包含段子實體類的 List。

二、段子的顯示

老規矩，先寫個 RecyclerView 的 Item

然后編寫將數據和界面進行綁定的 Adapter

最后段子頁面中進行數據和獲取以及界面的初始化