158 lines
6.6 KiB
Markdown
158 lines
6.6 KiB
Markdown
|
|
# 🎨 KẾ HOẠCH TÁI CẤU TRÚC UX/UI: TỐI GIẢN & TƯƠNG TÁC ĐỘNG
|
|
|
|
Mục tiêu: Chuyển đổi giao diện sang phong cách tối giản (không viền, không nền), sử dụng màu sắc để biểu thị trạng thái (Trắng ➔ Cam) và tối ưu hóa không gian hiển thị bằng cách gộp timeline của Frame và Presets.
|
|
|
|
---
|
|
|
|
## 📐 1. Cập Nhật Cấu Trúc Giao Diện (XML Layout)
|
|
|
|
Chúng ta sẽ điều chỉnh file `activity_main.xml` để loại bỏ các khối nền thừa và cấu trúc lại các cụm nút dựa theo `image_29a4a7.png`.
|
|
|
|
### 🔹 1.1. Top Bar (Các Icon Trạng Thái)
|
|
|
|
Thay thế các `Button` có text thành `ImageButton` chỉ chứa icon (Tia sét, Đồng hồ, Vòng xoay camera).
|
|
|
|
* **Style:** Không nền (`android:background="@null"`), không bo viền.
|
|
* **Màu sắc:** Sử dụng `app:tint="@color/white"` làm mặc định.
|
|
|
|
```xml
|
|
<LinearLayout
|
|
android:id="@+id/topBar" ...>
|
|
|
|
<ImageButton
|
|
android:id="@+id/btnFlash"
|
|
android:layout_width="48dp"
|
|
android:layout_height="48dp"
|
|
android:background="@null"
|
|
android:src="@drawable/ic_flash"
|
|
app:tint="@color/white" />
|
|
|
|
<!-- Tương tự cho btnTimer (ic_timer) và btnSwitchCamera (ic_flip_camera) -->
|
|
</LinearLayout>
|
|
|
|
```
|
|
|
|
### 🔹 1.2. Nút Frame và Nút Presets (Toggle Buttons)
|
|
|
|
Đây là hai nút chính nằm trên cụm Zoom. Cần thiết kế dưới dạng `ImageView` (hoặc `CardView` có bo góc nhẹ nếu muốn chứa ảnh mượt hơn) để có thể thay đổi ảnh đại diện (thumbnail) khi người dùng chọn.
|
|
|
|
```xml
|
|
<LinearLayout
|
|
android:id="@+id/toggleModeContainer" ...>
|
|
|
|
<!-- Nút Frame -->
|
|
<ImageView
|
|
android:id="@+id/btnModeFrame"
|
|
android:layout_width="60dp"
|
|
android:layout_height="60dp"
|
|
android:src="@drawable/ic_default_frame_thumbnail" />
|
|
|
|
<!-- Nút Presets -->
|
|
<ImageView
|
|
android:id="@+id/btnModePreset"
|
|
android:layout_width="60dp"
|
|
android:layout_height="60dp"
|
|
android:src="@drawable/ic_default_preset_thumbnail" />
|
|
</LinearLayout>
|
|
|
|
<!-- Khung Timeline dùng chung (sẽ thay đổi Adapter tùy thuộc vào nút nào được bấm) -->
|
|
<androidx.recyclerview.widget.RecyclerView
|
|
android:id="@+id/rvSharedTimeline"
|
|
android:layout_width="match_parent"
|
|
android:layout_height="wrap_content"
|
|
android:visibility="gone" />
|
|
|
|
```
|
|
|
|
### 🔹 1.3. Cụm Zoom (0.5x, 1x, 3x)
|
|
|
|
Thay thế các nút nền xám hiện tại thành `TextView` văn bản thuần túy.
|
|
|
|
* **Style:** Chữ đậm, không nền (`android:background="@null"`).
|
|
* **Trạng thái màu:** Mặc định màu trắng (`#FFFFFF`), khi chọn đổi sang màu cam (`#FF9800`).
|
|
|
|
### 🔹 1.4. Bottom Panel (Thêm nút Play/Review)
|
|
|
|
Dựa theo vị trí khoanh đỏ ở góc dưới bên trái của `image_29a4a7.png`, thêm nút xem lại ảnh.
|
|
|
|
```xml
|
|
<RelativeLayout
|
|
android:id="@+id/controlPanel" ...>
|
|
|
|
<!-- Nút Play (Xem lại ảnh) -->
|
|
<ImageButton
|
|
android:id="@+id/btnReviewGallery"
|
|
android:layout_width="56dp"
|
|
android:layout_height="56dp"
|
|
android:layout_alignParentStart="true"
|
|
android:layout_centerVertical="true"
|
|
android:layout_marginStart="24dp"
|
|
android:background="@null"
|
|
android:src="@drawable/ic_play_gallery" />
|
|
|
|
<!-- Nút Chụp (Ở giữa) -->
|
|
<!-- ... -->
|
|
</RelativeLayout>
|
|
|
|
```
|
|
|
|
---
|
|
|
|
## 💻 2. Kịch Bản Logic & Quản Lý Trạng Thái (Kotlin)
|
|
|
|
### 🔹 2.1. Logic Đổi Màu Icon Top Bar và Zoom (Trắng ➔ Cam)
|
|
|
|
Tạo các hàm helper để xử lý đổi màu nhanh gọn bằng `ColorStateList` hoặc set `tint` trực tiếp:
|
|
|
|
```kotlin
|
|
// Ví dụ đổi màu icon Flash
|
|
fun updateFlashIconState(isActive: Boolean) {
|
|
val color = if (isActive) Color.parseColor("#FF9800") else Color.WHITE
|
|
binding.btnFlash.imageTintList = ColorStateList.valueOf(color)
|
|
}
|
|
|
|
// Ví dụ đổi màu text Zoom
|
|
fun updateZoomTextState(selectedZoom: TextView) {
|
|
// Reset tất cả về trắng
|
|
binding.tvZoom05.setTextColor(Color.WHITE)
|
|
binding.tvZoom1.setTextColor(Color.WHITE)
|
|
binding.tvZoom3.setTextColor(Color.WHITE)
|
|
|
|
// Set màu cam cho mức zoom được chọn
|
|
selectedZoom.setTextColor(Color.parseColor("#FF9800"))
|
|
}
|
|
|
|
```
|
|
|
|
### 🔹 2.2. Logic Toggle Giữa Frame và Presets
|
|
|
|
Để đáp ứng yêu cầu: Bấm Frame thì ẩn Presets (và ngược lại), chúng ta quản lý trạng thái hiển thị bằng `View.VISIBLE` và `View.GONE`.
|
|
|
|
1. **Khi nhấn nút Frame:** Mở Timeline Frame.
|
|
Ẩn nút Presets (`btnModePreset.visibility = View.GONE`).
|
|
Hiển thị `rvSharedTimeline`. Set Adapter của RecyclerView thành danh sách các Frames.
|
|
*(Lưu ý: Bạn nên cấu hình để khi nhấn nút Frame lần nữa, Timeline sẽ đóng lại và nút Presets hiện ra lại để người dùng có thể chuyển đổi).*
|
|
|
|
|
|
2. **Khi nhấn nút Presets:** Mở Timeline Presets.
|
|
Ẩn nút Frame (`btnModeFrame.visibility = View.GONE`).
|
|
Hiển thị `rvSharedTimeline`. Set Adapter của RecyclerView thành danh sách các Preset màu.
|
|
|
|
|
|
3. **Khi chọn phần tử trong Timeline:** Cập nhật Thumbnail.
|
|
Nếu đang ở chế độ Frame và người dùng chọn "Vintage Frame", lấy ảnh thumbnail của frame đó gán đè vào icon của nút Frame: `btnModeFrame.setImageBitmap(selectedFrameThumb)`. Tương tự cho Presets.
|
|
|
|
|
|
### 🔹 2.3. Logic Nút "Play" (Xem lại ảnh)
|
|
|
|
Khi nhấn vào `btnReviewGallery`, sử dụng `Intent` để mở một Activity mới (`GalleryActivity`) hiển thị lưới (Grid) các ảnh đã chụp (đọc từ thư mục lưu trữ mà bạn đã cấu hình ở các bước trước). Hoặc đơn giản nhất là mở thẳng thư viện mặc định của điện thoại thông qua `ACTION_VIEW`.
|
|
|
|
---
|
|
|
|
## 📅 3. Các Đầu Việc Cần Làm (Checklist)
|
|
|
|
* [ ] **Chuẩn bị Assets (SVG/Vector):** Tìm/Tạo các icon dạng vector (XML) cho `ic_flash`, `ic_timer`, `ic_flip_camera`, `ic_play`. Sử dụng vector giúp ảnh không bị vỡ và dễ dàng đổi màu bằng thuộc tính `tint` trên Android.
|
|
* [ ] **Cập nhật Layout:** Mở file `activity_main.xml` và xóa các thuộc tính background cũ, thay thế bằng các thuộc tính như kế hoạch trên.
|
|
* [ ] **Viết Helper Functions:** Trong `MainActivity.kt`, tạo các hàm `toggleTimelineMode(isFrameMode: Boolean)` để quản lý việc ẩn/hiện và tráo đổi Adapter cho 2 nút Frame/Presets.
|
|
* [ ] **Tạo Activity Review:** Tạo một màn hình đơn giản hoặc Fragment để hiển thị ảnh ngay khi bấm nút Play ở góc dưới cùng bên trái. |