Ajouter une icône au dernier mot du texte dans Jetpack Compose

Question

Je veux afficher un texte dynamique de plusieurs lignes et une icône à la fin de la dernière ligne. Cette icône peut être animée. J'ai essayé quelques méthodes mais je n'ai pas encore réussi. Comment dois-je faire ?

Exemple de vue qui avait la même idée avec ma mise en page

Answer 1

Dans le Text composable, vous pouvez utiliser l'option inlineContent pour définir une carte de balises qui remplacent certaines plages du texte. Il est utilisé pour insérer des composables dans la mise en page du texte.
Ensuite, en utilisant un Placeholder vous pouvez réserver un espace dans la mise en page du texte.

Quelque chose comme :

val myId = "inlineContent"
val text = buildAnnotatedString {
    append("Where do you like to go?")
    // Append a placeholder string "[icon]" and attach an annotation "inlineContent" on it.
    appendInlineContent(myId, "[icon]")
}

val inlineContent = mapOf(
    Pair(
        // This tells the [CoreText] to replace the placeholder string "[icon]" by
        // the composable given in the [InlineTextContent] object.
        myId,
        InlineTextContent(
            // Placeholder tells text layout the expected size and vertical alignment of
            // children composable.
            Placeholder(
                width = 12.sp,
                height = 12.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
            )
        ) {
            // This Icon will fill maximum size, which is specified by the [Placeholder]
            // above. Notice the width and height in [Placeholder] are specified in TextUnit,
            // and are converted into pixel by text layout.

            Icon(Icons.Filled.Face,"",tint = Color.Red)
        }
    )
)

Text(text = text,
     modifier = Modifier.width(100.dp),
     inlineContent = inlineContent)

Il est composable, vous pouvez donc utiliser votre animation préférée.

Juste un exemple :

var blue by remember { mutableStateOf(false) }
val color by animateColorAsState(if (blue) Blue else Red,
    animationSpec = tween(
        durationMillis = 3000
    ))

et changez l'icône en

Icon(Icons.Filled.Face,"", tint = color)

Answer 2

Je veux afficher un texte dynamique de plusieurs lignes

Pour ce faire, créez un TextView dans le fichier xml de votre activité avec

android:inputType="textMultiLine"

...une icône à la fin de la dernière ligne

Si vous souhaitez placer une icône à la fin de ce TextView, vous pouvez créer un ConstraintLayout qui contiendra l'icône de l'écran. TextView y ImageView pour votre icône.

Cela pourrait ressembler à quelque chose comme ça :

<androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:id="@+id/textView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:inputType="textMultiLine"
            android:text="Some kind of text"
            android:textSize="22sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:src="@mipmap/man"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="@+id/textView"
            app:layout_constraintHorizontal_bias="1.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0" />

    </androidx.constraintlayout.widget.ConstraintLayout>

Le résultat étant :

Cette icône peut être animée.

Avec cela, vous pouvez emprunter de nombreuses voies. Vous pouvez créer une animation en fondu, une animation en diapositives, ou bien d'autres encore. Dans le cas où vous voulez créer une animation en fondu, vous pouvez essayer quelque chose comme ceci :

public void fadeAnimation(){
        AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.0f);
        alphaAnimation.setRepeatCount(1);
        alphaAnimation.setDuration(300);
        alphaAnimation.setRepeatMode(Animation.REVERSE);

        imageView.clearAnimation();
        imageView.setAnimation(alphaAnimation);

        alphaAnimation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                imageView.setTextColor(Color.GREEN);
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                imageView.setTextColor(Color.WHITE);
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });
    }

Vous ferez un fondu de Alpha 1.0 à 0.0, puis de 0.0 à 1.0 et vous changerez également la couleur du texte. Cela créera un effet de fondu sortant et de fondu entrant.

N'hésitez pas à modifier ce code comme vous le souhaitez.