🎨 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.

<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.

<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.

<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:

// 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.

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).
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.
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.

6.6 KiB Raw Blame History