java - 在Android中显示文本后面的多种形状

Question

我目前面临一个问题，我想在一部分文本后面显示一个形状，然后在下一部分文本后面显示一个不同的形状。我尝试使用多个 TextView，但我不知道如何让它们显示为一个文本。我也尝试过使用 SpannableString，但无法完成这项工作。为了更清楚地说明这一点，这就是我想要的方式:

我的形状是 XML 文件，作为可绘制对象加载。

我试过的 SpannableString 代码是这样的:

SpannableString ss = new SpannableString("abc");
Drawable d1 = getResources().getDrawable(R.drawable.oval_background);
d1.setBounds(0, 0, d1.getIntrinsicWidth(), d1.getIntrinsicHeight());
ImageSpan span = new ImageSpan(d1, ImageSpan.ALIGN_BASELINE);
ss.setSpan(span, 0, 3, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
tv.setText(ss);

但是文本和背景都没有出现在这里。尝试另一个可绘制对象会显示可绘制对象，但不会显示文本。

这是 oval_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >

  <corners
    android:bottomLeftRadius="30dp"
    android:bottomRightRadius="30dp"
    android:radius="60dp"
    android:topLeftRadius="30dp"
    android:topRightRadius="30dp" />

  <solid android:color="#1287A8" />

  <padding
    android:bottom="5dp"
    android:left="10dp"
    android:right="10dp"
    android:top="5dp" />

</shape>   

现在我的问题是，获得我想要的结果的最佳方法是什么？

编辑:将 Flexbox 用作 @R。 Zagórski 建议，我得出这个结果:

这是一个改进，但还没有完成。我使用的 Flexbox 代码是:

<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:flexDirection="row"
    app:flexWrap="wrap"
    app:justifyContent="flex_start"
    app:alignItems="flex_start"
    app:alignContent="flex_start"
    android:id="@+id/flexbox"
    android:layout_marginTop="@dimen/text_margin_small"
    android:layout_marginLeft="@dimen/text_margin_small"
    android:layout_marginRight="@dimen/text_margin_small">

</com.google.android.flexbox.FlexboxLayout>

Answer 1

您可以使用 background 属性将生成的自定义形状用于 textView。使用自定义形状的主要好处是通过使用渐变增强外观。

步骤:

1. 在可绘制目录中为您的 View 创建自定义形状资源布局文件。

   <shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke android:width="2dp"
android:color="@android:color/holo_purple"/>
<gradient android:angle="90" android:startColor="@color/colorPrimary"
android:endColor="@android:color/holo_green_dark"/>
<corners android:radius="50dp"/>
<padding android:left="2dp" android:bottom="2dp" android:right="2dp"
android:top="2dp"/>
</shape>


2. 在 TextView 的布局文件中，添加属性 android:background="@drawable/yourshape" :

   <TextView
android:textSize="50sp"
android:textColor="@android:color/white"
android:gravity="center_horizontal|center_vertical"
android:text="Hello World!"
android:layout_width="300dp"
android:layout_height="200dp"
android:background="@drawable/shape1"/>

3. 此布局在输出 , 之后创建。