Question

我想在最后一行的末尾显示一个动态的多行文本和一个图标。这个图标可以是动画的。我尝试了一些方法，但还没有成功。我该怎么办？

与我的布局有相同想法的示例视图

Answer 1

在 Text 可组合中，您可以使用 inlineContent 定义替换特定文本范围的标签映射。它用于将可组合项插入到文本布局中。
然后使用 Placeholder 您可以在文本布局中保留空间。

类似于：

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)

它是可组合的，因此您可以使用自己喜欢的动画。

举个例子：

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

并将图标更改为

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

Answer 2

<块引用>

我想显示动态多行文本

为此，使用

在您的活动的 xml 文件中创建一个 TextView

android:inputType="textMultiLine"

<块引用>

...最后一行末尾的图标

如果您想在此 TextView 的末尾放置一个图标，您可以创建一个 ConstraintLayout 来保存图标的 TextView 和 ImageView。

它可能看起来像这样：

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

结果是：

<块引用>

这个图标可以是动画的。

有了这个，你可以有很多方法。您可以创建淡入淡出动画、幻灯片动画等。如果您想创建淡入淡出动画，可以尝试以下操作：

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

            }
        });
    }

您将从 Alpha 1.0 淡入到 0.0，然后从 0.0 到 1.0 并更改 textColor。这将创建淡出淡出效果。

您可以随意更改此代码。

在 Jetpack Compose 中文本的最后一个单词添加图标

2 个答案: