Nhắn tin trong ứng dụng mạng xã hội và nhắn tin

Văn bản là trọng tâm của các ứng dụng xã hội, nơi người dùng chia sẻ suy nghĩ, thể hiện cảm xúc và kể chuyện. Tài liệu này tìm hiểu cách làm việc với văn bản một cách hiệu quả, tập trung vào biểu tượng cảm xúc, kiểu định dạng và kết hợp nội dung đa dạng thức.

Làm việc với biểu tượng cảm xúc

Biểu tượng cảm xúc đã trở thành một phần không thể thiếu trong hoạt động giao tiếp hiện đại, đặc biệt là trong các ứng dụng mạng xã hội và nhắn tin. Các ứng dụng vượt qua rào cản ngôn ngữ, giúp người dùng thể hiện cảm xúc và ý tưởng một cách nhanh chóng và hiệu quả.

Hỗ trợ biểu tượng cảm xúc trong Compose

Jetpack Compose, bộ công cụ giao diện người dùng khai báo hiện đại của Android, đơn giản hoá việc xử lý biểu tượng cảm xúc:

  • Đầu vào: Thành phần TextField hỗ trợ sẵn phương thức nhập bằng biểu tượng cảm xúc.
  • Hiển thị: Thành phần Text của Compose hiển thị biểu tượng cảm xúc một cách chính xác, đảm bảo giao diện nhất quán trên các thiết bị và nền tảng cung cấp trình cung cấp phông chữ có thể tải xuống tương thích với emoji2, chẳng hạn như các thiết bị sử dụng Dịch vụ Google Play.

Ảnh bìa của phần Hiển thị biểu tượng cảm xúc hiển thị biểu tượng cảm xúc trong Jetpack Compose, bao gồm cả hướng dẫn đảm bảo ứng dụng của bạn hiện phông chữ biểu tượng cảm xúc mới nhất, cách đảm bảo biểu tượng cảm xúc hoạt động chính xác nếu ứng dụng của bạn sử dụng cả Chế độ xem và Compose trong cùng một Hoạt động, và cách khắc phục sự cố khi biểu tượng cảm xúc không xuất hiện như mong đợi.

Hỗ trợ biểu tượng cảm xúc trong Khung hiển thị

Nếu bạn đang sử dụng Khung hiển thị Android, thư viện AppCompat phiên bản 1.4 trở lên sẽ hỗ trợ biểu tượng cảm xúc cho các lớp con nền tảng của TextView:

Nếu bạn đang tạo một thành phần hiển thị tuỳ chỉnh là lớp con trực tiếp hoặc gián tiếp của TextView, hãy mở rộng việc triển khai AppCompat (thay vì triển khai nền tảng) để có được tính năng hỗ trợ biểu tượng cảm xúc tích hợp. Chương trình Hỗ trợ biểu tượng cảm xúc hiện đại cách kiểm tra và khắc phục sự cố tích hợp biểu tượng cảm xúc, hỗ trợ biểu tượng cảm xúc mà không cần AppCompat, hỗ trợ biểu tượng cảm xúc ở khung hiển thị tuỳ chỉnh, hỗ trợ các phông chữ hoặc phông chữ thay thế và nhiều nhà cung cấp dịch vụ khác.

Sử dụng Bộ chọn biểu tượng cảm xúc

Bộ chọn biểu tượng cảm xúc Jetpack là một Khung hiển thị Android cung cấp danh sách biểu tượng cảm xúc được phân loại, các biến thể biểu tượng cảm xúc cố định và hỗ trợ biểu tượng cảm xúc đã dùng gần đây — tương thích trên nhiều phiên bản và thiết bị Android. Đây là một cách dễ dàng để nâng cấp tính năng tích hợp biểu tượng cảm xúc của ứng dụng.

Bắt đầu bằng cách nhập thư viện trong build.gradle.

dependencies {
   implementation("androidx.emoji2:emojipicker:$version")
}

Sử dụng Bộ chọn biểu tượng cảm xúc với Compose

Bạn tạo Bộ chọn biểu tượng cảm xúc trong Compose bằng cách sử dụng thành phần kết hợp AndroidView. Đoạn mã này bao gồm một trình nghe cho biết khi nào một biểu tượng cảm xúc được chọn:

AndroidView(
    modifier = Modifier.fillMaxSize(),
    factory = { context ->
        val emojiPickerView = EmojiPickerView(context)
        emojiPickerView.setOnEmojiPickedListener(this::updateTextField)
        emojiPickerView
    },
)

Compose 1.7 bổ sung nhiều chức năng mới cho BasicTextField, bao gồm cả tính năng hỗ trợ cho TextFieldState. Tính năng này có thể nằm trong ViewModel:

private val emojiTextFieldState = TextFieldState()

@Composable fun EmojiTextField() {
    BasicTextField(
        state = emojiTextFieldState,
    )
}

Bạn có thể sử dụng TextFieldState để chèn văn bản tại vị trí con trỏ hoặc thay thế văn bản đã chọn, như thể bạn đang nhập vào IME:

private fun insertStringAsIfTyping(textFieldState: TextFieldState, string: String) {
    textFieldState.edit {
        replace(selection.start, selection.end, string)
        // clear selection on replace if necessary
        if (hasSelection) selection = TextRange(selection.end)
    }
}

Lệnh gọi lại có thể cập nhật BasicTextField bằng hàm trợ giúp:

private fun updateTextField(emojiViewItem: EmojiViewItem) {
    insertStringAsIfTyping(emojiTextFieldState, emojiViewItem.emoji)
}

Sử dụng Bộ chọn biểu tượng cảm xúc với Khung hiển thị

Bộ chọn biểu tượng cảm xúc cũng hoạt động hiệu quả với Chế độ xem.

Tăng cường EmojiPickerView. Bạn có thể đặt emojiGridColumns và emojiGridRows dựa trên kích thước mong muốn của mỗi ô biểu tượng cảm xúc.

<androidx.emoji2.emojipicker.EmojiPickerView
    …
    app:emojiGridColumns="9" />

Chèn một ký tự vào vị trí con trỏ hoặc thay thế văn bản đã chọn:

// Consider unregistering/reregistering anyTextWatcher that you might have as part of this
private fun insertStringAsIfTyping(editText: EditText, string: String) {
    val stringBuffer = StringBuffer(editText.text.toString())
    val index = editText.selectionStart
    if ( !editText.hasSelection() ) {
        stringBuffer.insert(index, string)
    } else {
        stringBuffer.replace(index, editText.selectionEnd, string)
    }
    editText.setText(stringBuffer.toString())
    editText.setSelection(index + string.length)
}

Cung cấp trình nghe cho biểu tượng cảm xúc đã chọn và sử dụng trình nghe đó để nối các ký tự vào EditText.

// a listener example
emojiPickerView.setOnEmojiPickedListener {
   val editText = findViewById<EditText>(R.id.edit_text)
   insertStringAsIfTyping(editText, it.emoji)
}

Tạo kiểu cho văn bản

Bằng cách áp dụng những điểm khác biệt về mặt trực quan cho văn bản, chẳng hạn như kiểu phông chữ, kích thước, độ đậm, và màu sắc, bạn có thể nâng cao khả năng dễ đọc, hệ thống phân cấp và tính thẩm mỹ tổng thể sự hấp dẫn của giao diện người dùng của ứng dụng mạng xã hội hoặc nhắn tin. Trợ giúp về kiểu văn bản người dùng nhanh chóng phân tích cú pháp thông tin, phân biệt giữa các loại thông điệp và xác định các yếu tố quan trọng.

Tạo kiểu cho văn bản trong Compose

Thành phần kết hợp Text cung cấp nhiều lựa chọn định kiểu, bao gồm:

  • Màu văn bản: Đặt thành Color để làm nổi bật văn bản.
  • Kích thước phông chữ: Điều khiển FontSize để có tỷ lệ thích hợp.
  • Kiểu phông chữ: Sử dụng FontStyle để in nghiêng văn bản.
  • Độ đậm phông chữ: Điều chỉnh FontWeight cho các biến thể văn bản in đậm, nhạt, v.v.
  • Bộ phông chữ: Dùng FontFamily để chọn phông chữ phù hợp.
Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

Bạn có thể đặt các tuỳ chọn tạo kiểu này một cách nhất quán trên ứng dụng bằng cách sử dụng chủ đề.

MaterialTheme(
    // This theme would include Color.Blue (as appropriate for dark and light themes)
    colorScheme = colorScheme,
    content = content,
    typography = Typography(
        titleLarge = TextStyle(
            fontSize = 18.sp,
            fontFamily = titleFont,
            fontWeight = FontWeight.Bold
        ),
    ),
)

Thêm nhiều kiểu chữ trong văn bản

Bạn có thể đặt nhiều kiểu trong cùng một thành phần kết hợp Text bằng cách sử dụng AnnotatedString.

AnnotatedString có trình tạo loại an toàn, buildAnnotatedString, để dễ dàng tạo.

@Composable
fun MultipleStylesInText() {
    Text(
        buildAnnotatedString {
            withStyle(style = SpanStyle(color = Color.Blue)) {
                append("M")
            }
            append("y ")

            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold, color = Color.Red)) {
                append("S")
            }
            append("tyle")
        }
    )
}

Xem phần Tạo kiểu văn bản để biết thêm thông tin về kiểu văn bản trong Compose, bao gồm thêm bóng, tạo kiểu nâng cao bằng Bút vẽ và độ mờ.

Tạo kiểu văn bản trong Khung hiển thị

Với Khung hiển thị, hãy dùng kiểu và giao diện để có kiểu chữ nhất quán. Xem Kiểu và giao diện để biết thêm thông tin về cách áp dụng giao diện tuỳ chỉnh cho các chế độ xem trong ứng dụng của bạn. Nếu bạn muốn đặt nhiều kiểu trong một văn bản hãy xem Spans để biết thêm thông tin về cách thay đổi văn bản trong nhiều loại văn bản nhiều cách, bao gồm thêm màu sắc, làm cho văn bản có thể nhấp vào, chuyển tỷ lệ kích thước văn bản và vẽ văn bản theo cách tuỳ chỉnh.

Hỗ trợ bàn phím hình ảnh và nội dung đa dạng thức khác

Người dùng thường muốn giao tiếp bằng cách sử dụng hình dán, hoạt ảnh và các loại nội dung đa dạng thức. Để giúp các ứng dụng nhận được nội dung đa dạng thức một cách đơn giản hơn, Android 12 (API cấp 31) đã giới thiệu một API hợp nhất cho phép ứng dụng của bạn chấp nhận nội dung từ bất kỳ nguồn nào: bảng nhớ tạm, bàn phím hoặc tính năng kéo và thả. Để tương thích ngược với các phiên bản Android trước (hiện đã quay lại API cấp 14), bạn nên sử dụng phiên bản Android Jetpack (AndroidX) của API này.

Bạn đính kèm OnReceiveContentListener vào các thành phần trên giao diện người dùng và nhận lệnh gọi lại khi nội dung được chèn thông qua mọi cơ chế. Lệnh gọi lại trở thành một nơi duy nhất để mã của bạn xử lý việc nhận tất cả nội dung, từ đơn giản và văn bản được tạo kiểu thành mã đánh dấu, hình ảnh, video, tệp âm thanh và các nội dung khác.

Hãy xem phần Nhận nội dung đa dạng thức để tìm hiểu thêm về cách triển khai tính năng hỗ trợ trong ứng dụng. Jetpack Compose hiện có các đối tượng sửa đổi dragAndDropSource và dragAndDropTarget để đơn giản hoá việc triển khai tính năng kéo và thả trong ứng dụng và giữa các ứng dụng khác.