3.4 KiB
3.4 KiB
標籤布局優化記錄
問題描述
Feature、Animal、Film 三個標籤中，Film 標籤在首次加載時不可見，需要點擊其他標籤後才會顯示。
優化歷程
第一輪優化（字體和下劃線）
- 字體大小：22sp → 16sp
- 下劃線高度：3dp → 2dp
- 標籤對齊：居中 → 左對齊
第二輪優化（間距調整）
- 標籤間距：減小為 12dp
- 容器寬度：從平均分配改為自適應（wrap_content）
第三輪優化（修復 Film 被遮擋）
- 字體大小：16sp → 14sp
- 標籤間距：12dp → 10dp
- 容器與搜索圖標間距：16dp → 8dp
第四輪優化（全面空間釋放）
- 頭部 padding：16dp → 12dp（左右）
- 搜索圖標：28dp → 24dp
- 容器右邊距：8dp
- 標籤間距：保持 10dp
第五輪優化（當前版本）✅
- 字體大小：14sp → 13sp
- 標籤間距：12dp → 10dp
- 搜索圖標：24dp
- 頭部 padding：12dp（左右）
- 容器右邊距：8dp
當前配置總結
| 項目 | 數值 |
|---|---|
| 字體大小 | 13sp |
| Feature ↔ Animal 間距 | 10dp |
| Animal ↔ Film 間距 | 10dp |
| 容器 ↔ 搜索圖標 | 8dp |
| 頭部左右 padding | 12dp |
| 搜索圖標大小 | 24dp × 24dp |
| 下劃線高度 | 2dp |
| 對齊方式 | 左對齊 |
視覺布局
┌───────────────────────────────────────┐
│ │
│ Feature Animal Film [🔍] │
│ ══════ ------ ---- 24dp │
│ ↑ ↑ ↑ 圖標 │
│ 13sp 10dp 10dp │
│ │
│ 12dp padding (左右) │
└───────────────────────────────────────┘
總空間節省
從最初版本到當前版本：
- 字體縮小：22sp → 13sp = 節省約 40%
- 標籤間距：原始較大 → 10dp = 節省約 30-40dp
- 頭部 padding：16dp → 12dp = 節省 8dp
- 搜索圖標：28dp → 24dp = 節省 4dp
- 容器邊距優化 = 節省 8dp
總計節省：約 50-60dp 空間
測試結果
待用戶反饋...
如果問題仍然存在
如果 Film 標籤依然在初始時不可見，可以考慮以下方案：
方案 A：進一步縮小
- 字體：13sp → 12sp
- 間距：10dp → 8dp 或 6dp
- 頭部 padding：12dp → 10dp
方案 B：使用橫向滾動
使用 HorizontalScrollView 包裹標籤容器，允許用戶左右滑動查看所有標籤。
<HorizontalScrollView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:scrollbars="none">
<LinearLayout>
<!-- 標籤 -->
</LinearLayout>
</HorizontalScrollView>
方案 C：縮短標籤名稱
- Feature → Feat
- Animal → Anim
- Film → Film（保持）
方案 D：使用圖標代替文字
為每個標籤設計一個圖標，減少寬度占用。
推薦方案
當前優先級：
- ✅ 已完成：字體 13sp + 間距 10dp
- 📋 待測試：如果不行，嘗試方案 A（進一步縮小）
- 📋 備選：方案 B（橫向滾動）最穩妥但體驗稍差
- 📋 備選：方案 C（縮短名稱）體驗好但需要修改文案
最後更新：2024年12月2日 當前狀態：等待用戶測試反饋