Android學習筆記10:TextView的使用


  TextView不僅可以用於顯示豐富的文本信息,還可以用來顯示圖文並茂的混排頁面。

  1.TextView常用屬性

  TextView的常用屬性有以下一些:

  setText();                          //設置文本內容,同xml中的android:text

  setTextSize();                    //設置文本字體大小,同xml中的android:textSize

  setTextColor();                   //設置文本顏色,同xml中的android:textColor

  setBackgroundColor();         //設置背景顏色,同xml中的android:background

  此外,還可以在xml中設置一些TextView的屬性,如下:

  android:autoLink                 //設置是否顯示為可點擊的鏈接。可選值(none/web/email/phone/map/all)

  android:drawableBottom      //在text的下方輸出一個drawable(圖片)

  android:drawableLeft           //在text的左邊輸出一個drawable(圖片)

  android:drawableRight         //在text的右邊輸出一個drawable(圖片)

  android:drawableTop           //在text的正上方輸出一個drawable(圖片)

  android:drawablePadding     //設置text與drawable(圖片)的間隔,與drawableLeft、drawableRight、drawableTop、drawableBottom一起使用,可設置為負數,單獨使用沒有效果

  android:ellipsize                 //設置當文字過長時,該控件該如何顯示。可設置如下屬性值:"start"省略號顯示在開頭;"end”省略號顯示在結尾;"middle"省略號顯示在中間; "marquee" 以跑馬燈的方式顯示(動畫橫向移動)

  android:gravity                   //設置文本位置,設置成"center",文本將居中顯示

  android:linksClickable          //設置點擊時是否鏈接,即使設置了autoLink

  android:marqueeRepeatLimit     //在ellipsize設定為marquee時,設置重復滾動的次數,設置為marquee_forever時表示無限次。

  android:lines                      //設置文本的行數,設置兩行就顯示兩行,即使第二行沒有數據

  android:shadowRadius         //設置陰影的半徑。設置為0.1就變成字體的顏色了,一般設置為3.0的效果比較好

  android:shadowColor           //指定文本陰影的顏色,需要與shadowRadius一起使用

  android:singleLine               //設置單行顯示

  android:textColorLink           //設置文字鏈接的顏色

  android:textScaleX              //設置文字之間間隔,默認為1.0f

  android:textStyle                //設置字形 bold(粗體) 0, italic(斜體) 1, bolditalic(又粗又斜) 2, 可以設置一個或多個,用“|”隔開

  android:typeface                 //設置文本字體,必須是以下常量值之一:normal 0, sans 1, serif 2, monospace(等寬字體) 3

  2.TextView顯示URL文本

  在TextView中預定義了一些類似HTML的標簽,通過這些標簽可以使TextView控件顯示不同的顏色、大小和字體的文字。HTML的常用標簽有以下一些:

  <font>設置文本的字體、字體顏色、字體尺寸,如:<font size ="3" color = "red">This is Some Text!</font>

  <big>設置大號字體效果

  <small>設置小號字體效果

  <i>設置斜體文本效果

  <b>設置粗體文本效果

  <a>通過使用href屬性,創建指向另外一個文檔的鏈接(超鏈接),如:<a href = http://www.baidu.com>百度</a>

  <br>插入一個簡單的換行符,注意:在HTML中,<br>標簽沒有結束標簽

  <p>自定在其前后創建一些空白

  <img>向網頁中嵌入一幅圖像,該標簽有兩個必須的屬性:src和alt,如:<img src = "/i/tulip.jpg" alt = "郁金香" />

  更多關於HTML中標簽的使用,請參考:http://www.w3school.com.cn/tags/tag_font.asp

  使用這些標簽時,可以用Html.fromHtml()方法將這些標簽的字符串轉換成CharSequence對象,然后在TextView中通過setText()方法將CharSequence對象顯示出來。

  3.TextView中顯示圖片

  要在TextView中顯示圖片,首先需要將要顯示的圖片存放在res目錄下的drawable-hdpi目錄下,在R.java文件中則會自動生成圖片資源的映射信息。然后就可以使用getField()方法通過圖片資源id的變量名來獲取圖片資源了。具體實現方法如下:

獲取圖片資源id
 1     public int getResourceId(String name) {                          //獲取福娃圖片資源id
2 try {
3 Field field = R.drawable.class.getField(name); //根據資源id的變量名獲得Field對象,使用反射機制來實現
4 return Integer.parseInt(field.get(null).toString()); //取得並返回資源id的字段值(靜態變量)
5 }
6 catch (Exception e) {
7 //TODO
8 }
9 return 0;
10 }

  獲得了圖片資源id后,就可以通過Drawable drawable = getResources().getDrawable(getResourceId(source))方法來獲得圖片資源信息進行描畫了。具體實現方法如下:

顯示福娃圖片
 1     public void showFuWaImage() {                                            //顯示福娃圖片        
2 String html_fuwa = "<img src = 'beibei' />" +
3 "<img src = 'jingjing' />" +
4 "<a href = 'http://www.baidu.com'><img src = 'huanhuan' /></a>" + //超鏈接“歡歡”圖片到百度
5 "<img src = 'yingying' />" +
6 "<img src = 'nini' />";
7
8 CharSequence charSequence_fuwa = Html.fromHtml(html_fuwa, new ImageGetter() { //將圖片加載到字符序列中
9 public Drawable getDrawable (String source) {
10 Drawable drawable = getResources().getDrawable(getResourceId(source)); //獲得圖片資源信息
11 if (source.equals("beibei") || source.equals("nini")) { //將圖片“貝貝”和“妮妮”壓縮到原圖片尺寸的80%
12 drawable.setBounds(0, 0, drawable.getIntrinsicWidth()*4/5, drawable.getIntrinsicHeight()*4/5);
13 } else if (source.equals("huanhuan")) { //將圖片“歡歡”放大到原圖片尺寸的120%
14 drawable.setBounds(0, 0, drawable.getIntrinsicWidth()*5/4, drawable.getIntrinsicHeight()*5/4);
15 } else { //其他福娃圖片保持原圖片尺寸
16 drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
17 }
18 return drawable;
19 }
20 }, null);
21
22 textView_fuwaImage.setText(charSequence_fuwa); //將字符序列加載到textView控件中
23 textView_fuwaImage.setMovementMethod(LinkMovementMethod.getInstance());
24 }

  如上,便可以在TextView控件中顯示圖片了。其中,使用到了drawable.setBounds()方法進行圖片的縮放操作,將圖片“貝貝”和“妮妮”壓縮到原圖片尺寸的80%,將圖片“歡歡”放大到原圖片尺寸的120%。並通過<a href = 'http://www.baidu.com'><img src = 'huanhuan' /></a>方法在圖片“歡歡”上添加了超鏈接。最后,使用textView_fuwaImage.setMovementMethod(LinkMovementMethod.getInstance())方法使點擊時產生鏈接效果。

  4.TextView中顯示跑馬燈效果

  要在TextView控件中顯示跑馬燈效果,需要進行以下幾項必須的設置:

  android:singleLine="true"                                       //設置顯示的行數
  android:ellipsize="marquee"                                   //設置以跑馬燈形式顯示
  android:marqueeRepeatLimit="marquee_forever"       //設置跑馬燈顯示的次數
  android:focusable="true"                                        //設置聚焦
  android:focusableInTouchMode="true"                      //
  android:linksClickable="true"                                   //在跑馬燈中設置了超鏈接時,設置了此屬性才能產生鏈接效果

  5.TextView應用實例

  本實例中,在MainActivity.java中定義了4個TextView控件:textView_marquee,textView_fuwaImage,textView_fuwaText,textView_showMyActivity,分別用來顯示跑馬燈,福娃圖片,描述福娃的一段文字,以及一個實現跳轉到MyActivity頁面的標簽。

  MainActivity頁面的實現效果如圖1所示。

  圖1 MainActivity頁面顯示效果

  具體的MainActivity.java源代碼如下。

MainActivity.java源碼
  1 package com.example.android_textview;
2
3 import java.lang.reflect.Field;
4
5 import android.os.Bundle;
6 import android.app.Activity;
7 import android.content.Intent;
8 import android.graphics.Color;
9 import android.graphics.drawable.Drawable;
10 import android.view.Menu;
11 import android.view.MenuItem;
12 import android.view.View;
13 import android.widget.TextView;
14 import android.support.v4.app.NavUtils;
15 import android.text.Html;
16 import android.text.Html.ImageGetter;
17 import android.text.Spannable;
18 import android.text.SpannableString;
19 import android.text.Spanned;
20 import android.text.method.LinkMovementMethod;
21 import android.text.style.ClickableSpan;
22
23 public class MainActivity extends Activity {
24
25 private TextView textView_marquee; //跑馬燈
26 private TextView textView_fuwaImage; //福娃圖片
27 private TextView textView_fuwaText; //描述福娃的文字
28 private TextView textView_showMyActivity; //MyActivity跳轉標簽
29
30 public int getResourceId(String name) { //獲取福娃圖片資源id
31 try {
32 Field field = R.drawable.class.getField(name); //根據資源id的變量名獲得Field對象,使用反射機制來實現
33 return Integer.parseInt(field.get(null).toString()); //取得並返回資源id的字段值(靜態變量)
34 }
35 catch (Exception e) {
36 //TODO
37 }
38 return 0;
39 }
40
41 public void showTextViewMarquee() { //顯示跑馬燈
42 String html_marquee =
43 "萬眾矚目的北京奧運會<a href = ‘http://www.baidu.com’>吉祥物</a>" + //超鏈接“吉祥物”字段到百度
44 "於北京時間11日20:18正式揭曉," +
45 "奧運吉祥物福娃:形象為魚、熊貓、奧運聖火、藏羚羊、燕子," +
46 "名字是貝貝、晶晶、歡歡、迎迎、妮妮,即北京歡迎你";
47 CharSequence charSequence_marquee = Html.fromHtml(html_marquee);
48 textView_marquee.setText(charSequence_marquee);
49 textView_marquee.setMovementMethod(LinkMovementMethod.getInstance()); //點擊時產生超鏈接效果
50 }
51
52 public void showFuWaImage() { //顯示福娃圖片
53 String html_fuwa = "<img src = 'beibei' />" +
54 "<img src = 'jingjing' />" +
55 "<a href = 'http://www.baidu.com'><img src = 'huanhuan' /></a>" + //超鏈接“歡歡”圖片到百度
56 "<img src = 'yingying' />" +
57 "<img src = 'nini' />";
58
59 CharSequence charSequence_fuwa = Html.fromHtml(html_fuwa, new ImageGetter() { //將圖片加載到字符序列中
60 public Drawable getDrawable (String source) {
61 Drawable drawable = getResources().getDrawable(getResourceId(source)); //獲得圖片資源信息
62 if (source.equals("beibei") || source.equals("nini")) { //將圖片“貝貝”和“妮妮”壓縮到原圖片尺寸的80%
63 drawable.setBounds(0, 0, drawable.getIntrinsicWidth()*4/5, drawable.getIntrinsicHeight()*4/5);
64 } else if (source.equals("huanhuan")) { //將圖片“歡歡”放大到原圖片尺寸的120%
65 drawable.setBounds(0, 0, drawable.getIntrinsicWidth()*5/4, drawable.getIntrinsicHeight()*5/4);
66 } else { //其他福娃圖片保持原圖片尺寸
67 drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight());
68 }
69 return drawable;
70 }
71 }, null);
72
73 textView_fuwaImage.setText(charSequence_fuwa); //將字符序列加載到textView控件中
74 textView_fuwaImage.setMovementMethod(LinkMovementMethod.getInstance());
75 }
76
77 public void showFuWaText() { //顯示描述福娃的文字
78 textView_fuwaText.setTextColor(Color.BLACK);
79 textView_fuwaText.setBackgroundColor(Color.WHITE);
80 textView_fuwaText.setTextSize(15);
81 String string_fuwaText =
82 " “福娃”是五個擬人化的娃娃,他們的原型和頭飾蘊含着與海洋、森林、火、大地和天空的聯系," +
83 "應用了中國傳統藝術的表現方式,展現了燦爛的中國文化的博大精深。" +
84 "北京奧運會吉祥物的每個娃娃都代表着一個美好的祝願:" +
85 "貝貝象征繁榮、晶晶象征歡樂、歡歡象征激情、迎迎象征健康、妮妮象征好運。" +
86 "五個福娃分別叫“貝貝”、“晶晶”、“歡歡”、“迎迎”、“妮妮”。各取它們名字中的一個字有次序的組成了諧音“北京歡迎你”。";
87 textView_fuwaText.setText(string_fuwaText);
88 }
89
90 public void showMyActivityPage() { //顯示MyActivity頁面
91 String text_showMyActivity = "跳轉到MyActivity頁面......";
92 SpannableString spannnableString = new SpannableString(text_showMyActivity); //用來拆分字符串
93 spannnableString.setSpan(new ClickableSpan() { //設置點擊時的觸發范圍為整個字符串
94 public void onClick(View widget) {
95 Intent intent = new Intent(MainActivity.this,MyActivity.class); //從MainActivity頁面跳轉到MyActivity頁面
96 startActivity(intent);
97 }
98 }, 0, text_showMyActivity.length(), Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
99 textView_showMyActivity.setText(spannnableString);
100 textView_showMyActivity.setMovementMethod(LinkMovementMethod.getInstance());
101 }
102
103 @Override
104 public void onCreate(Bundle savedInstanceState) {
105 super.onCreate(savedInstanceState);
106 setContentView(R.layout.activity_main);
107
108 textView_marquee = (TextView)this.findViewById(R.id.textview_marquee);
109 textView_fuwaImage = (TextView)this.findViewById(R.id.textview_fuwaImage);
110 textView_fuwaText = (TextView)this.findViewById(R.id.textview_fuwaText);
111 textView_showMyActivity = (TextView)this.findViewById(R.id.textview_showMyActivity);
112
113 showTextViewMarquee(); //顯示跑馬燈
114 showFuWaImage(); //顯示福娃圖片
115 showFuWaText(); //顯示描述福娃的文字
116 showMyActivityPage(); //顯示MyActivity頁面
117 }
118
119 @Override
120 public boolean onCreateOptionsMenu(Menu menu) {
121 getMenuInflater().inflate(R.menu.activity_main, menu);
122 return true;
123 }
124
125 }

  與MainActivity.java相對應的activity_main.xml文件如下。

activity_main.xml源碼
 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:orientation="vertical"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent" >
6
7 <!-- 跑馬燈 -->
8 <TextView
9 android:id="@+id/textview_marquee"
10 android:layout_width="match_parent"
11 android:layout_height="wrap_content"
12 android:singleLine="true"
13 android:ellipsize="marquee"
14 android:marqueeRepeatLimit="marquee_forever"
15 android:focusable="true"
16 android:focusableInTouchMode="true"
17 android:linksClickable="true"
18 android:background="#FFFFFF"
19 android:textColor="#000000"
20 android:layout_margin="10dp"
21 android:padding="10dp"
22 android:textSize="20dp" />
23
24 <!-- 福娃圖片 -->
25 <TextView
26 android:id="@+id/textview_fuwaImage"
27 android:layout_marginLeft="30sp"
28 android:layout_marginTop="10sp"
29 android:layout_marginBottom="10sp"
30 android:layout_width="match_parent"
31 android:layout_height="wrap_content"
32 android:background="#FFFFFF" />
33
34 <!-- 描述福娃的文字 -->
35 <TextView
36 android:id="@+id/textview_fuwaText"
37 android:layout_margin="10dp"
38 android:layout_width="match_parent"
39 android:layout_height="wrap_content" />
40
41 <!-- MyActivity頁面 -->
42 <TextView
43 android:id="@+id/textview_showMyActivity"
44 android:layout_marginLeft="30sp"
45 android:layout_width="match_parent"
46 android:layout_height="wrap_content"
47 android:textSize="15sp" />
48
49 </LinearLayout>

  通過點擊MainActivity頁面中的“跳轉到MyActivity頁面......”,可以實現跳轉到MyActivity頁面的功能。在MyActivity頁面定義了2個TextView控件:textView_androidText和textView_myinfo,分別用來顯示一段描述Android的文字,和使用Html標簽來實現的帶有超鏈接功能的個人信息顯示。

  MyActivity頁面的實現效果如圖2所示。

圖2 MyActivity頁面顯示效果

  具體的MyActivity.java源代碼如下。

MyActivity.java源碼
 1 package com.example.android_textview;
2
3 import android.app.Activity;
4 import android.os.Bundle;
5 import android.text.Html;
6 import android.text.method.LinkMovementMethod;
7 import android.widget.TextView;
8
9 public class MyActivity extends Activity {
10
11 private TextView textView_androidText; //描述Android的文字
12 private TextView textView_myinfo; //我的信息
13
14 public void showAndroidText() { //顯示描述Android的文字
15 String html_androidText = "<font color = 'red'><big>I Love Android......</big></font><p>";
16 html_androidText += "<font color = '#0000FF'><small><i>" +
17 "Android是基於Linux的自由及開放源代碼的操作系統," +
18 "主要使用於便攜設備,如智能手機和平板電腦。</i></small></font><br>";
19 html_androidText += "<font><small><a href = 'http://www.baidu.com'>查看更多......</a></samll></font>";
20
21 CharSequence charSequence = Html.fromHtml(html_androidText);
22 textView_androidText.setText(charSequence);
23 textView_androidText.setMovementMethod(LinkMovementMethod.getInstance()); //點擊的時候產生超鏈接
24 }
25
26 public void showMyInfo() { //顯示我的信息
27 String text_myinfo = "我的博客:http://www.cnblogs.com/menlsh\n";
28 text_myinfo += "我的郵箱:mls19880708@163.com\n";
29 text_myinfo += "我的電話:13478479496";
30 textView_myinfo.setText(text_myinfo);
31 textView_myinfo.setMovementMethod(LinkMovementMethod.getInstance());
32 }
33
34 public void onCreate(Bundle savedInstanceState) {
35 super.onCreate(savedInstanceState);
36 setContentView(R.layout.activity_my);
37
38 textView_androidText = (TextView)this.findViewById(R.id.textview_androidText);
39 textView_myinfo = (TextView)this.findViewById(R.id.textview_myinfo);
40
41 setTitle("我的主頁"); //設置MyActivity的標題
42 showAndroidText(); //顯示描述Android的文字
43 showMyInfo(); //顯示我的信息
44 }
45
46 }

  與MyActivity.java相對應的activity_my.xml文件如下。

activity_my.xml源碼
 1 <?xml version="1.0" encoding="utf-8"?>
2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 android:layout_width="match_parent"
4 android:layout_height="match_parent"
5 android:orientation="vertical" >
6
7 <!-- 描述Android的文字 -->
8 <TextView
9 android:id="@+id/textview_androidText"
10 android:layout_width="match_parent"
11 android:layout_height="wrap_content"
12 android:padding="20sp" />
13
14 <!-- 顯示個人信息 -->
15 <TextView
16 android:id="@+id/textview_myinfo"
17 android:layout_width="match_parent"
18 android:layout_height="wrap_content"
19 android:padding="20sp"
20 android:autoLink="all"
21 android:textSize="12sp" />
22
23 </LinearLayout>

  在MyActivity頁面點擊“我的博客:http://www.cnblogs.com/menlsh”時,可以產生超鏈接效果,如圖3所示。

 圖3 超鏈接效果

 

   PS:本博文是在學習《老羅Android開發視頻教程》之Android常用UI控件編程第一集到第四集后,作為學習筆記總結而得。在此,真心的向羅老師致敬,感謝羅老師無私的開源Android教學精神!

 

 


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com