Implement 5_UI_ANDROID & 6_PRESETS_COLOR: Restructure to minimal UX/UI, merged frame/preset timeline, integrated ColorPreset models and real-time color filter overlay

2026-07-05 17:10:03 +07:00
parent df1192dac4
commit edd4c2946d
13 changed files with 837 additions and 147 deletions
@@ -0,0 +1,158 @@
+
+# 🎨 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.