tags: APP Android 作品集
專案管理
- GitHub：https://github.com/SpicyBoyd/CoastLineApp 🔗
- APK 安裝檔：https://drive.google.com/open?id=1PRLoA4AON2xTuqcM9O8r038pdaEixF0M 🔗
概念、啟發
- 2015及2016年有到海線車站附近景點旅遊，出去玩之前做了很多功課、查了很多資料，但還是很多景點、風景和美食沒有享受到。
- 因此製作了一個APP方便自己，未來再次造訪海線車站時，不用花很多時間做功課、上網查資料，只要點開自己做的APP就知道哪裡有好玩、好吃的。
架構圖 與 各頁面介紹
app 架構圖
頁面介紹
- 歡迎畫面：只是個進入app的圖片，數秒跳轉主畫面
- 主畫面：兩個button，分為苗栗、台中
- 苗栗地區、台中地區：車站地圖、車站的選擇器
- 各車站fragment
- 將所有車站集中在一個畫面，用滑動的方式換車站分頁，方便查詢
- 將各車站的景點整理再一個分頁中，每個景點都是一個button
- 照片：用卡片的方式列出各景點的照片
- 資訊：描述各景點的資訊
- 美食
- 用 list 的方式列出各個美食
- 用連結網站的方式，顯示美食資訊
- 美食資訊：上方為美食照片的輪播，下方為美食資訊的介紹
使用 Android Studio 的技術、語法
前端
-
畫面架構相同的 Activity 或 Fragment 共用同一個 Layout，
並透過後端 Java 設定不同的資料進 Activity 或 Fragment (例如：text, image) -
Layout
- LinearLayout
- RelativeLayout
- FrameLayout
- CoordinatorLayout
- DrawerLayout
- TabLayout
- CollapsingToolbarLayout
- AppBarLayout
-
View
- ImageView
- TextView
- NavigationView
- RecyclerView
- CardView
- WebView
-
Button
- Button
- ImageButton
- FloatingActionButton
-
其他元件
- Toolbar
- ViewPager
- NumberPicker
後端
- 架構
- Activity
- Adapter：包含 RecyclerView, ViewPager 的 Adapter
- Entity：get, set
- Fragment
- Util
- Java
- Toast
- Handler
- Intent：Activity 跳轉, 開啟 Google Map
- Bundle
- getResources()：將資料統一集中在 res 資料夾下，例如：strings, array
- 各種 Listener
- LayoutInflater
- Bitmap, BitmapFactory, InputStream：優化圖片載入過程
- Firebase
Resource
- drawble：使用 官方提供的 icon 🔗
- values：
- style：NoActionBar
- array, strings：集中管理字串 type 的資料
其他技術
- Adobe Photoshop
遇到的困難 與 解決方法
Q1. 過多圖片載入時，造成 OOM (OutOfMemoryError)
- 透過 Bitmap, BitmapFactory, InputStream 的設定，減少記憶體的使用
Q2. 漢堡選單加入主畫面的選項時，會重複 create 主畫面的 Activity
- 透過更改 Activity 的 Launch Mode，改為
singleTask
Q3. 用程式碼做出來的圖片圓角不符合需求
- 改用 Adobe Photoshop 製作圖片的圓角
Q4. 選擇車站後跳轉到各車站景點的 Activity，卻未顯示對應的車站分頁
- 將 numberPicker 選擇的車站資訊裝在 Intent 中送到下個 Activity
- 在下個 Activity 初始化的過程中，接收上個 Activity 傳送過來的資訊，給 ViewPager 和 TabLayout 進行分頁的設定
其他想法 與 擴充性
- 記錄自己去過哪些地方、上傳自己的照片到雲端
- 分享該車站的旅遊部落格文章
- 資料著作權問題
執行畫面
| 說明 | 畫面 |
|---|---|
| Launcher Icon |  |
| 歡迎畫面 數秒跳轉主畫面 |
 |
| 主畫面 選擇區域 |
 |
| 車站選單 |  |
| 景點選單 各車站分頁&各景點 |
 |
| 景點 照片、資訊、美食分頁 導航按鈕，開啟google map |
 |
| 美食介紹 導航按鈕，開啟google map |
 |
| 漢堡選單 |  |
| Firebase |  |
參考資料、模板
- 海線車站圖：http://blog.udn.com/0936331038/54210541 🔗
- Android開發——解決載入大圖片時記憶體溢出的問題
http://fecbob.pixnet.net/blog/post/35704721-android開發——解決載入大圖片時記憶體溢出 🔗 - 官方 icon：https://material.io/icons/ 🔗
- 輪播作法：https://blog.csdn.net/u014452224/article/details/52759437 🔗
- NumberPicker 改成文字：https://www.jianshu.com/p/1042995703ad 🔗
沒有留言:
張貼留言