-
1 # 精彩短片段
-
2 # Ghastwa
從零開始,手把手帶你實現一個「專注睡前的 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
最後段子頁面中進行資料和獲取以及介面的初始化
回覆列表
可以從三個開發軟體瞭解學習來完成。
一:Appmakr
AppMakr是一個可以讓你在幾分鐘之內建立應用程式的一種服務,無需編碼能力。使用該工具,你可以建立iPhone和Android應用。還有一些可供選擇的功能,包括將網站連線到你的應用程式、HTML5功能、推送通知和廣告支援。透過AppMaker賬戶,你可以建立無限數量的應用程式。
目前Appmakr是國外比較流行的應用生成工具,在國內也享有一定知名度。
二:AppCan
AppCan屬於移動應用開發平臺,應用引擎支援Hybrid App的開發和執行。並且著重解決了基於HTML5的移動應用目前"不流暢"和"體驗差"的問題。使用AppCan應用引擎提供的Native互動能力,可以讓HTML5開發的移動應用基本接近Native App的體驗。
與Phonegap支援單一webview使用div為單位開發移動應用不同。AppCan支援多視窗機制,讓開發者可以像最傳統的網頁開發一樣,透過頁面連結的方式靈活的開發移動應用。基於這種機制,開發者可以開發出大型的移動應用,而不是隻能開發簡易型別的移動應用。
三:appBook
appBook平臺是多平臺移動應用製作工具,可以廣泛用於書籍製作,個人雜誌發行,宣傳手冊,支援iPad、iPhone、Andriod等平臺,不支援pc平臺。真正做到了一次編譯多平臺釋出。目前appbook平臺有:iebook平臺、及、appbook應用製作平臺.