เครื่องมือเลือกอีโมจิ

เครื่องมือเลือกอีโมจิเป็นโซลูชัน UI ที่มีรูปลักษณ์ทันสมัย อีโมจิที่อัปเดตล่าสุด และใช้งานง่าย ผู้ใช้สามารถเรียกดูและเลือกอีโมจิและรูปแบบย่อย หรือเลือกจากอีโมจิที่ใช้ล่าสุด

ไลบรารีนี้ช่วยให้แอปจากแหล่งที่มาต่างๆ มอบประสบการณ์การใช้อีโมจิที่ครอบคลุมและเป็นหนึ่งเดียวแก่ผู้ใช้ได้โดยที่นักพัฒนาแอปไม่ต้องสร้างและดูแลรักษาเครื่องมือเลือกอีโมจิของตนเองตั้งแต่ต้น

ฟีเจอร์

เครื่องมือเลือกอีโมจิมีฟีเจอร์ต่อไปนี้

อีโมจิที่อัปเดตล่าสุด

เราจะเลือกรวมอีโมจิที่เพิ่งเปิดตัวไว้ในเครื่องมือเลือกอีโมจิ ไลบรารีเครื่องมือเลือกอีโมจิใช้ได้ในหลายเวอร์ชันและอุปกรณ์ของ Android

รูปแบบย่อยที่ติดหนึบ

กดอีโมจิค้างไว้เพื่อแสดงเมนูรูปแบบย่อย เช่น เพศหรือสีผิวที่แตกต่างกัน ระบบจะบันทึกรูปแบบย่อยที่คุณเลือกไว้ในเครื่องมือเลือกอีโมจิ และใช้รูปแบบย่อยที่เลือกครั้งล่าสุดในแผงหลัก

ฟีเจอร์นี้ช่วยให้ผู้ใช้ส่งรูปแบบย่อยของอีโมจิที่ต้องการได้ด้วยการแตะเพียงครั้งเดียว

อีโมจิล่าสุด

RecentEmojiProvider มีหน้าที่แสดงอีโมจิในหมวดหมู่ที่ใช้ล่าสุด ไลบรารีมีผู้ให้บริการอีโมจิล่าสุดเริ่มต้นที่ตรงตามกรณีการใช้งานที่พบบ่อยที่สุด ดังนี้

• ระบบจะบันทึกอีโมจิที่เลือกทั้งหมดต่อแอปในการตั้งค่าที่แชร์
• เครื่องมือเลือกจะแสดงอีโมจิที่เลือกไว้สูงสุด 3 แถว โดยนำอีโมจิที่ซ้ำกันออกและจัดเรียงตามลำดับเวลาจากล่าสุดไปเก่าที่สุด

หากลักษณะการทำงานเริ่มต้นนี้เพียงพอ คุณก็ไม่จำเป็นต้องใช้ setRecentEmojiProvider()

อย่างไรก็ตาม คุณอาจต้องปรับแต่งลักษณะการทำงานของผู้ให้บริการ ตัวอย่างสถานการณ์ที่พบบ่อยมีดังนี้

• คุณต้องการจัดเก็บอีโมจิต่างๆ ที่เลือกไว้สำหรับในแต่ละบัญชีผู้ใช้
• คุณต้องการใช้ที่เก็บข้อมูลอื่นนอกเหนือจากการตั้งค่าที่แชร์
• คุณต้องการแสดงอีโมจิล่าสุดที่จัดเรียงตามความถี่

จากนั้นคุณจะใช้อินเทอร์เฟซ RecentEmojiProvider และตั้งค่าได้โดยใช้ setRecentEmojiProvider()

ตัวเลือกทิศทาง

ตั้งแต่ Emoji 15.1 เป็นต้นไป เครื่องมือเลือกอีโมจิจะรองรับ อีโมจิแบบ 2 ทิศทาง ผู้ใช้สามารถแตะตัวสลับแบบ 2 ทิศทางเพื่อสลับระหว่างอีโมจิเวอร์ชันที่หันไปทางซ้ายและขวา

รูปที่ 4 อีโมจิแบบ 2 ทิศทางที่หันไปทางซ้าย

รูปที่ 5 อีโมจิแบบ 2 ทิศทางที่หันไปทางขวา

ตัวเลือกอีโมจิแบบมีคนหลายคน

ผู้ใช้สามารถแตะอีโมจิคู่รักค้างไว้เพื่อแสดงตัวเลือกของอีโมจิแบบมีคนหลายคน

รูปที่ 6 แตะอีโมจิคู่รักค้างไว้เพื่อแสดงตัวเลือกของอีโมจิแบบมีคนหลายคน

รูปที่ 7 เลือกอีโมจิคนทางด้านซ้าย

รูปที่ 8 เลือกอีโมจิคนทางด้านขวา

เมื่อผู้ใช้เลือกอีโมจิทางด้านซ้ายหรือขวาของอีโมจิคู่รัก ตัวเลือกจะแสดงตัวอย่างที่ด้านขวาล่าง ดังที่แสดงในรูปที่ 7 และ 8 หลังจากเลือกอีโมจิครบทั้ง 2 ด้านแล้ว ผู้ใช้สามารถเลือกตัวอย่างเพื่อประกอบอีโมจิคู่รักที่กำหนดเอง

ความเข้ากันได้กับ EmojiCompat

หากเปิดใช้ไว้ ระบบจะใช้อินสแตนซ์ EmojiCompat ในเครื่องมือเลือกอีโมจิเพื่อแสดงอีโมจิให้ได้มากที่สุด อย่างไรก็ตาม เครื่องมือเลือกอีโมจิไม่จำเป็นต้องใช้ EmojiCompat

สิ่งที่ต้องมีก่อน

แอปของคุณต้องกำหนดเป้าหมายเป็น Android 5.0 (ระดับ API 21) ขึ้นไป

ใช้ไลบรารี

1. นำเข้า androidx.emoji2:emojipicker:$version ในไฟล์ build.gradle ของแอป

   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
• ผู้ให้บริการอีโมจิล่าสุดที่ลบล้างซึ่งจัดเรียงตามความถี่
• การปรับแต่งสไตล์เพิ่มเติม