Android project combat (14): TextView displays html-style text

Original: Android project combat (14): TextView displays html-style text

Project requirements:

TextView displays a piece of text in the format: Snow White (name, number of words uncertain) sent you 2 (number of messages, uncertain) messages

The length of the names and numbers in this text is indeterminate, and it is also required that the names and numbers have their own colors.

At first I thought to use (turn) SpannableString and SpannableStringBuilder to achieve, because it can realize a piece of text to display different colors

But it seems that it can only fix which position of the text to display what style, so I gave up.

Then I thought of using 

Html.fromHtml(String str)

to realise.

Looking at the method name is very simple, that is, it can display the text in html format corresponding to the string str

for example:

Html.fromHtml(<font color='red' size='24'>你好</font>" )

Just show hello in html format, red font size 24 

 

Then look at the simple use of this method through a small demo:

I have three strings. The length of the names and numbers in the strings are different. To achieve the effect that the name is displayed in red, the number is displayed in blue, and other texts are displayed in gray by default.

Write the layout file first, three TextViews

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/html_text"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/html_text2"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/html_text3"
        android:gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</LinearLayout>

Then Activity's onCreate() method

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate (savedInstanceState);
        setContentView(R.layout.activity_main);

        textView = (TextView) findViewById(R.id.html_text);
        textView2 = (TextView) findViewById(R.id.html_text2);
        textView3 = (TextView) findViewById(R.id.html_text3);
        names = new ArrayList<>();
        counts = new ArrayList<>();
        message = new ArrayList<>();

        names.add( " Ultraman " );
        names.add( " Snow White and the Seven Dwarfs " );
        names.add( " Wodetian · Werner Moshuai · Shuide · Buyao Buyaude " );

        counts.add(1);
        counts.add(123);
        counts.add(9090909);

        for (int i = 0; i < 3; i++) {
            message.add("<font color='red' size='20'>"+names.get(i)+"</font>"+"向您发来"+
                        "<font color='blue' size='30'>"+counts.get(i)+"</font>"+"条信息");
        }

        textView.setText(Html.fromHtml(message.get(0)));
        textView2.setText(Html.fromHtml(message.get(1)));
        textView3.setText(Html.fromHtml(message.get(2)));

    }

Take a look at the renderings, is it very simple, as long as you can simply understand html, you can achieve this effect