複数の種類の図形をAndroidのテキストの背後に表示

Question

現在、テキストの一部の背後にシェイプを表示し、次にテキストの次の部分の背後に別のシェイプを表示したいという問題に直面しています。私は複数のTextViewsを使ってみましたが、1つのテキストのように表示する方法を知りませんでした。私も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は、私はこの結果に来ることを示唆した：

これは改善ですが、まだ完了していません。私が使用していますフレキシボックスのコードは次のとおりです。

<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

this answerに似android:backgroundTextView使用するための属性を背景を適用するか、または作成するとき、プログラムでTextViewのsetBackground方法を使用してください。 TextViewさんと同じようにご紹介するには、https://github.com/google/flexbox-layout

Answer 2

ライブラリはなくても簡単です。ここでは作業の例では、 mainメソッドを定義し

1. を更新し

   です。これは、作成ビューを起動します。 （あなたはカスタムレイアウトなどを使用することができます）。そして、ビューと色の背景としてランダムな図形を作成します。あなたの方法を必要な場所

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

   }

2. コール、。ランダムな色と形状を返すTextView。あなたより

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

がse以下のようなものでしょう。しかし、TextView Text Colorの反転色の追加、いくつかの幅設定などの追加の不具合もあります。

例

Answer 3

あなたが背景属性を使用してのTextViewにあなたの生成されたカスタムシェイプを使用することができます。カスタムシェイプを使用する主な利点は、グラデーションを使用してルックを向上させることです。

ステップ：

1. 描画可能ディレクトリで、あなたのビューのカスタムシェイプリソースレイアウトファイルを作成します。 TextViewのレイアウトファイルで

   <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. 、属性アンドロイド追加：背景= "描画可能/ 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. は、このレイアウトを、 。

Answer 4

あなたは、Androidのカスタムボタン・ジェネレータを使用することができ、お好みに従ってボタンにあなたの答えのための