Tekst w aplikacjach społecznościowych i do obsługi wiadomości

Tekst znajduje się w centrum aplikacji społecznościowych, gdzie użytkownicy dzielą się swoimi przemyśleniami, emocje i opowiadać historie. Z tego dokumentu dowiesz się, jak pracować z tekstem Skupiamy się na emotikonach, stylu i integracji szczegółowych treści.

Praca z emotikonami

Emoji stały się nieodłączną częścią współczesnej komunikacji, zwłaszcza w przypadku aplikacji społecznościowych i do obsługi wiadomości. Przełamują bariery językowe, umożliwiając użytkownikom szybkie i skuteczne wyrażanie emocji i pomysłów.

Obsługa emotikonów w sekcji „Tworzenie”

Jetpack Compose, nowoczesny deklaratywny zestaw narzędzi do tworzenia interfejsu użytkownika, upraszcza obsługę emotikonów:

Dane wejściowe: komponent TextField natywnie obsługuje wprowadzanie emotikonów.
Wyświetlanie: komponent Text w Compose poprawnie wyświetla emotikony, zapewniając spójny wygląd na różnych urządzeniach i platformach, które oferują pobieranie czcionek zgodnych z emoji2, takich jak urządzenia z usługami Google Play.

Wyświetlanie emotikonów, w tym instrukcje wyświetlania emotikonów w Jetpack Compose upewnić się, że aplikacja wyświetla najnowsze czcionki emotikonów, jak sprawdzić, czy emotikony działać prawidłowo, jeśli aplikacja używa w ramach tej samej aktywności zarówno wyświetlanie, jak i tworzenie wiadomości, i dowiedzieć się, co zrobić, gdy emotikony nie wyświetlają się zgodnie z oczekiwaniami.

Obsługa emotikonów w Zdjęciach

Jeśli używasz widoków Androida, biblioteka AppCompat w wersji 1.4 lub nowszej zapewnia obsługa emotikonów dla podklas platformy TextView:

Dane wejściowe: wersja EditText AppCompat natywnie obsługuje emotikony dane wejściowe.
Sieć reklamowa: wersje AppCompat TextView, ToggleButton, Switch, Button, CheckedTextView, RadioButton, CheckBox, AutoCompleteTextView i MultiAutoCompleteTextView wszystkie obsługują wyświetlanie emotikonów, co zapewnia na różnych urządzeniach i platformach, które zapewniają zgodność z emotikonem2 dostawców czcionek do pobrania, takich jak urządzenia z Usługi Google Play.

Jeśli tworzysz widok niestandardowy, który jest bezpośrednim lub pośrednim podklasem. z TextView, rozszerzenie wdrożenia AppCompat (zamiast platformy implementacji), aby skorzystać z wbudowanej obsługi emotikonów. Wspieraj nowoczesne emotikony jak przetestować integrację emotikonów i rozwiązać problem, obsługuj emotikony bez AppCompat, obsługiwać emotikony w widokach niestandardowych oraz obsługiwać inne czcionki i czcionki dostawców usług itp.

Korzystanie z selektora emotikonów

Jetpack Picker to widok Androida, który zapewnia podzielona na kategorie lista emotikonów, przyklejone warianty i obsługa ostatnio używanych. emotikony – zgodne z wieloma wersjami Androida i różnych urządzeń. To łatwy sposób na ulepszanie integracji emotikonów w aplikacji.

Zacznij od zaimportowania biblioteki do build.gradle.

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

Korzystanie z selektora emotikonów podczas tworzenia wiadomości

Selektor emotikonów tworzysz w sekcji Redagowanie za pomocą komponentu AndroidView. Ten fragment kodu zawiera listenera, który informuje, gdy wybrany zostanie emotikon:

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

Compose 1.7 wprowadza do BasicTextField wiele nowych funkcji, w tym: obsługa modelu TextFieldState, który może znajdować się w modelu ViewModel:

private val emojiTextFieldState = TextFieldState()

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

Aby wstawić tekst w miejscu kursora lub zastąpić zaznaczony tekst, możesz użyć TextFieldState, tak jakbyś wpisywał tekst w programie 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)
    }
}

Wywołanie zwrotne może zaktualizować BasicTextField za pomocą funkcji pomocniczej:

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

Korzystanie z selektora emotikonów w widoku

Selektor emotikonów dobrze współpracuje też z widokami.

Zwiększ wartość EmojiPickerView. Opcjonalnie ustaw emotikonyGridColumn i emojiGridRows na podstawie żądanego rozmiaru każdej komórki emotikonów.

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

Wstaw znak w pozycji kursora lub zastąp zaznaczony tekst:

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

Przekaż listenera do wybranego emotikonu i użyj go do dodania znaków do EditText.

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

Styl tekstu

Dzięki wizualnemu odróżnieniu tekstu, takiemu jak style, rozmiary, wagi, i kolorystyką, można poprawić czytelność, hierarchię i ogólną estetykę atrakcyjności interfejsu aplikacji społecznościowej lub komunikatora. Pomoc dotycząca stylów tekstu szybko przeanalizować informacje, rozróżnić typy i identyfikować ważne elementy.

Stylizowanie tekstu w oknie tworzenia wiadomości

Funkcja kompozycyjna Text ma wiele opcji stylu, w tym:

Kolor tekstu: ustaw Color, aby wyróżnić tekst.
Rozmiar czcionki: ustaw odpowiednią skalę FontSize.
Styl czcionki: użyj FontStyle, aby zastosować kursywę.
Grubość czcionki: dostosuj FontWeight, aby zmienić pogrubienie, jasny tekst itp.
Rodzina czcionek: kliknij FontFamily, aby wybrać odpowiednią czcionkę.

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

Możesz spójnie ustawiać te opcje stylizacji w całym programie za pomocą motywów.

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

Dodawanie wielu stylów do tekstu

Możesz ustawić różne style w ramach tego samego elementu kompozycyjnego Text za pomocą AnnotatedString

AnnotatedString ma kreatora z zabezpieczeniem typu (buildAnnotatedString), który ułatwia tworzenie.

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

Więcej informacji o stylach tekstu w aplikacji Redagowanie znajdziesz w artykule Stylizacja tekstu, w tym o dodawaniu cienia, zaawansowanych stylach za pomocą pędzla i przezroczystości.

Zmienianie stylu tekstu w Zdjęciach

W przypadku Widoku możesz polegać na stylach i motywach, aby zapewnić spójność typografii. Więcej informacji o stosowaniu niestandardowych motywów do widoków w aplikacji znajdziesz w sekcji Style i motywy. Jeśli chcesz ustawić różne style w ramach jednego widoku tekstu, zapoznaj się z sekcją Przedziały, aby dowiedzieć się, jak zmieniać tekst na różne sposoby, np. dodając kolor, czyniąc tekst klikalnym, skalując rozmiar tekstu i rysując tekst w niestandardowy sposób.

Obsługa klawiatur z obrazami i innych treści multimedialnych

Użytkownicy często chcą się komunikować za pomocą naklejek, animacji i innych rodzajów treści. szczegółowe treści. Aby ułatwić aplikacjom otrzymywanie bogatych treści, w Androidzie 12 (poziom API 31) wprowadziliśmy ujednolicony interfejs API, który umożliwia aplikacji przyjmowanie treści z dowolnego źródła: schowka, klawiatury lub przeciągania i upuszczania. Do tyłu zgodność z poprzednimi wersjami Androida (obecnie aż do poziomu 14 interfejsu API), zalecamy używanie tego interfejsu API w wersji Android Jetpack (AndroidX).

Do komponentów interfejsu dołączasz OnReceiveContentListener i otrzymujesz wywołanie zwrotne, gdy treści zostaną wstawione za pomocą dowolnego mechanizmu. Funkcja wywołania zwrotnego staje się jedynym miejscem, w którym Twój kod może obsługiwać otrzymywanie wszystkich treści, od zwykłego tekstu po stylizowany tekst, znaczniki, obrazy, filmy, pliki audio i inne.

Aby dowiedzieć się więcej o wsparciu w aplikacji, przeczytaj artykuł Otrzymywanie bogatych treści. Jetpack Compose zawiera teraz modyfikatory dragAndDropSource i dragAndDropTarget, które ułatwiają implementowanie funkcji przeciągania i upuszczania w aplikacji oraz między innymi aplikacjami.

Tekst w aplikacjach społecznościowych i do obsługi wiadomości Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.