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

Bộ chọn biểu tượng cảm xúc là một giải pháp giao diện người dùng, mang đến giao diện hiện đại, biểu tượng cảm xúc mới nhất và dễ sử dụng. Người dùng có thể duyệt qua và chọn biểu tượng cảm xúc cũng như các biến thể hoặc chọn trong số các biểu tượng cảm xúc mới sử dụng gần đây.

Hình 1. Bộ chọn biểu tượng cảm xúc

Với thư viện này, ứng dụng từ nhiều nguồn có thể mang đến cho người dùng trải nghiệm thống nhất và đa dạng về biểu tượng cảm xúc mà không cần nhà phát triển phải tạo và duy trì bộ chọn biểu tượng cảm xúc của riêng họ từ đầu.

Tính năng

Biểu tượng cảm xúc mới nhất

Các biểu tượng cảm xúc mới phát hành được đưa vào Bộ chọn biểu tượng cảm xúc một cách có chọn lọc. Thư viện Bộ chọn biểu tượng cảm xúc tương thích trên nhiều phiên bản và thiết bị Android.

Biến thể cố định

Nhấn và giữ một biểu tượng cảm xúc để hiển thị trình đơn các biến thể, chẳng hạn như các giới tính hoặc màu da khác nhau. Biến thể bạn chọn sẽ được lưu trong Bộ chọn biểu tượng cảm xúc, còn biến thể bạn chọn gần đây nhất sẽ được dùng trong bảng điều khiển chính.

Với tính năng này, người dùng có thể gửi các biến thể biểu tượng cảm xúc mà họ muốn chỉ bằng một lần nhấn.

các biến thể của biểu tượng cảm xúc
Hình 2. Các biến thể biểu tượng cảm xúc

Biểu tượng cảm xúc gần đây

biểu tượng cảm xúc gần đây
Hình 3. Biểu tượng cảm xúc gần đây

RecentEmojiProvider chịu trách nhiệm cung cấp biểu tượng cảm xúc trong danh mục Recently Deleted (Đã dùng gần đây). Thư viện này có một trình cung cấp biểu tượng cảm xúc mới đây mặc định đáp ứng trường hợp sử dụng phổ biến nhất:

  • Tất cả biểu tượng cảm xúc đã chọn sẽ được lưu cho từng ứng dụng trong phần lựa chọn ưu tiên chung.
  • Bộ chọn hiển thị tối đa 3 hàng biểu tượng cảm xúc đã chọn, được loại bỏ trùng lặp, theo thứ tự thời gian ngược.

Nếu hành vi mặc định này là đủ, thì bạn không cần sử dụng setRecentEmojiProvider().

Tuy nhiên, có thể bạn cần phải tuỳ chỉnh hành vi của nhà cung cấp. Dưới đây là một số trường hợp phổ biến:

  • Bạn muốn lưu trữ nhiều biểu tượng cảm xúc đã chọn cho mỗi tài khoản người dùng.
  • Bạn muốn sử dụng bộ nhớ dữ liệu ngoài các lựa chọn ưu tiên dùng chung.
  • Bạn muốn hiển thị các biểu tượng cảm xúc gần đây được sắp xếp theo tần suất.

Sau đó, bạn có thể triển khai và thiết lập giao diện RecentEmojiProvider bằng setRecentEmojiProvider().

Khả năng tương thích với EmojiCompat

Nếu bật chính sách này, một thực thể EmojiCompat sẽ được dùng trong Bộ chọn biểu tượng cảm xúc để kết xuất nhiều biểu tượng cảm xúc nhất có thể. Tuy nhiên, Bộ chọn biểu tượng cảm xúc không yêu cầu EmojiCompat.

Điều kiện tiên quyết

Ứng dụng của bạn phải nhắm đến Android 5.0 (API cấp 21) trở lên.

Sử dụng thư viện

  1. Nhập androidx.emoji2:emojipicker:$version vào tệp build.gradle của ứng dụng.

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. Tăng cường khung hiển thị Bộ chọn biểu tượng cảm xúc, cũng như đặt emojiGridRowsemojiGridColumns (không bắt buộc).

    • Số lượng mặc định của emojiGridColumns là 9.
    • Số lượng hàng được tính dựa trên chiều cao của thành phần hiển thị gốc và giá trị của emojiGridColumns.
    • Sử dụng giá trị số thực độ chính xác đơn cho emojiGridRows để cho biết người dùng có thể cuộn xuống để xem thêm biểu tượng cảm xúc.
    <androidx.emoji2.emojipicker.EmojiPickerView
        android:id="@+id/emoji_picker"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:emojiGridColumns="9" />
    
    val emojiPickerView = EmojiPickerView(context).apply {
        emojiGridColumns = 15
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )
    }
    
    findViewById<ViewGroup>(R.id.emoji_picker_layout).addView(emojiPickerView)
    
  3. Sử dụng setOnEmojiPickedListener() để thêm các biểu tượng cảm xúc đã chọn vào thành phần hiển thị. Ví dụ: để thêm vào EditText, hãy làm như sau:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. Bạn có thể thiết lập RecentEmojiProvider (không bắt buộc), hãy xem ứng dụng mẫu để biết cách triển khai mẫu.

  5. Tuỳ chọn tuỳ chỉnh kiểu. Tạo kiểu của riêng bạn để ghi đè các thuộc tính giao diện phổ biến và áp dụng kiểu cho EmojiPickerView. Ví dụ: việc ghi đè colorControlNormal sẽ làm thay đổi màu biểu tượng danh mục.

    <style name="CustomStyle" >
        <item name="colorControlNormal">#FFC0CB</item>
    </style>
    <androidx.emoji2.emojipicker.EmojiPickerView
        android:id="@+id/emoji_picker"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:theme="@style/CustomStyle"
        app:emojiGridColumns="9" />
    

Ứng dụng mẫu

Ứng dụng mẫu Bộ chọn biểu tượng cảm xúc minh hoạ các trường hợp sử dụng cơ bản cùng với các tình huống bổ sung sau đây:

  • Tính toán lại bố cục khi đặt lại emojiGridRows hoặc emojiGridColumns.
  • Một trình cung cấp biểu tượng cảm xúc gần đây bị ghi đè và sắp xếp theo tần suất.
  • Tuỳ chỉnh kiểu bổ sung.