Hoàn Thiện Giao Diện Người Dùng Cho Ứng Dụng Android

Mục Tiêu Và Giải Pháp Cho Giai Đoạn Phát Triển Thứ Năm

Mục tiêu công việc:

  • Xác định lại các chức năng cần phát triển.
  • Hoàn thiện chức năng trang cá nhân, bao gồm thay đổi ảnh đại diện.

Vấn đề gặp phải:

  • Chức năng trang cá nhân chưa được triển khai, không thể thay đổi ảnh đại diện.

Các Bước Thực Hiện Chi Tiết

1. Xác Định Lại Các Chức Năng Phát Triển

Dựa trên các vấn đề hiện tại, việc xác định lại các chức năng phát triển nhằm đảm bảo mỗi module chức năng đều có thể được triển khai một cách suôn sẻ.

  1. Phân chia module chức năng: Chia chức năng trang cá nhân thành các module độc lập, ví dụ:

    • Hiển thị thông tin người dùng
    • Thay đổi ảnh đại diện
    • Chỉnh sửa và lưu trữ thông tin
  2. Thiết lập ưu tiên: Ưu tiên triển khai các chức năng cốt lõi như thay đổi ảnh đại diện và hiển thị thông tin cơ bản.

2. Triển Khai Chức Năng Thay Đổi Ảnh Đại Diện

Các bước chi tiết như sau:

  1. Thiết kế giao diện: Tạo một giao diện đơn giản, trực quan bao gồm vùng hiển thị ảnh đại diện, nút tải lên, nút xác nhận và hủy bỏ.
@Composable
fun TrangCaNhan() {
    val uriHinhAnh = remember { mutableStateOf<Uri?>(null) }
    val context = LocalContext.current

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        uriHinhAnh.value?.let { uri ->
            Image(
                painter = rememberImagePainter(uri),
                contentDescription = null,
                modifier = Modifier.size(128.dp).clip(CircleShape)
            )
        } ?: Image(
            painter = painterResource(id = R.drawable.avatar_mac_dinh),
            contentDescription = null,
            modifier = Modifier.size(128.dp).clip(CircleShape)
        )
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { /* Mở thư viện ảnh để chọn */ }) {
            Text("Đổi Ảnh Đại Diện")
        }
    }
}
  1. Triển khai chức năng chọn ảnh:
val boKhoiDong = rememberLauncherForActivityResult(
    contract = ActivityResultContracts.GetContent()
) { uri: Uri? ->
    uri?.let {
        uriHinhAnh.value = it
        // Lưu URI ảnh đã chọn vào SharedPreferences hoặc cơ sở dữ liệu
    }
}

// Trong sự kiện onClick của nút, gọi boKhoiDong.launch("image/*")
Button(onClick = { boKhoiDong.launch("image/*") }) {
    Text("Đổi Ảnh Đại Diện")
}
  1. Lưu ảnh đại diện: Lưu URI của ảnh đã chọn vào bộ nhớ cục bộ hoặc cơ sở dữ liệu để có thể tải lại khi ứng dụng khởi động lần sau.
val sharedPreferences = context.getSharedPreferences("ThongTinNguoiDung", Context.MODE_PRIVATE)
sharedPreferences.edit().putString("uri_avatar", uriHinhAnh.value.toString()).apply()
  1. Tải ảnh đại diện: Khi ứng dụng khởi động, tải URI ảnh đại diện đã lưu.
val uriDaLuu = sharedPreferences.getString("uri_avatar", null)
uriHinhAnh.value = uriDaLuu?.let { Uri.parse(it) }

3. Triển Khai Chức Năng Hiển Thị Và Chỉnh Sửa Thông Tin Người Dùng

  1. Hiển thị thông tin người dùng:
@Composable
fun HienThiThongTin(ten: String, email: String) {
    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Text(text = "Tên: $ten", style = MaterialTheme.typography.h6)
        Text(text = "Email: $email", style = MaterialTheme.typography.body1)
    }
}
  1. Chỉnh sửa thông tin người dùng:
@Composable
fun ChinhSuaThongTin(ten: String, email: String, khiLuu: (String, String) -> Unit) {
    var tenMoi by remember { mutableStateOf(ten) }
    var emailMoi by remember { mutableStateOf(email) }

    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        TextField(value = tenMoi, onValueChange = { tenMoi = it }, label = { Text("Tên") })
        TextField(value = emailMoi, onValueChange = { emailMoi = it }, label = { Text("Email") })
        Spacer(modifier = Modifier.height(16.dp))
        Button(onClick = { khiLuu(tenMoi, emailMoi) }) {
            Text("Lưu")
        }
    }
}
  1. Lưu thông tin: Lưu thông tin đã chỉnh sửa vào bộ nhớ cục bộ hoặc cơ sở dữ liệu.
val sharedPreferences = context.getSharedPreferences("ThongTinNguoiDung", Context.MODE_PRIVATE)
sharedPreferences.edit().putString("ten", tenMoi).putString("email", emailMoi).apply()

4. Kiểm Thử Và Tối Ưu

  • Kiểm thử chức năng: Kiểm tra từng module chức năng để đảm bảo chức năng thay đổi ảnh đại diện và chỉnh sửa thông tin hoạt động bình thường.
  • Phản hồi người dùng: Thu thập phản hồi từ người dùng để thực hiện các tối ưu và điều chỉnh cần thiết.

Tổng Kết

Bằng cách xác định lại các chức năng phát triển, triển khai chi tiết chức năng thay đổi ảnh đại diện và thiết lập thông tin người dùng, cùng với việc kiểm thử và tối ưu đầy đủ, bạn có thể giải quyết hiệu quả vấn đề chức năng trang cá nhân chưa được triển khai, đảm bảo các chức năng hoạt động ổn định.

Thẻ: Android Jetpack Compose Phát triển ứng dụng di động xử lý ảnh SharedPreferences

Đăng vào ngày 12 tháng 6 lúc 20:38