天天看點

基于Material Design設計的分享文字圖檔的APP

寫在前面:這個項目是自己當時為了準備面試而做的,由于時間匆忙,水準有限,項目多多少少存在一些問題。代碼的整潔性與複用性,以及整體架構的搭建都不盡人意,大家看看裡面的一些效果就好。

Material Design–Google在I/O 2014上推出了新的設計語言,核心設計原則就是隐喻,視覺設計,動畫。引用基友的話就是,遵循使用者體驗來實作一些讓使用者用起來舒适滿意的動畫效果及設計。CSDN,Github,開源中國上出現了許多優秀的Material Design開源項目,各種好看的庫檔案也可以直接拿來用,十分友善。

廢話不多說,直接上效果圖

1.主界面

基于Material Design設計的分享文字圖檔的APP

主界面搭建:

Toolbar + DrawerLayout實作的菜單側滑

PagerSlidingTabStrip+viewpager+fragment實作頁籤左右滑動

RippleEffect實作的點選水波紋效果

RoundImageView實作的圓形頭像

FloatActiconButton懸浮按鈕的實作

參考資料:

<a href="http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html">http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0303/2522.html</a> <a href="http://blog.csdn.net/lmj623565791/article/details/45303349">http://blog.csdn.net/lmj623565791/article/details/45303349</a>

2.滑動變色與下拉縮放

基于Material Design設計的分享文字圖檔的APP

之前一直想用Toolbar與Palette結合來實作,最後還是采用了監聽viewpager的滑動來實作Toolbar的變色

PullToZoomScrollView實作下拉自動放大頭部View

參考資料:

<a href="http://blog.csdn.net/bbld_/article/details/41439715">http://blog.csdn.net/bbld_/article/details/41439715</a> <a href="http://www.jcodecraeer.com/a/opensource/2014/1208/2132.html">http://www.jcodecraeer.com/a/opensource/2014/1208/2132.html</a>

3.頭像上傳

基于Material Design設計的分享文字圖檔的APP

Material Dialog:Google Material 風格Android對話框,靈活友善

<a href="http://www.open-open.com/lib/view/open1415171087340.html">http://www.open-open.com/lib/view/open1415171087340.html</a>

這裡之前一片部落格寫的很清楚,選擇手機相冊與拍照上傳兩種方式

<a href="http://blog.csdn.net/tyk0910/article/details/50236233">http://blog.csdn.net/tyk0910/article/details/50236233</a>

4.修改昵稱

修改完昵稱以後,記得在其他界面重寫onResume()方法來重新整理昵稱與頭像,達到即時更新效果

5.修改密碼

TextInputLayout帶動畫的輸入框,這種效果很好的輸入框真心值得推薦

<a href="http://www.mamicode.com/info-detail-965904.html">http://www.mamicode.com/info-detail-965904.html</a>

6.發送文字

基于Material Design設計的分享文字圖檔的APP

這裡有個小細節就是初始化界面的時候,會自動定位到你目前的位置,然後自動顯示在位址欄。

CircularProgressButton處理耗時的操作的動畫button

<a href="http://blog.csdn.net/hongjinqun/article/details/30221201">http://blog.csdn.net/hongjinqun/article/details/30221201</a> <a href="http://blog.csdn.net/tyk0910/article/details/50146149">http://blog.csdn.net/tyk0910/article/details/50146149</a>

7.發送圖檔

基于Material Design設計的分享文字圖檔的APP

這個算是APP最難處理的地方了,參考了好多網上的資料進行修改整理,最後達到了這種效果。選擇,預覽,删除,上傳,顯示。

8.點選預覽

基于Material Design設計的分享文字圖檔的APP

CollapsingAvatarToolbar 頭像随ListView滾動縮回到ActionBar特效

原本想預覽頁面可以用GridView+ImageView實作,後來看到一篇部落格,用Dialog實作的,友善又輕巧

<a href="http://blog.csdn.net/soul_code/article/details/50448443">http://blog.csdn.net/soul_code/article/details/50448443</a>

9.下拉重新整理與上拉加載

基于Material Design設計的分享文字圖檔的APP

需要注意的是分頁查詢的使用與顯示

Android SwipeRefreshLayout下拉重新整理與上拉加載,之前一片部落格說的很清楚:

<a href="http://blog.csdn.net/tyk0910/article/details/50427531">http://blog.csdn.net/tyk0910/article/details/50427531</a>

10.登入注冊

基于Material Design設計的分享文字圖檔的APP

切換賬号的時候,記得清空緩存再進行登入注冊。

11.伺服器背景

我用的是Bmob後端雲,所有資料都是從上面存儲與讀取的,開發文檔很詳細。這是部分資料截圖

基于Material Design設計的分享文字圖檔的APP
<a href="http://www.bmob.cn/">http://www.bmob.cn/</a>

12.其他技術

圖檔的上傳,下載下傳,緩存,我用的是Universal-Image-Loader來異步加載網絡圖檔:

<a href="http://blog.csdn.net/tyk0910/article/details/50375070">http://blog.csdn.net/tyk0910/article/details/50375070</a>

回調的使用:

<a href="http://blog.csdn.net/tyk0910/article/details/50564917">http://blog.csdn.net/tyk0910/article/details/50564917</a>

其他就是資料的顯示,更新,存儲,讀取,按照開發文檔以及業務邏輯就行

最後就是貼一下使用的庫檔案以及jar包:

基于Material Design設計的分享文字圖檔的APP
基于Material Design設計的分享文字圖檔的APP

繼續閱讀