Android 自定義佈局完整教程：從 Composite View 到 Flat Custom View

四種自定義佈局層級

1. Composite View（複合視圖） - 最簡單

• 繼承現有佈局（LinearLayout/RelativeLayout/FrameLayout）。
• 建構式中 inflate(R.layout.xxx) 載入合併佈局（<merge> 根標籤）。
• findViewById 綁定內部子視圖。
• 對外暴露 update() 等 API 更新狀態。
• 適用：大多數可重用 UI 元件（列表項、工具列、卡片）。

2. Custom Composite View（自定義複合視圖） - 效能優化

• 繼承 ViewGroup，重寫 onMeasure()、onLayout()。
• 手動計算子視圖測量規格 (MeasureSpec) 與位置，避免巢狀 LinearLayout 多次測量開銷。
• 使用 measureChildWithMargins()、getChildMeasureSpec() 協助計算。
• 適用：高頻更新、複雜巢狀的列表項（如社交動態卡片）。

3. Flat Custom View（扁平自定義視圖） - 極致效能

• 繼承 View（非 ViewGroup），完全自己繪製（onDraw(Canvas)）。
• 不再使用 TextView/ImageView，改用 Canvas.drawText()、drawBitmap()。
• 需自行處理文字截斷、圖片縮放、觸摸事件、無障礙服務等。
• 適用：核心列表 UI（Twitter/Gmail/Pocket 的時間軸項目），極大壓縮視圖層級。

4. Async Custom View（非同步自定義視圖） - 針對掉幀

• 將 measure/layout 移至背景執行緒預先計算並快取。
• 主執行緒僅負責 draw，消除滑動時的佈局計算掉幀。
• 需線程安全的元件模型（如文中 UIElement 框架）。
• 適用：極其複雜且動態的列表/分頁視圖。

選型建議

「避免過早優化」。從 Composite View 開始，效能不足時逐層遷移。核心業務列表可考慮 Flat/Async，其他區域繼續用平台元件。

關鍵資源

• 原文詳細代碼範例：TweetCompositeView、TweetLayoutView、TweetElementView、AsyncTweetView。
• UIElement 框架：TextElement、ImageElement、LayoutInflater 等非 View 系統的平行實現。

理解四層演進脈絡，即可根據專案複雜度選擇最適合的自定義佈局策略。