站長留言

  • ✅ 本站維護及更新歷史紀錄,詳情請參考公告
  • ✅ 有任何意見、想法,歡迎留言給Spicy知道喔
  • ✅ 固定於每周一至周五更新Blogger文章,周末不定期

【APP/Android】海線車站旅遊札記

tags: APP Android 作品集

專案管理

概念、啟發

  • 2015及2016年有到海線車站附近景點旅遊,出去玩之前做了很多功課、查了很多資料,但還是很多景點、風景和美食沒有享受到。
  • 因此製作了一個APP方便自己,未來再次造訪海線車站時,不用花很多時間做功課、上網查資料,只要點開自己做的APP就知道哪裡有好玩、好吃的。

架構圖 與 各頁面介紹

app 架構圖

頁面介紹

  • 歡迎畫面:只是個進入app的圖片,數秒跳轉主畫面
  • 主畫面:兩個button,分為苗栗、台中
  • 苗栗地區、台中地區:車站地圖、車站的選擇器
  • 各車站fragment
    • 將所有車站集中在一個畫面,用滑動的方式換車站分頁,方便查詢
    • 將各車站的景點整理再一個分頁中,每個景點都是一個button
  • 照片:用卡片的方式列出各景點的照片
  • 資訊:描述各景點的資訊
  • 美食
    1. 用 list 的方式列出各個美食
    2. 用連結網站的方式,顯示美食資訊
  • 美食資訊:上方為美食照片的輪播,下方為美食資訊的介紹

使用 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

其他技術

  • 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 進行分頁的設定

其他想法 與 擴充性

  1. 記錄自己去過哪些地方、上傳自己的照片到雲端
  2. 分享該車站的旅遊部落格文章
  3. 資料著作權問題

執行畫面

說明 畫面
Launcher Icon
歡迎畫面
數秒跳轉主畫面
主畫面
選擇區域
車站選單
景點選單
各車站分頁&各景點
景點
照片、資訊、美食分頁
導航按鈕,開啟google map
美食介紹
導航按鈕,開啟google map
漢堡選單
Firebase

參考資料、模板

  1. 海線車站圖:http://blog.udn.com/0936331038/54210541 🔗
  2. Android開發——解決載入大圖片時記憶體溢出的問題
    http://fecbob.pixnet.net/blog/post/35704721-android開發——解決載入大圖片時記憶體溢出 🔗
  3. 官方 icon:https://material.io/icons/ 🔗
  4. 輪播作法:https://blog.csdn.net/u014452224/article/details/52759437 🔗
  5. NumberPicker 改成文字:https://www.jianshu.com/p/1042995703ad 🔗

沒有留言:

張貼留言

本網站建議使用電腦或平板瀏覽