Question

我目前正面临一个问题，我希望在文本的一部分后面显示一个形状，然后在文本的下一部分后面显示一个不同的形状。我尝试使用多个TextView，但我不知道如何让它们显示就像是一个文本。我也尝试过使用SpannableString，但我无法做到这一点。为了更清楚，这就是我想要的方式：

我的形状是XML文件，作为drawables加载。

我尝试过的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);

但文字和背景都没有出现在这里。尝试另一个drawable使得drawable显示，但不是文本。

这是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。使用自定义形状的主要好处是通过使用渐变来增强外观。

步骤：

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

$('#btn').click(function(e) { $('#container').slideDown(); });
在TextView的布局文件中，添加属性 android：background =＆＃34; @ drawable / yourshape ＆＃34; ：

<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>
在输出后创建此布局。

Answer 2

要为TextView使用android:background属性应用this answer，或者以编程方式创建，请使用setBackground的{{1}}方法。要像您展示的那样安排TextView，请使用Google的TextView：https://github.com/google/flexbox-layout

Answer 3

没有任何图书馆，这很容易。这是工作示例

<强>已更新

定义主要方法。这将调用创建视图。（您可以使用自定义布局或其他内容）。然后创建随机形状作为视图和颜色的背景。

/**
 * Max Width for all random text.
 * Should include margins of layout, etc.
 */
private int getMaxWidthLine () {
    Display display = getWindowManager().getDefaultDisplay();
    Point size = new Point();
    display.getSize(size);
    return size.x - 20;
}
/**
 * Parent of all Random TextView should LinerLayout with vertical
 * orientation, to apply building Views line by line, based on Width.
 */
private void addRandomTextInLine (LinearLayout mainViewGroup, TextView textView) {
    LinearLayout lastTextHolder;
    if (mainViewGroup.getChildCount() > 0) {
        lastTextHolder = (LinearLayout) mainViewGroup.
                getChildAt(mainViewGroup.getChildCount() - 1);
    } else {
        LinearLayout firstTextHolder = new LinearLayout(MainActivity.this);
        firstTextHolder.setLayoutParams(new ActionBar.LayoutParams
                (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        firstTextHolder.addView(textView);
        mainViewGroup.addView(firstTextHolder);
        return;
    }
    mainViewGroup.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
    lastTextHolder.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
    textView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);

    int maxParentWidth = getMaxWidthLine();
    int lastHolderWidth = lastTextHolder.getMeasuredWidth();
    int nextTextWidth = textView.getMeasuredWidth();

    if (maxParentWidth - lastHolderWidth >= nextTextWidth ) {
        lastTextHolder.addView(textView);
    } else {
        LinearLayout newTextHolder = new LinearLayout(MainActivity.this);
        newTextHolder.setLayoutParams(new ActionBar.LayoutParams
                (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT));
        newTextHolder.addView(textView);
        mainViewGroup.addView(newTextHolder);
    }
}

/**
 * Start method, for generation TextView with Random Background
 */
@SuppressWarnings("deprecation")
private void addRandomCornersText (ViewGroup group, String text) {
    /*
     * Just defining View programmatically.
     * You can use inflate from layout.
     */
    TextView itemText = new TextView(MainActivity.this);
    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams
            (ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    float scale = getResources().getDisplayMetrics().density;
    int margins  = (int) (5 * scale + 0.5f);
    int padding = (int) (10 * scale + 0.5f);
    params.setMargins(margins, margins, margins, margins);
    itemText.setPadding(padding, padding, padding, padding);
    itemText.setLayoutParams(params);

    /*
     * Generate random shapes/corners and
     * applying this changes to the view
     */
    Random random = new Random();
    int r = random.nextInt(100);
    float[] outerR = new float[] {r, r, r, r, r, r, r, r};
    ShapeDrawable shape = new ShapeDrawable(new RoundRectShape(outerR, null, null));
    shape.getPaint().setColor(Color.argb(255, random.nextInt(256),
            random.nextInt(256), random.nextInt(256)));

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
        itemText.setBackground(shape);
    } else {
        itemText.setBackgroundDrawable(shape);
    }
    itemText.setText(text);
    addRandomTextInLine((LinearLayout) group, itemText);
}

}

致电，无论您需要何种方法。哪个将返回随机颜色和形状TextView。

ViewGroup viewGroup = (ViewGroup) findViewById(R.id.main_text_holder);
for (int i = 0; i < 15; i++) {
    addRandomCornersText(viewGroup, LoremIpsum.getInstance().getWords(1, 4));
}

比你下面的东西要多。但是还有一些额外的改进，例如为TextView文本颜色添加反转颜色，某些宽度设置等。

示例

Answer 4

您可以使用Android自定义按钮生成器，根据您的选择将背景设置为按钮

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

4 个答案: