情境

Android 手機，廠商多、機型多、長寬比例也各式各樣，確保 UI 在不同裝置上的一致性是一大挑戰。本文將介紹兩個避免 UI 跑版的重要概念。

Demo 程式：GitHub: https://github.com/dreambo4/LayoutInspectorDemo

由內而外構建 UI

Do: 外層 View 的大小應隨著內層 View 的寬高縮放
Don’t: 不應由外而內的設定 View 的寬高

情境

開發的時候，使用 Figma 的設計圖，常會遇到帶有透明度的顏色。那麼，如何將這些顏色的透明度從百分比轉換為 16 進制呢？

除了前一篇介紹的的「數位測色器」工具，Android Studio 也有內建的 Color Picker，這個工具不僅方便設定顏色，還能輕鬆處理透明度問題。

情境

當團隊的設計師不在，你沒有 Figma 或 Zeplin 等方便的工具，只有一張 設計圖.png，要如何取得設計圖上的色碼，順利完成今天的開發任務呢？

這個專案用的色碼比較多，可以拿這個測試。
GitHub: https://github.com/dreambo4/NavigationDemo

情境

有時候看著設計師稿拉完 TextView，View 對齊了但字好像沒有真的對齊。這是因為中文字和英數字 Baseline 不一樣高。在使用 ConstrainLayout 拉 TextView 的時候不妨多注意看看。

Demo 程式：GitHub: https://github.com/dreambo4/LayoutInspectorDemo

第二次參賽，這次不講 Code，來講工具！

工作以來，發現很多我自己常用的小技巧或 Debug 工具，其實有些是同事不知道的。我打算用這30天的文章，紀錄平時工作常遇到的情境，再說明我的如何使用這些工具解決問題。

文章預計分為幾個主題(順序和內容可能會調整)

• UI
• Trace Code
• Coding
• 追查 API
• Debug
• 版本控管
• Demo
• 發佈

首先，讓我們從和 User 息息相關的 UI 開始吧！

情境

不確定是否各位的團隊都有這個流程。我的團隊在開發前期，會先由設計師依照與需求單位討論的結果，畫出設計彩圖。軟體通常使用Figma、Zeplin。通常設計會跑在開發前面，但時程趕的時候，有時候會併進一段時間。開發完成，若時間上還有餘裕，就會讓設計進來 Review 各位拉的 UI，位置對齊、字體、顏色、框線、陰影、圓角，只要給他們足夠多的時間，一定能指出你的 UI 有哪裡不符合設計圖。

情境

閱讀程式碼是工程師的日常，當程式碼規模日漸成長，許多程式不可避免的被封裝在底層/共用層。當問題被藏的越底層，追查問題就會變得更困難。

為此，Android Studio 也有提供方便的工具讓開發者能夠輕鬆觀察物件的繼承關係。

情境

前面介紹了兩種快速找到問題源頭方法，還沒看過的可以先參考：

• [Trace Code] 01-使用Profiler檢查當前所在Activity/Fragment
• [Trace Code] 02-使用Layout Inspector尋找當前所在Layout

在偵錯模式下，工具可以幫助我們快速找到問題的發生地。但更多時候，客戶回報問題只會有錄影或截圖。這時候要找問題發生地，就只能使用強大的搜尋功能啦～

情境

在 Android 開發中，我們經常會遇到需要重複輸入或複製貼上某些程式碼片段的情況。這不僅耗時，還容易出錯。而 Android Studio 提供了一個強大的功能——程式碼模板，它可以幫助我們大大提高開發效率。

情境

• 可以快速找到顯示錯誤資訊的元件，進而查詢錯誤原因。
• 確認元件當前的 Attribute，例如：textSize, textColor, background, visibility…等。

在Android開發中，有時我們會遇到畫面上某些元件未如預期顯示的問題。例如，一個應該顯示文字的TextView突然消失了。這時，我們該如何診斷問題呢？

我製作了一個範例，其中應該顯示三個TextView，但實際上一個都看不到。在不偷看 Layout 程式碼的狀況下，試試你能找出問題嗎？

接下來的主題，是 Trace Code。平常除了拉 UI，最常遇到的就是找問題。發現問題，第一步就是找到事發地，接下來 4 篇會介紹我常用來找 Code 的 4 個方法，通常我都是混著用的。接下來，讓我們一個個介紹吧～

情境

• 當收到需求，需要在某一頁多加一個頁籤時，我們需要快速找到需要調整的 Activity 或 Fragment。
  閱讀全文 »