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 lại 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 xem và chọn biểu tượng cảm xúc cũng như các biến thể của biểu tượng cảm xúc đó, hoặc chọn trong số các biểu tượng cảm xúc mà họ đã 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, các ứng dụng từ nhiều nguồn có thể cung cấp trải nghiệm biểu tượng cảm xúc toàn diện và thống nhất cho người dùng mà không cần nhà phát triển phải xây dựng 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

Bộ chọn biểu tượng cảm xúc có các tính năng sau.

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 với 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 gồm các biến thể, chẳng hạn như giới tính hoặc tông 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 và biến thể được chọn gần đây nhất sẽ được dùng trong bảng điều khiển chính.

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

biến thể 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 Đã dùng gần đây. Thư viện có một trình cung cấp biểu tượng cảm xúc mới nhất 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 đều được lưu theo từng ứng dụng trong lựa chọn ưu tiên dùng chung.
  • Bộ chọn hiển thị tối đa 3 hàng biểu tượng cảm xúc đã chọn, theo thứ tự từ mới nhất đến cũ nhất (các biểu tượng trùng lặp sẽ bị loại bỏ).

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, bạn có thể cần tuỳ chỉnh hành vi của nhà cung cấp. Sau đây là một số trường hợp phổ biến:

  • Bạn muốn lưu trữ các biểu tượng cảm xúc đã chọn khác nhau cho mỗi tài khoản người dùng.
  • Bạn muốn sử dụng bộ nhớ dữ liệu khác với lựa chọn ưu tiên dùng chung.
  • Bạn muốn hiển thị 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 giao diện RecentEmojiProvider và đặt giao diện đó bằng setRecentEmojiProvider().

Bộ chọn hướng

Kể từ Biểu tượng cảm xúc 15.1, Bộ chọn biểu tượng cảm xúc sẽ hỗ trợ biểu tượng cảm xúc hai chiều. Người dùng có thể nhấn vào nút chuyển đổi hai chiều để chuyển đổi giữa phiên bản biểu tượng cảm xúc hướng sang trái và hướng sang phải.

biểu tượng cảm xúc hai chiều bên trái

Hình 4. Biểu tượng cảm xúc hai chiều hướng sang trái.

biểu tượng cảm xúc hai chiều bên phải

Hình 5. Biểu tượng cảm xúc hai chiều hướng sang phải.

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

Người dùng có thể chạm và giữ biểu tượng cảm xúc cặp đôi để xem các lựa chọn biểu tượng cảm xúc nhiều người.

nhấn và giữ biểu tượng cảm xúc cặp đôi

Hình 6. Chạm và giữ một cặp biểu tượng cảm xúc để xem các lựa chọn biểu tượng cảm xúc nhiều người.

nhấn vào biểu tượng cảm xúc người bên trái

Hình 7. Chọn một biểu tượng cảm xúc người bên trái.

nhấn vào biểu tượng cảm xúc người bên phải

Hình 8. Chọn một biểu tượng cảm xúc người bên phải.

Khi người dùng chọn biểu tượng cảm xúc người ở nửa bên trái hoặc bên phải của một cặp biểu tượng cảm xúc, bộ chọn sẽ hiển thị bản xem trước ở dưới cùng bên phải, như trong hình 7 và 8. Sau khi chọn cả hai nửa của cặp biểu tượng cảm xúc, người dùng có thể chọn bản xem trước để tạo cặp biểu tượng cảm xúc tuỳ chỉnh.

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

Nếu được bật, một thực thể EmojiCompat sẽ được dùng trong Bộ chọn biểu tượng cảm xúc để hiển thị 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 (cấp độ API 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 chế độ xem Bộ chọn biểu tượng cảm xúc và tuỳ ý đặt emojiGridRows và emojiGridColumns.

    • Số lượng emojiGridColumns mặc định là 9.
    • Số hàng được tính dựa trên chiều cao của chế độ xem gốc và giá trị của emojiGridColumns.
    • Sử dụng giá trị thực cho emojiGridRows để cho biết rằng người dùng có thể di chuyển để 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 biểu tượng cảm xúc đã chọn vào một 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ể đặt RecentEmojiProvider, xem ứng dụng mẫu để biết ví dụ về cách triển khai.

  5. Tuỳ chỉnh kiểu tuỳ chỉnh (không bắt buộc). Tạo kiểu riêng để 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ẽ 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:

  • 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 mới nhất được ghi đè, sắp xếp theo tần suất.
  • Tuỳ chỉnh kiểu bổ sung.