Android 部分文字顏色大小點擊事件的處理

Android開發中,經常會有這樣一個需求,在一段文字中,爲突出顯示其中幾個文字,會採用不同的顏色,大小來顯示,並且有可能需要點擊處理。先將自己平常用到的幾種方法總結如下。

1. 直接利用佈局實現

2. 利用富文本標籤實現

3. webview嵌套html實現

4. SpannableString實現

現在我有一個需求是顯示:“簡單點說話的方式簡單點”這句話,要求“說話的”三個字爲紅色,字號比其他的字大,並且可以點擊。下面分別採用以上四種方式實現。

首先看下效果圖:

preView

1. 直接利用佈局實現

xml代碼:

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal"
                android:orientation="horizontal">

                <TextView
                    android:id="@+id/tv_1"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="簡單點" />

                <TextView
                    android:id="@+id/tv_2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="說話的"
                    android:textColor="@android:color/holo_red_light" />

                <TextView
                    android:id="@+id/tv_3"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="方式簡單點" />
            </LinearLayout>

MainActivity代碼:

  findViewById(R.id.tv_2).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(MainActivity.this, "說話的", Toast.LENGTH_SHORT).show();
            }
        });

注意:

  1. 直接採用佈局實現是最簡單的方式, 改變字體大小和顏色只需要設置android:textSize=”“和android:textColor=”“就可以了。
  2. 但是當這一行文字的長度超過一行時,會發現,用這種方式就不好控制了。eg:

notice1

2.利用富文本標籤實現

xml代碼:

 <TextView
                android:id="@+id/tv_html"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:gravity="center_horizontal" />

MainActivity代碼:

   TextView tv_html = (TextView) findViewById(R.id.tv_html);
        String s = "簡單點" + "<font color='#ff0000'>" + "說話的" + "</font>" + "方式簡單點";
        tv_html.setText(Html.fromHtml(s));

注意:
1. size用不了。
2. 不支持 style 樣式設置。

3.webview嵌套html

xml代碼:

   <WebView
                android:id="@+id/wv"
                android:layout_width="wrap_content"
                android:layout_marginTop="15dp"
                android:layout_gravity="center"
                android:layout_height="wrap_content"></WebView>

MainActivity代碼:

 WebView webView = (WebView) findViewById(R.id.wv);
        webView.loadUrl("file:///android_asset/redFont.html");
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new ClickMethod(), "Zyc");

redFont.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<p align="center">簡單點<span onclick="zyc()"><font color="#FF0000">說話的</font></span>方式簡單點</p>
</body>
<script type="text/javascript">
    function zyc(){
        Zyc.show("說話的");
        }
</script>
</html>

注意:

1.這種方式是比較強大的,利用HTML CSS JS等可以實現你所想要幾乎所有的效果。

4.SpannableString實現

xml代碼:

  <TextView
                android:id="@+id/tv_yanyuan"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="15dp"
                android:gravity="center_horizontal" />

MainActivity代碼:

  final String geci = getResources().getString(R.string.yanyuan);
        SpannableString ss = new SpannableString(geci);
        ss.setSpan(new ClickableSpan() {

            @Override
            public void onClick(View widget) {
                Toast.makeText(MainActivity.this, geci.substring(geci.length() - 6 - 3, geci.length() - 6), Toast.LENGTH_SHORT).show();
            }
        }, geci.length() - 6 - 3, geci.length() - 6, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
        tv_yanyuan.setText(ss);
        tv_yanyuan.setMovementMethod(LinkMovementMethod
                .getInstance());

注意:

  1. 這種方式,個人感覺不就是HTML的變形麼,所以我推薦使用第三種方式。
  2. 設置顏色ss.setSpan(new ForegroundColorSpan(Color.RED), geci.length() - 4, geci.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);

最後總結下,每種方式都有各自的優缺點,最簡單的就是直接用佈局的方式。在沒有超過一行的情況下,是一種很容易的實現方式;採用富文本可以很簡單的改變部分文字的顏色,但是改變字體的大小和添加監聽事件就不容易了;至於第三種和第四種方式,我就直接推薦WebView了,用HTML,CSS,JS是現在APP開發比較流行的一種方式。

OK,就到這了~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章