複数の色付きテキストを持つ単一のTextView


167

タイトルが言うように、1つのtextview要素で2つの異なる色の文字を実現することは可能ですか?



1
質問者が具体的に色を求めているので、それは重複していません。
Iqbal 2017年

これには素晴らしいライブラリがあると思います。blog.stylingandroid.com / rialto
android developer

私もこれに似た動作をするいくつかのライブラリを書いています:github.com/ha-yi/MultiColorTextView
Hayi Nukman '17

回答:


328

はい、Stringwith htmlfont-colorプロパティをフォーマットした場合、それをメソッドに渡しますHtml.fromHtml(your text here)

String text = "<font color=#cc0029>First Color</font> <font color=#ffcc00>Second Color</font>";
yourtextview.setText(Html.fromHtml(text));

また、私にとっても役に立ちました。+1
Hardik Joshi

10
を使用してユーザー入力をエスケープすることを忘れないでくださいHtml.escapeHtml(str)
kelunik 2013年

1
APIレベル1で追加
2red13

3
ただの警告です。テキストを大文字にする必要があるときに問題が発生していました。私はandroid:textAllCaps = "true"をXMLで使用していましたが、同時にHTMLコンテンツが大文字でした。うまくいかなかった。XML属性を削除したところ、問題なく動作しました。コードでsetAllCaps()を使用すると、同じ問題が発生するので注意してください。
joao2fast4u

5
Html.fromHtml(String)は非推奨になりましたHtml.fromHtml(String, Html.FROM_HTML_MODE_LEGACY)。代わりにを使用してください。詳細については、こちらをご覧ください。
JediBurrell 2017

165

次のように、HTMLなしで複数の色の線を印刷できます。

TextView textView = (TextView) findViewById(R.id.mytextview01);
Spannable word = new SpannableString("Your message");        

word.setSpan(new ForegroundColorSpan(Color.BLUE), 0, word.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

textView.setText(word);
Spannable wordTwo = new SpannableString("Your new message");        

wordTwo.setSpan(new ForegroundColorSpan(Color.RED), 0, wordTwo.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
textView.append(wordTwo);

ありがとう、BackgroundColorSpanも実行できます。あなたの例では、小さなタイプミス、WordToSpanとWordtoSpanのONケースに注意して、そこにある
steveh

どのようにのTextViewをテストユニットについて一度は確保するんというColor.RED内のテキストが終了 stackoverflow.com/questions/26611533/...
sudocoder

1
`java.lang.StringIndexOutOfBoundsException:length = 3; index = 12`
Muhammad Babar

1
StringIndexOutOfBoundsException自体は説明です。その長さを超えて文字列にアクセスしています。
Swapnil Kotwal 2015年

1
文字列は修正されなかったため、アプリの実行時に文字列が生成されました。私はこの質問のほとんどすべての答えを試しました。しかし、このソリューションだけが私にとってうまくいきました。
Ms. Sabbir Ahmed

33

Spannable効果を適用するために使用できますTextView

これは、TextViewテキストの最初の部分のみに色を付けるための私の例です(HTMLの例のように文字列にハードコーディングするのではなく、動的に色を設定できます!)

    mTextView.setText("Red text is here", BufferType.SPANNABLE);
    Spannable span = (Spannable) mTextView.getText();
    span.setSpan(new ForegroundColorSpan(0xFFFF0000), 0, "Red".length(),
             Spannable.SPAN_INCLUSIVE_EXCLUSIVE);

この例では、0xFFFF0000を getResources().getColor(R.color.red)


1
この大文字が必要な場合は、単に文字列をtoUpperCase()します。
Graeme

33

私はこのようにしました:

参照を確認

色の設定上のテキストによって文字列の受け渡し色を

private String getColoredSpanned(String text, String color) {
    String input = "<font color=" + color + ">" + text + "</font>";
    return input;
}

以下のコードを呼び出して、TextView / Button / EditTextなどにテキスト設定します

TextView:

TextView txtView = (TextView)findViewById(R.id.txtView);

色付き文字列を取得:

String name = getColoredSpanned("Hiren", "#800000");
String surName = getColoredSpanned("Patel","#000080");

異なる色の2つの文字列のTextView上のテキストを設定します。

txtView.setText(Html.fromHtml(name+" "+surName));

できた


1
nyc one、ただしHTml.fromHtmlはAPI 24から非推奨
Anuraj R

あなたはへの呼び出し置き換えることができますHtml.fromHtml("...")への呼び出しでHtml.fromHtml("...", FROM_HTML_MODE_LEGACY)
stkent

31

SpannableStringBuilderを使用する

SpannableStringBuilder builder = new SpannableStringBuilder();

SpannableString str1= new SpannableString("Text1");
str1.setSpan(new ForegroundColorSpan(Color.RED), 0, str1.length(), 0);
builder.append(str1);

SpannableString str2= new SpannableString(appMode.toString());
str2.setSpan(new ForegroundColorSpan(Color.GREEN), 0, str2.length(), 0);
builder.append(str2);

TextView tv = (TextView) view.findViewById(android.R.id.text1);
tv.setText( builder, TextView.BufferType.SPANNABLE);

8

私はこれをやったやつみんな、それを試してみてください

TextView textView=(TextView)findViewById(R.id.yourTextView);//init

//here I am appending two string into my textView with two diff colors.
//I have done from fragment so I used here getActivity(), 
//If you are trying it from Activity then pass className.this or this; 

textView.append(TextViewUtils.getColoredString(getString(R.string.preString),ContextCompat.getColor(getActivity(),R.color.firstColor)));
textView.append(TextViewUtils.getColoredString(getString(R.string.postString),ContextCompat.getColor(getActivity(),R.color.secondColor)));

TextViewUtilsクラス内にこのメソッドを追加します

 /***
 *
 * @param mString this will setup to your textView
 * @param colorId  text will fill with this color.
 * @return string with color, it will append to textView.
 */
public static Spannable getColoredString(String mString, int colorId) {
    Spannable spannable = new SpannableString(mString);
    spannable.setSpan(new ForegroundColorSpan(colorId), 0, spannable.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    Log.d(TAG,spannable.toString());
    return spannable;
}

私は今更新しました、一度確認してください、それは私のために働いています。
Abdul Rizwan

Myabeあなたはこの文字列を使用するためにHtml.fromHtmlを使用しますか?
Sergey Shustikov

string.xmlファイル内で変数を作成し、これを設定しました。これは私のために機能しています。今これを行っています。ここに文字列を指定してください。
Abdul Rizwan 2016

5

次のように、stringsファイルで文字列を使用することをお勧めします。

    <string name="some_text">
<![CDATA[
normal color <font color=\'#06a7eb\'>special color</font>]]>
    </string>

使用法:

textView.text=HtmlCompat.fromHtml(getString(R.string.some_text), HtmlCompat.FROM_HTML_MODE_LEGACY)

4

私はこれに似た他の質問のコードを書き留めましたが、その質問は重複しているのでそこには答えられないので、誰かが同じ要件を探している場合はここに私のコードを入れています。

完全に機能するコードではありません。機能させるには、いくつかの小さな変更を加える必要があります。

これがコードです:

私は、@ Graemeの、拡張可能なテキストを使用するという考えを使用しました。

String colorfulText = "colorfulText";       
    Spannable span = new SpannableString(colorfulText);             

    for ( int i = 0, len = colorfulText.length(); i < len; i++ ){
        span.setSpan(new ForegroundColorSpan(getRandomColor()), i, i+1,Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);                     
    }   

    ((TextView)findViewById(R.id.txtSplashscreenCopywrite)).setText(span);

ランダムカラー法:

  private int getRandomColor(){
        Random rnd = new Random();
        return Color.argb(255, rnd.nextInt(256), rnd.nextInt(256), rnd.nextInt(256));
    }

2

これを試して:

mBox = new TextView(context);
mBox.setText(Html.fromHtml("<b>" + title + "</b>" +  "<br />" + 
      "<small>" + description + "</small>" + "<br />" + 
      "<small>" + DateAdded + "</small>"));

2

HTML形式の解析よりも高速であるため、可能な場合はHTML形式ではなくSpannableBuilderクラスを使用してください。Githubで私の独自のベンチマーク「SpannableBuilderとHTML」を参照してください 。


1

素晴らしい答えです!Spannableを使用して、虹色のテキストを作成することができました(これを任意の色の配列で繰り返すことができます)。それが誰かを助けるなら、これが私の方法です:

private Spannable buildRainbowText(String pack_name) {
        int[] colors = new int[]{Color.RED, 0xFFFF9933, Color.YELLOW, Color.GREEN, Color.BLUE, Color.RED, 0xFFFF9933, Color.YELLOW, Color.GREEN, Color.BLUE, Color.RED, 0xFFFF9933, Color.YELLOW, Color.GREEN, Color.BLUE, Color.RED, 0xFFFF9933, Color.YELLOW, Color.GREEN, Color.BLUE};
        Spannable word = new SpannableString(pack_name);
        for(int i = 0; i < word.length(); i++) {
            word.setSpan(new ForegroundColorSpan(colors[i]), i, i+1, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
        }
        return word;
    }

そして、私はただsetText(buildRainboxText(pack_name));します。私が渡すすべての単語は15文字未満であり、これは5色を3回繰り返すだけです。使用する配列の色/長さを調整する必要があります。


1
if (Build.VERSION.SDK_INT >= 24) {
     Html.fromHtml(String, flag) // for 24 API  and more
 } else {
     Html.fromHtml(String) // or for older API 
 }

24 API以上(フラグ)

public static final int FROM_HTML_MODE_COMPACT = 63;
public static final int FROM_HTML_MODE_LEGACY = 0;
public static final int FROM_HTML_OPTION_USE_CSS_COLORS = 256;
public static final int FROM_HTML_SEPARATOR_LINE_BREAK_BLOCKQUOTE = 32;
public static final int FROM_HTML_SEPARATOR_LINE_BREAK_DIV = 16;
public static final int FROM_HTML_SEPARATOR_LINE_BREAK_HEADING = 2;
public static final int FROM_HTML_SEPARATOR_LINE_BREAK_LIST = 8;
public static final int FROM_HTML_SEPARATOR_LINE_BREAK_LIST_ITEM = 4;
public static final int FROM_HTML_SEPARATOR_LINE_BREAK_PARAGRAPH = 1;
public static final int TO_HTML_PARAGRAPH_LINES_CONSECUTIVE = 0;
public static final int TO_HTML_PARAGRAPH_LINES_INDIVIDUAL = 1;

より詳しい情報


1

API 24以降、FROM_HTML_OPTION_USE_CSS_COLORSを使用しているため、色をfont color=" ずっと明確に繰り返すのではなく、CSSで色を定義できます-いくつかのhtmlがあり、いくつかの定義済みタグを強調表示したい場合-htmlの上部にCSSフラグメントを追加するだけです


0

2020年6月25日@canerkaseler

Kotlin Answerを共有したいと思います。

fun setTextColor(tv:TextView, startPosition:Int, endPosition:Int, color:Int){
    val spannableStr = SpannableString(tv.text)

    val underlineSpan = UnderlineSpan()
    spannableStr.setSpan(
        underlineSpan,
        startPosition,
        endPosition,
        Spanned.SPAN_INCLUSIVE_EXCLUSIVE
    )

    val backgroundColorSpan = ForegroundColorSpan(this.resources.getColor(R.color.agreement_color))
    spannableStr.setSpan(
        backgroundColorSpan,
        startPosition,
        endPosition,
        Spanned.SPAN_INCLUSIVE_EXCLUSIVE
    )

    val styleSpanItalic = StyleSpan(Typeface.BOLD)
    spannableStr.setSpan(
        styleSpanItalic,
        startPosition,
        endPosition,
        Spanned.SPAN_INCLUSIVE_EXCLUSIVE
    )

    tv.text = spannableStr
}

その後、上記の関数を呼び出します。複数を呼び出すことができます。

setTextColor(textView, 0, 61, R.color.agreement_color)
setTextColor(textView, 65, 75, R.color.colorPrimary)

出力: 下線と色の違いを確認できます。

@canerkaseler

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.