123 lines
3.4 KiB
Markdown
123 lines
3.4 KiB
Markdown
# 標籤布局優化記錄
|
||
|
||
## 問題描述
|
||
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：進一步縮小
|
||
1. 字體：13sp → 12sp
|
||
2. 間距：10dp → 8dp 或 6dp
|
||
3. 頭部 padding：12dp → 10dp
|
||
|
||
### 方案 B：使用橫向滾動
|
||
使用 HorizontalScrollView 包裹標籤容器，允許用戶左右滑動查看所有標籤。
|
||
|
||
```xml
|
||
<HorizontalScrollView
|
||
android:layout_width="0dp"
|
||
android:layout_height="wrap_content"
|
||
android:scrollbars="none">
|
||
<LinearLayout>
|
||
<!-- 標籤 -->
|
||
</LinearLayout>
|
||
</HorizontalScrollView>
|
||
```
|
||
|
||
### 方案 C：縮短標籤名稱
|
||
- Feature → Feat
|
||
- Animal → Anim
|
||
- Film → Film（保持）
|
||
|
||
### 方案 D：使用圖標代替文字
|
||
為每個標籤設計一個圖標，減少寬度占用。
|
||
|
||
## 推薦方案
|
||
|
||
**當前優先級：**
|
||
1. ✅ 已完成：字體 13sp + 間距 10dp
|
||
2. 📋 待測試：如果不行，嘗試方案 A（進一步縮小）
|
||
3. 📋 備選：方案 B（橫向滾動）最穩妥但體驗稍差
|
||
4. 📋 備選：方案 C（縮短名稱）體驗好但需要修改文案
|
||
|
||
---
|
||
|
||
**最後更新**：2024年12月2日
|
||
**當前狀態**：等待用戶測試反饋
|
||
|
||
|
||
|