1. 程式人生 > >基於Material Design設計的分享文字圖片的APP

基於Material Design設計的分享文字圖片的APP

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

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

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

1.主介面
這裡寫圖片描述

主介面搭建:
Toolbar + DrawerLayout實現的選單側滑
PagerSlidingTabStrip+viewpager+fragment實現選項卡左右滑動
RippleEffect實現的點選水波紋效果
RoundImageView實現的圓形頭像
FloatActiconButton懸浮按鈕的實現
參考資料:

2.滑動變色與下拉縮放

這裡寫圖片描述

之前一直想用Toolbar與Palette結合來實現,最後還是採用了監聽viewpager的滑動來實現Toolbar的變色
PullToZoomScrollView實現下拉自動放大頭部View
參考資料:

3.頭像上傳
這裡寫圖片描述

4.修改暱稱
這裡寫圖片描述

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

5.修改密碼
這裡寫圖片描述

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

6.傳送文字
這裡寫圖片描述

這裡有個小細節就是初始化介面的時候,會自動定位到你當前的位置,然後自動顯示在位址列。
CircularProgressButton處理耗時的操作的動畫button
參考資料:

7.傳送圖片

這裡寫圖片描述

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

8.點選預覽

這裡寫圖片描述

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

9.下拉重新整理與上拉載入
這裡寫圖片描述

需要注意的是分頁查詢的使用與顯示
Android SwipeRefreshLayout下拉重新整理與上拉載入,之前一片部落格說的很清楚:

10.登入註冊
這裡寫圖片描述

切換賬號的時候,記得清空快取再進行登入註冊。

11.伺服器後臺

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


參考資料:

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

最後就是貼一下使用的庫檔案以及jar包:
這裡寫圖片描述

這裡寫圖片描述