TextView(文本框)詳解
本節(jié)引言：
學(xué)習(xí)完Android中的六大布局，從本節(jié)開始我們來一個個講解Android中的UI控件，本節(jié)給大家?guī)淼腢I控件是：TextView(文本框)，用于顯示文本的一個控件，另外聲明一點，我不是翻譯API文檔，不會一個個屬性的去扣，只學(xué)實際開發(fā)中常用的，有用的，大家遇到感覺到陌生的屬性可以查詢對應(yīng)的API！當(dāng)然，每一節(jié)開始都會貼這一節(jié)對應(yīng)API文檔的鏈接：TextView API 好了，在開始本節(jié)內(nèi)容前，先要介紹下幾個單位：
dp(dip): device independent pixels(設(shè)備獨立像素). 不同設(shè)備有不同的顯示效果,這個和設(shè)備硬件有關(guān)，一般我們?yōu)榱酥С諻VGA、HVGA和QVGA 推薦使用這個，不依賴像素。px: pixels(像素). 不同設(shè)備顯示效果相同，一般我們HVGA代表320x480像素，這個用的比較多。pt: point，是一個標(biāo)準(zhǔn)的長度單位，1pt＝1/72英寸，用于印刷業(yè)，非常簡單易用；sp: scaled pixels(放大像素). 主要用于字體顯示best for textsize。
1.基礎(chǔ)屬性詳解：
通過下面這個簡單的界面，我們來了解幾個最基本的屬性：
布局代碼：
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:gravity="center"
android:background="../style/images/android-tutorial-textview.html">
<TextView
android:id="@+id/txtOne"
android:layout_width="200dp"
android:layout_height="200dp"
android:gravity="center"
android:text="TextView(顯示框)"
android:textColor="#EA5246"
android:textStyle="bold|italic"
android:background="../style/images/android-tutorial-textview.html"
android:textSize="18sp" />
</RelativeLayout>
上面的TextView中有下述幾個屬性:
id：為TextView設(shè)置一個組件id，根據(jù)id，我們可以在Java代碼中通過findViewById()的方法獲取到該對象，然后進行相關(guān)屬性的設(shè)置，又或者使用RelativeLayout時，參考組件用的也是id！
layout_width：組件的寬度，一般寫：**wrap_content**或者**match_parent(fill_parent)**，前者是控件顯示的內(nèi)容多大，控件就多大，而后者會填滿該控件所在的父容器；當(dāng)然也可以設(shè)置成特定的大小，比如我這里為了顯示效果，設(shè)置成了200dp。
layout_height：組件的寬度，內(nèi)容同上。
gravity：設(shè)置控件中內(nèi)容的對齊方向，TextView中是文字，ImageView中是圖片等等。
text：設(shè)置顯示的文本內(nèi)容，一般我們是把字符串寫到string.xml文件中，然后通過@String/xxx取得對應(yīng)的字符串內(nèi)容的，這里為了方便我直接就寫到""里，不建議這樣寫！??！
textColor：設(shè)置字體顏色，同上，通過colors.xml資源來引用，別直接這樣寫！
textStyle：設(shè)置字體風(fēng)格，三個可選值：**normal**(無效果)，**bold**(加粗)，**italic**(斜體)
textSize：字體大小，單位一般是用sp！
background：控件的背景顏色，可以理解為填充整個控件的顏色，可以是圖片哦！
2.實際開發(fā)例子
2.1 帶陰影的TextView
涉及到的幾個屬性：
android:shadowColor:設(shè)置陰影顏色,需要與shadowRadius一起使用哦!
android:shadowRadius:設(shè)置陰影的模糊程度,設(shè)為0.1就變成字體顏色了,建議使用3.0
android:shadowDx:設(shè)置陰影在水平方向的偏移,就是水平方向陰影開始的橫坐標(biāo)位置
android:shadowDy:設(shè)置陰影在豎直方向的偏移,就是豎直方向陰影開始的縱坐標(biāo)位置
效果圖：
實現(xiàn)代碼：
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:shadowColor="#F9F900"
android:shadowDx="10.0"
android:shadowDy="10.0"
android:shadowRadius="3.0"
android:text="帶陰影的TextView"
android:textColor="#4A4AFF"
android:textSize="30sp" />
2.2 帶邊框的TextView：
如果你想為TextView設(shè)置一個邊框背景，普通矩形邊框或者圓角邊框！下面可能幫到你！ 另外TextView是很多其他控件的父類，比如Button，也可以設(shè)置這樣的邊框！ 實現(xiàn)原理很簡單，自行編寫一個ShapeDrawable的資源文件！然后TextView將blackgroung 設(shè)置為這個drawable資源即可！
簡單說下shapeDrawable資源文件的幾個節(jié)點以及屬性：
<solid android:color = "xxx"> 這個是設(shè)置背景顏色的
<stroke android:width = "xdp" android:color="xxx"> 這個是設(shè)置邊框的粗細(xì),以及邊框顏色的
<padding androidLbottom = "xdp"...> 這個是設(shè)置邊距的
<corners android:topLeftRadius="10px"...> 這個是設(shè)置圓角的
<gradient> 這個是設(shè)置漸變色的,可選屬性有:startColor:起始顏色 endColor:結(jié)束顏色 centerColor:中間顏色angle:方向角度,等于0時,從左到右,然后逆時針方向轉(zhuǎn),當(dāng)angle = 90度時從下往上type:設(shè)置漸變的類型
實現(xiàn)效果圖：
代碼實現(xiàn)：
Step 1:編寫矩形邊框的Drawable：
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 設(shè)置一個黑色邊框 -->
<stroke android:width="2px" android:color="../style/images/android-tutorial-textview.html"/>
<!-- 漸變 -->
<gradient
android:angle="270"
android:endColor="#C0C0C0"
android:startColor="#FCD209" />
<!-- 設(shè)置一下邊距,讓空間大一點 -->
<padding
android:left="5dp"
android:top="5dp"
android:right="5dp"
android:bottom="5dp"/>
</shape>
Step 2:編寫圓角矩形邊框的Drawable：
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 設(shè)置透明背景色 -->
<solid android:color="#87CEEB" />
<!-- 設(shè)置一個黑色邊框 -->
<stroke
android:width="2px"
android:color="../style/images/android-tutorial-textview.html" />
<!-- 設(shè)置四個圓角的半徑 -->
<corners
android:bottomLeftRadius="10px"
android:bottomRightRadius="10px"
android:topLeftRadius="10px"
android:topRightRadius="10px" />
<!-- 設(shè)置一下邊距,讓空間大一點 -->
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
Step 3:將TextView的blackground屬性設(shè)置成上面這兩個Drawable：
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="../style/images/android-tutorial-textview.html"
android:gravity="center"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:id="@+id/txtOne"
android:layout_width="200dp"
android:layout_height="64dp"
android:textSize="18sp"
android:gravity="center"
android:background="../style/images/txt_rectborder"
android:text="矩形邊框的TextView" />
<TextView
android:id="@+id/txtTwo"
android:layout_width="200dp"
android:layout_height="64dp"
android:layout_marginTop="10dp"
android:textSize="18sp"
android:gravity="center"
android:background="../style/images/txt_radiuborder"
android:text="圓角邊框的TextView" />
</LinearLayout>
2.3 帶圖片(drawableXxx)的TextView：
在實際開發(fā)中，我們可能會遇到這種需求：
如圖，要實現(xiàn)這種效果，可能你的想法是：一個ImageView用于顯示圖片 + 一個TextView用于顯示文字，然后把他們丟到一個LinearLayout中，接著依次創(chuàng)建四個這樣的小布局，再另外放到一個大的LinearLayout中，效果是可以實現(xiàn)，但是會不會有點繁瑣呢？而且前面我們前面也說過，布局層次越少，性能越好！使用drawableXxx就可以省掉上面的過程，直接設(shè)置四個TextView就可以完成我們的需求！
基本用法：
設(shè)置圖片的核心其實就是:drawableXxx;可以設(shè)置四個方向的圖片:drawableTop(上),drawableButtom(下),drawableLeft(左),drawableRight(右) 另外,你也可以使用drawablePadding來設(shè)置圖片與文字間的間距！
效果圖：(設(shè)置四個方向上的圖片)
實現(xiàn)代碼：
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.jay.example.test.MainActivity" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:drawableTop="@drawable/show1"
android:drawableLeft="@drawable/show1"
android:drawableRight="@drawable/show1"
android:drawableBottom="@drawable/show1"
android:drawablePadding="10dp"
android:text="張全蛋" />
</RelativeLayout>
一些問題：可能你會發(fā)現(xiàn)，我們這樣設(shè)置的drawable并不能自行設(shè)置大小，在XML是無法直接設(shè)置的； 所以我們需要在Java代碼中來進行一個修改！
示例代碼如下：
import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.TextView;
public class MainActivity extends Activity {
private TextView txtZQD;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
txtZQD = (TextView) findViewById(R.id.txtZQD);
Drawable[] drawable = txtZQD.getCompoundDrawables();
// 數(shù)組下表0~3,依次是:左上右下
drawable[1].setBounds(100, 0, 200, 200);
txtZQD.setCompoundDrawables(drawable[0], drawable[1], drawable[2],
drawable[3]);
}
}
運行效果圖：
代碼分析：
①Drawable[] drawable = txtZQD.getCompoundDrawables( ); 獲得四個不同方向上的圖片資源,數(shù)組元素依次是:左上右下的圖片
②drawable[1].setBounds(100, 0, 200, 200); 接著獲得資源后,可以調(diào)用setBounds設(shè)置左上右下坐標(biāo)點,比如這里設(shè)置了代表的是: 長是:從離文字最左邊開始100dp處到200dp處 寬是:從文字上方0dp處往上延伸200dp!
③txtZQD.setCompoundDrawables(drawable[0], drawable[1], drawable[2], drawable[3]);為TextView重新設(shè)置drawable數(shù)組!沒有圖片可以用null代替哦! PS：另外，從上面看出我們也可以直接在Java代碼中調(diào)用setCompoundDrawables為 TextView設(shè)置圖片！
2.4 使用autoLink屬性識別鏈接類型
當(dāng)文字中出現(xiàn)了URL，E-Mail，電話號碼，地圖的時候，我們可以通過設(shè)置autoLink屬性；當(dāng)我們點擊 文字中對應(yīng)部分的文字，即可跳轉(zhuǎn)至某默認(rèn)APP，比如一串號碼，點擊后跳轉(zhuǎn)至撥號界面！
看下效果圖：
all就是全部都包含,自動識別協(xié)議頭~ 在Java代碼中可以調(diào)用setAutoLinkMask(Linkify.ALL); 這個時候可以不寫協(xié)議頭,autolink會自動識別，但是還要為這個TextView設(shè)置： setMovementMethod(LinkMovementMethod.getInstance()); 不然點擊了是沒效果的！
2.5 TextView玩轉(zhuǎn)HTML
如題，除了顯示普通文本外，TextView還預(yù)定義了一些類似于HTML的標(biāo)簽，通過這些標(biāo)簽，我們可以使 TextView顯示不同的字體顏色，大小，字體，甚至是顯示圖片，或者鏈接等！我們只要使用HTML中的一些 標(biāo)簽，加上android.text.HTML類的支持，即可完成上述功能！
PS:當(dāng)然，并不是支持所有的標(biāo)簽，常用的有下述這些：
<font>：設(shè)置顏色和字體。
<big>：設(shè)置字體大號
<small>：設(shè)置字體小號
<i><b>：斜體粗體
<a>：連接網(wǎng)址
<img>：圖片
如果直接setText的話是沒作用的，我們需要調(diào)用Html.fromHtml()方法將字符串轉(zhuǎn)換為CharSequence接口，
然后再進行設(shè)置，如果我們需要相應(yīng)設(shè)置，需要為TextView進行設(shè)置，調(diào)用下述方法：Java
setMovementMethod(LinkMovementMethod.getInstance())
嗯，接著我們寫代碼來試試：
1）測試文本與超鏈接標(biāo)簽
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.text.method.LinkMovementMethod;
import android.text.util.Linkify;
import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView t1 = (TextView)findViewById(R.id.txtOne);
String s1 = "<font color='blue'><b>百度一下，你就知道~：</b></font><br>";
s1 += "<a href = 'http://www.baidu.com'>百度</a>";
t1.setText(Html.fromHtml(s1));
t1.setMovementMethod(LinkMovementMethod.getInstance());
}
}
運行效果圖：
恩呢，測試完畢~
2）測試src標(biāo)簽，插入圖片：
看下運行效果圖：
接下來看下實現(xiàn)代碼，實現(xiàn)代碼看上去有點復(fù)雜，用到了反射(對了，別忘了在drawable目錄下放一個icon的圖片哦！)：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView t1 = (TextView) findViewById(R.id.txtOne);
String s1 = "圖片：<img src = 'icon'/><br>";
t1.setText(Html.fromHtml(s1, new Html.ImageGetter() {
@Override
public Drawable getDrawable(String source) {
Drawable draw = null;
try {
Field field = R.drawable.class.getField(source);
int resourceId = Integer.parseInt(field.get(null).toString());
draw = getResources().getDrawable(resourceId);
draw.setBounds(0, 0, draw.getIntrinsicWidth(), draw.getIntrinsicHeight());
} catch (Exception e) {
e.printStackTrace();
}
return draw;
}
}, null));
}
}
嘿嘿，你也可以自己試試，比如為圖片加上超鏈接，點擊圖片跳轉(zhuǎn)這樣~
2.6 SpannableString&SpannableStringBuilder定制文本
除了上面的HTML可以定制我們TextView的樣式外，還可以使用SpannableString和SpannableStringBuilder來完成，兩者區(qū)別：前者針對的是不可變文本，而后者則是針對可變文本，這里只講解前者，對后者有興趣可自行查閱文本！
SpannableString可供我們使用的API有下面這些：
BackgroundColorSpan 背景色
ClickableSpan 文本可點擊，有點擊事件
ForegroundColorSpan 文本顏色（前景色）
MaskFilterSpan 修飾效果，如模糊(BlurMaskFilter)、浮雕(EmbossMaskFilter)
MetricAffectingSpan 父類，一般不用
RasterizerSpan 光柵效果
StrikethroughSpan 刪除線（中劃線）
SuggestionSpan 相當(dāng)于占位符
UnderlineSpan 下劃線
AbsoluteSizeSpan 絕對大?。ㄎ谋咀煮w）
DynamicDrawableSpan 設(shè)置圖片，基于文本基線或底部對齊。
ImageSpan 圖片
RelativeSizeSpan 相對大?。ㄎ谋咀煮w）
ReplacementSpan 父類，一般不用
ScaleXSpan 基于x軸縮放
StyleSpan 字體樣式：粗體、斜體等
SubscriptSpan 下標(biāo)（數(shù)學(xué)公式會用到）
SuperscriptSpan 上標(biāo)（數(shù)學(xué)公式會用到）
TextAppearanceSpan 文本外貌（包括字體、大小、樣式和顏色）
TypefaceSpan 文本字體
URLSpan 文本超鏈接
好吧，還是蠻多的，這里給出個最簡單的例子吧，其他的參數(shù)調(diào)用可自行百度谷歌~1）最簡單例子：運行效果圖：
實現(xiàn)代碼：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView t1 = (TextView) findViewById(R.id.txtOne);
TextView t2 = (TextView) findViewById(R.id.txtTwo);
SpannableString span = new SpannableString("紅色打電話斜體刪除線綠色下劃線圖片:.");
//1.設(shè)置背景色,setSpan時需要指定的flag,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE(前后都不包括)
span.setSpan(new ForegroundColorSpan(Color.RED), 0, 2, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//2.用超鏈接標(biāo)記文本
span.setSpan(new URLSpan("tel:4155551212"), 2, 5, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//3.用樣式標(biāo)記文本（斜體）
span.setSpan(new StyleSpan(Typeface.BOLD_ITALIC), 5, 7, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//4.用刪除線標(biāo)記文本
span.setSpan(new StrikethroughSpan(), 7, 10, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//5.用下劃線標(biāo)記文本
span.setSpan(new UnderlineSpan(), 10, 16, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//6.用顏色標(biāo)記
span.setSpan(new ForegroundColorSpan(Color.GREEN), 10, 13,Spanned.SPAN_EXCLUSIVE_EXCLUSIVE);
//7.//獲取Drawable資源
Drawable d = getResources().getDrawable(R.drawable.icon);
d.setBounds(0, 0, d.getIntrinsicWidth(), d.getIntrinsicHeight());
//8.創(chuàng)建ImageSpan,然后用ImageSpan來替換文本
ImageSpan imgspan = new ImageSpan(d, ImageSpan.ALIGN_BASELINE);
span.setSpan(imgspan, 18, 19, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
t1.setText(span);
}
}
2）實現(xiàn)部分可點擊的TextView相信玩過QQ空間和微信朋友圈的朋友對下面的東東并不陌生吧，我們可以點擊 對應(yīng)的用戶然后進入查看用戶相關(guān)的信息是吧！
下面我們就來寫個簡單的例子來實現(xiàn)下效果：
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
TextView t1 = (TextView) findViewById(R.id.txtOne);
StringBuilder sb = new StringBuilder();
for (int i = 0; i < 20; i++) {
sb.append("好友" + i + "，");
}
String likeUsers = sb.substring(0, sb.lastIndexOf("，")).toString();
t1.setMovementMethod(LinkMovementMethod.getInstance());
t1.setText(addClickPart(likeUsers), TextView.BufferType.SPANNABLE);
}
//定義一個點擊每個部分文字的處理方法
private SpannableStringBuilder addClickPart(String str) {
//贊的圖標(biāo)，這里沒有素材，就找個笑臉代替下~
ImageSpan imgspan = new ImageSpan(MainActivity.this, R.drawable.ic_widget_face);
SpannableString spanStr = new SpannableString("p.");
spanStr.setSpan(imgspan, 0, 1, Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
//創(chuàng)建一個SpannableStringBuilder對象，連接多個字符串
SpannableStringBuilder ssb = new SpannableStringBuilder(spanStr);
ssb.append(str);
String[] likeUsers = str.split("，");
if (likeUsers.length > 0) {
for (int i = 0; i < likeUsers.length; i++) {
final String name = likeUsers[i];
final int start = str.indexOf(name) + spanStr.length();
ssb.setSpan(new ClickableSpan() {
@Override
public void onClick(View widget) {
Toast.makeText(MainActivity.this, name,
Toast.LENGTH_SHORT).show();
}
@Override
public void updateDrawState(TextPaint ds) {
super.updateDrawState(ds);
//刪除下劃線，設(shè)置字體顏色為藍(lán)色
ds.setColor(Color.BLUE);
ds.setUnderlineText(false);
}
},start,start + name.length(),0);
}
}
return ssb.append("等" + likeUsers.length + "個人覺得很贊");
}
}
運行效果圖：
核心其實就是：ClickableSpan的設(shè)置而已~你可以自己搗鼓著寫下QQ空間評論的那個自己寫一個~
2.7 實現(xiàn)跑馬燈效果的TextView
簡單說下什么是跑馬燈，就是類似于web一樣，有一行字一直循環(huán)滾滾動這樣，好吧還是看看 實現(xiàn)效果圖，一看就懂的了~
實現(xiàn)效果圖：
代碼實現(xiàn)：
android:id="@+id/txtOne"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="18sp"
android:singleLine="true"
android:ellipsize="marquee"
android:marqueeRepeatLimit="marquee_forever"
android:focusable="true"
android:focusableInTouchMode="true"
android:text="你整天說著日了狗日了狗，但是你卻沒有來，呵呵呵呵呵呵呵呵呵呵~"/>
2.8 設(shè)置TextView字間距和行間距
就像我們平時編寫文檔的時候，我們需要排版，設(shè)置下行或者字之間的間距是吧： Android中的TextView也可以進行這樣的設(shè)置：
字間距：
android:textScaleX：調(diào)節(jié)字間距的，默認(rèn)值1.0f，值是float Java中setScaleX(2.0f);
行間距：Android系統(tǒng)中TextView默認(rèn)顯示中文時會比較緊湊，為了讓每行保持的行間距
android:lineSpacingExtra：設(shè)置行間距，如"3dp"android:lineSpacingMultiplier：設(shè)置行間距的倍數(shù)，如"1.2"
Java代碼中可以通過:setLineSpacing方法來設(shè)置
2.9 自動換行
自動換行通過 android:singleLine 設(shè)置，默認(rèn)為 false。
如需要自動換行，可以用：
android:singleLine = "false"
如果要在一行顯示完，不換行，可以用：
android:singleLine = "true"
除此之外，可以也設(shè)置多行顯示不完，添加個maxLines的屬性即可！
3.本節(jié)小結(jié)：
本節(jié)對Android中的TextView控件進行了詳細(xì)的解析，提供了開發(fā)中常見的一些問題的解決方法，相信 會為你的實際開發(fā)帶來大大的便利，另外，筆者能力有限，寫出來的東西可能有些紕漏，歡迎指出， 不勝感激~另外，轉(zhuǎn)載請注明出處：coder-pig！謝謝~