表情符號挑選器

表情符號挑選器是一種 UI 解決方案,提供現代化的外觀和風格、最新的表情符號,而且容易使用。使用者可以瀏覽及選取表情符號和變體,或從最近使用的表情符號中選擇。

圖 1. 表情符號挑選器

有了這個程式庫,各種來源的應用程式都能為使用者提供包容且統一的表情符號體驗,開發人員不必從頭建構及維護自己的表情符號挑選器。

功能

表情符號挑選器具有下列功能。

最新表情符號

表情符號挑選器會選擇性納入新推出的表情符號。表情符號挑選器程式庫與多個 Android 版本和裝置相容。

固定變化版本

長按表情符號即可顯示變體選單,例如不同的性別或膚色。您選擇的變體會儲存在表情符號挑選器中,而最後選取的變體會用於主面板。

使用者只要輕觸一下,就能傳送偏好的表情符號變體。

表情符號變化版本
圖 2. 表情符號變化版本。

最近使用的表情符號

最近使用的表情符號
圖 3. 最近使用的表情符號。

RecentEmojiProvider 負責提供「最近使用」類別中的表情符號。程式庫有預設的近期表情符號提供者,可滿足最常見的用途:

  • 系統會將選取的表情符號儲存在每個應用程式的共用偏好設定中。
  • 挑選器會按時間先後進行反向排序,顯示最多三列重複選取的表情符號。

如果這個預設行為符合需求,就不需要使用 setRecentEmojiProvider()。

不過,您可能需要自訂供應器行為。常見情況如下:

  • 您想為每個使用者帳戶儲存不同的表情符號。
  • 您想使用共用偏好設定以外的資料儲存庫。
  • 您想依頻率排序顯示最近使用的表情符號。

接著,您可以實作 RecentEmojiProvider 介面,並使用 setRecentEmojiProvider() 設定。

方向選取器

從 Emoji 15.1 開始,表情符號挑選器支援雙向表情符號。使用者可以輕觸雙向切換器,在朝左和朝右的表情符號版本之間切換。

雙向左表情符號

圖 4. 朝左的雙向表情符號。

雙向右表情符號

圖 5. 雙向表情符號,朝向右側。

多人表情符號選取器

使用者只要按住雙人表情符號,就能看到多人表情符號選項。

按住表情符號情侶

圖 6. 按住表情符號伴侶,即可顯示多個表情符號選項。

輕觸左側的表情符號人物

圖 7. 選取左半邊的表情符號人物。

輕觸右側的表情符號人物

圖 8. 選取右半邊的表情符號人物。

當使用者選取表情符號伴侶的左半部或右半部表情符號人物時,選取器會在右下方顯示預覽畫面,如圖 7 和圖 8 所示。選取表情符號伴侶的兩半後,使用者可以選取預覽畫面,組成自訂表情符號伴侶。

與EmojiCompat的相容性

如果啟用,表情符號挑選器會使用 EmojiCompat 例項,盡可能顯示表情符號。不過,表情符號挑選器不需要 EmojiCompat。

必要條件

應用程式必須指定 Android 5.0 (API 級別 21) 以上版本。

使用程式庫

  1. 在應用程式的 build.gradle 檔案中匯入 androidx.emoji2:emojipicker:$version。

    dependencies {
        implementation "androidx.emoji2:emojipicker:$version"
    }
    
  2. 加載表情符號挑選器檢視畫面,並視需要設定 emojiGridRows 和 emojiGridColumns。

    • emojiGridColumns 的預設數量為 9。
    • 資料列數是根據父項檢視區塊高度和 emojiGridColumns 的值計算。
    • 請為 emojiGridRows 使用浮點值,表示使用者可以捲動查看更多表情符號。
    <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. 使用 setOnEmojiPickedListener() 將所選表情符號附加至檢視畫面。舉例來說,如要附加至 EditText,請按照下列步驟操作:

    emojiPickerView.setOnEmojiPickedListener {
        findViewById<EditText>(R.id.edit_text).append(it.emoji)
    }
    
  4. 您可以視需要設定 RecentEmojiProvider,請參閱範例應用程式,瞭解導入範例。

  5. 視需要自訂樣式。建立自己的樣式,覆寫常見的主題屬性,並將樣式套用至 EmojiPickerView。舉例來說,覆寫 colorControlNormal 會變更類別圖示顏色。

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

範例應用程式

表情符號挑選器範例應用程式會示範基本用途,以及下列其他情境:

  • 重設 emojiGridRows 或 emojiGridColumns 時,重新計算版面配置。
  • 依頻率排序的覆寫近期表情符號提供者。
  • 其他樣式自訂。