ส่งข้อความในแอปโซเชียลและแอปรับส่งข้อความ

ข้อความเป็นหัวใจสำคัญของแอปพลิเคชันโซเชียลที่ผู้ใช้แชร์ความคิด แสดงอารมณ์ และเล่าเรื่องราว เอกสารนี้จะอธิบายวิธีใช้ข้อความอย่างมีประสิทธิภาพ โดยเน้นที่อีโมจิ การจัดรูปแบบ และการผสานรวมเนื้อหาริชมีเดีย

การทำงานกับอีโมจิ

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

การรองรับอีโมจิใน Compose

Jetpack Compose ซึ่งเป็นชุดเครื่องมือ UI แบบประกาศสิ่งที่ต้องการที่ทันสมัยของ Android ช่วยให้คุณจัดการอีโมจิได้ง่ายขึ้น ดังนี้

• อินพุต: คอมโพเนนต์ TextField รองรับการป้อนอีโมจิโดยกำเนิด
• การแสดงผล: คอมโพเนนต์ Text ของเขียนแสดงอีโมจิได้อย่างถูกต้อง เพื่อให้แน่ใจว่าโฆษณาจะมีรูปลักษณ์ที่สอดคล้องกัน บนอุปกรณ์และแพลตฟอร์มต่างๆ ผู้ให้บริการแบบอักษรที่ดาวน์โหลดได้โดยใช้อีโมจิ2 เช่น อุปกรณ์ที่ขับเคลื่อนโดย บริการ Google Play

แสดงอีโมจิจะครอบคลุมการแสดงอีโมจิใน Jetpack Compose รวมถึงวิธี ตรวจสอบให้แน่ใจว่าแอปของคุณแสดงแบบอักษรอีโมจิล่าสุด วิธีตรวจสอบว่าอีโมจิ จะทำงานได้อย่างถูกต้องหากแอปของคุณใช้ ทั้งการดูและการเขียนในกิจกรรมเดียวกัน และวิธีแก้ปัญหาเมื่ออีโมจิไม่แสดงขึ้นตามที่คาดไว้

การรองรับอีโมจิใน View

หากคุณใช้ Android View ไลบรารี AppCompat เวอร์ชัน 1.4 ขึ้นไปจะรองรับอีโมจิสำหรับคลาสย่อยของแพลตฟอร์ม TextView ดังนี้

• อินพุต: EditText เวอร์ชัน AppCompat รองรับอีโมจิในตัว อินพุต
• การแสดงผล: TextView, ToggleButton, Switch, Button, CheckedTextView, RadioButton, CheckBox, AutoCompleteTextView และ MultiAutoCompleteTextView เวอร์ชัน AppCompat ทั้งหมดรองรับการแสดงอีโมจิ เพื่อให้รูปลักษณ์ของอีโมจิสอดคล้องกันในอุปกรณ์และแพลตฟอร์มต่างๆ ที่มีผู้ให้บริการแบบฟอนต์ที่ดาวน์โหลดได้ซึ่งเข้ากันได้กับ Emoji2 เช่น อุปกรณ์ที่ทำงานด้วยบริการ Google Play

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

การใช้เครื่องมือเลือกอีโมจิ

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

เริ่มต้นด้วยการนําเข้าคลังใน build.gradle

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

การใช้เครื่องมือเลือกอีโมจิกับเครื่องมือเขียน

คุณสร้างเครื่องมือเลือกอีโมจิใน "เขียน" โดยใช้ AndroidView Composable ข้อมูลโค้ดนี้มี Listener ที่จะแจ้งให้คุณทราบเมื่อมีการเลือกอีโมจิ

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

Compose 1.7 เพิ่มฟังก์ชันการทำงานใหม่ๆ มากมายลงใน BasicTextField ซึ่งรวมถึงการรองรับ TextFieldState ซึ่งอยู่ใน ViewModel

private val emojiTextFieldState = TextFieldState()

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

คุณสามารถใช้ TextFieldState เพื่อแทรกข้อความตรงตำแหน่งเคอร์เซอร์ หรือ แทนที่ข้อความที่เลือก เสมือนว่าคุณกำลังพิมพ์ใน 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)
    }
}

ฟังก์ชันการเรียกกลับจะอัปเดต BasicTextField ได้โดยใช้ฟังก์ชันตัวช่วยต่อไปนี้

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

การใช้เครื่องมือเลือกอีโมจิกับมุมมอง

เครื่องมือเลือกอีโมจิยังใช้กับ View ได้ดีอีกด้วย

ขยาย Emoji PickerView (ไม่บังคับ) ตั้งค่า emojiGridColumns และ emojiGridRows ตามขนาดที่ต้องการของเซลล์อีโมจิแต่ละเซลล์

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

แทรกอักขระที่ตำแหน่งเคอร์เซอร์หรือแทนที่ข้อความที่เลือก ดังนี้

// 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)
}

ใส่อีโมจิที่เลือกให้ผู้ฟังและใช้เพื่อเพิ่มอักขระต่อท้าย EditText

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

จัดรูปแบบข้อความ

โดยการใช้ความโดดเด่นที่มองเห็นได้กับข้อความ เช่น รูปแบบอักษร ขนาด น้ำหนัก และสี ช่วยเพิ่มประสิทธิภาพการอ่าน มุมมองต้นไม้ และความสวยงามโดยรวม อินเทอร์เฟซผู้ใช้ของแอปโซเชียลหรือแอปรับส่งข้อความ ความช่วยเหลือเกี่ยวกับรูปแบบข้อความ ผู้ใช้แยกวิเคราะห์ข้อมูล สามารถแยกประเภท ข้อความ และระบุองค์ประกอบที่สำคัญ

จัดรูปแบบข้อความใน "เขียน"

คอมโพเนนต์ที่เขียนได้ด้วย Text มีตัวเลือกการจัดรูปแบบมากมาย รวมถึง

• สีข้อความ: ตั้งค่าเป็น Color เพื่อให้ข้อความโดดเด่น
• ขนาดแบบอักษร: ควบคุม FontSize สำหรับการปรับขนาดที่เหมาะสม
• รูปแบบอักษร: ใช้ FontStyle เพื่อเป็นตัวเอียง
• น้ำหนักตัวอักษร: ปรับ FontWeight สำหรับรูปแบบข้อความตัวหนา สีอ่อน และอื่นๆ
• ชุดแบบอักษร: ใช้ FontFamily เพื่อเลือกแบบอักษรที่เหมาะสม

Text(
    text = "Hello 👋",
    color = Color.Blue
    fontSize = 18.sp,
    fontWeight = FontWeight.Bold,
    fontFamily = FontFamily.SansSerif
)

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

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
        ),
    ),
)

เพิ่มรูปแบบหลายอย่างในข้อความ

คุณตั้งค่ารูปแบบต่างๆ ภายใน Text Composable เดียวกันได้โดยใช้ AnnotatedString

AnnotatedString มีเครื่องมือสร้างที่ปลอดภัยต่อประเภท buildAnnotatedString เพื่อช่วยให้คุณสร้างได้ง่ายขึ้น

@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")
        }
    )
}

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

จัดรูปแบบข้อความในมุมมอง

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

รองรับแป้นพิมพ์รูปภาพและเนื้อหาอื่นๆ แบบริชมีเดีย

ผู้ใช้มักต้องการสื่อสารโดยใช้สติกเกอร์ ภาพเคลื่อนไหว และเนื้อหาอื่นๆ ที่สื่อความหมายได้ชัดเจน Android 12 (API ระดับ 31) ได้เปิดตัว API แบบรวมที่ช่วยให้แอปรับเนื้อหาจากแหล่งที่มาต่างๆ ได้ง่ายๆ ไม่ว่าจะเป็นคลิปบอร์ด คีย์บอร์ด หรือการลากและวาง สำหรับย้อนกลับ ความเข้ากันได้กับ Android เวอร์ชันก่อนหน้า (ปัจจุบันกลับไปที่ API ระดับ 14) เราขอแนะนำให้ใช้ API นี้ในเวอร์ชัน Android Jetpack (AndroidX)

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีรองรับในแอปได้ที่รับเนื้อหาแบบริชมีเดีย ตอนนี้ Jetpack Compose มีตัวแก้ไข dragAndDropSource และ dragAndDropTarget เพื่อช่วยลดความซับซ้อนในการใช้การลากและวางภายในแอปและระหว่างแอปอื่นๆ