社交和訊息應用程式中的文字

文字是社交應用程式的核心，可讓使用者分享想法、表達想法 以及說故事本文件說明如何處理文字 著重於表情符號、樣式和多媒體內容整合。

使用表情符號

表情符號已成為現代溝通不可或缺的一部分，特別是在社群媒體和訊息應用程式中。這類表情符號可跨越語言障礙，讓使用者快速且有效地表達情緒和想法。

Compose 中的表情符號支援

Jetpack Compose 是 Android 的新型宣告式 UI 工具包，可簡化表情符號處理作業：

  • 輸入：TextField 元件原生支援表情符號輸入功能。
  • 顯示：Compose 的 Text 元件可正確顯示表情符號，確保在提供 emoji2 相容可下載字型供應程式的裝置和平台上，表情符號的顯示方式一致，例如搭載 Google Play 服務的裝置。

「顯示表情符號」一文將說明如何在 Jetpack Compose 中顯示表情符號，包括如何確保應用程式顯示最新的表情符號字型、如何確保表情符號在應用程式同時在同一個 Activity 中使用 View 和 Compose 時正常運作，以及如何排解表情符號未如預期顯示的問題。

在 View 中支援表情符號

如果您使用 Android View，則 AppCompat 程式庫 1.4 以上版本可提供 支援 TextView 平台子類別的表情符號：

如果您要建立自訂檢視區塊 (直接或間接子類別) 的 TextView，請擴充 AppCompat 實作項目 (而非平台) )，取得內建的表情符號支援。支援新型表情符號節目 如何測試及排解表情符號整合的問題；在不使用表情符號的情況下支援表情符號 AppCompat、在自訂檢視畫面中支援表情符號、支援替代字型或字型 供應商等

使用表情符號挑選器

Jetpack Emoji Picker 是 Android View，可提供 表情符號、固定式變體及最近使用的支援清單 表情符號：支援多種 Android 版本和裝置。這很簡單 來提升應用程式的表情符號整合功能。

首先，請在 build.gradle 中匯入程式庫。

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

將表情符號挑選器與 Compose 搭配使用

您可以使用 AndroidView，在 Compose 中建構表情符號挑選器 可組合函式。這個程式碼片段包含事件監聽器，可在出現表情符號時通知你 已選取：

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 在遊標位置插入文字，或是 取代選取的文字，就像在輸入法編輯器中輸入一樣：

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 使用表情符號挑選器

表情符號挑選器也適用於「檢視畫面」，

加載 EmojiPickerView。您可以根據每個表情符號儲存格的大小，選擇設定 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)
}

設定文字樣式

對文字套用視覺區別 例如字型樣式、大小、粗細 和顏色 可以提高內容的可讀性、階層結構和整體美感 吸引社交或訊息應用程式的使用者介面文字樣式說明 以便快速剖析資訊 以及辨識重要元素

在 Compose 中設定文字樣式

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

在文字中新增多種樣式

您可以使用 AnnotatedString，在同一個 Text 可組合項中設定不同的樣式。

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

如要進一步瞭解 Compose 中的文字樣式，請參閱「樣式文字」一文。 包括新增陰影、使用筆刷進階樣式，以及 不透明度。

設定 View 中的文字樣式

透過 View，您可以使用樣式和主題確保字體排版一致。如要進一步瞭解如何為應用程式中的檢視區塊套用自訂主題，請參閱「樣式和主題」。如果您想在單一文字檢視區塊中設定不同樣式，請參閱「Span」，進一步瞭解如何以各種方式變更文字，包括新增顏色、使文字可點選、調整文字大小，以及以自訂方式繪製文字。

支援圖片鍵盤和其他互動式內容

使用者通常會想使用貼圖、動畫和其他類型的多媒體內容進行溝通。如要讓應用程式輕鬆接收多媒體內容，Android 12 (API 級別 31) 導入了統合式 API，此 API 可讓您的應用程式接受來自 任何來源：剪貼簿、鍵盤或拖曳。往後適用 與先前的 Android 版本相容 (目前可回溯至 API 級別 14)， 建議您使用這個 API 的 Android Jetpack (AndroidX) 版本。

您可以將 OnReceiveContentListener 附加至 UI 元件，並在透過任何機制插入內容時接收回呼。回呼會變成 您的程式碼可以集中處理接收所有內容 將文字轉換為標記、圖片、影片、音訊檔案等

如要進一步瞭解如何導入支援服務，請參閱「接收多媒體內容」一文 Jetpack Compose 現在有 dragAndDropSource 和 dragAndDropTarget 修飾符可簡化導入拖曳方式 你的應用程式內和其他應用程式之間