Android TextView(文本框)詳解

本節(jié)引言：

學(xué)習(xí)完Android中的六大布局，從本節(jié)開始我們來(lái)一個(gè)個(gè)講解Android中的UI控件，本節(jié)給大家?guī)?lái)的UI控件是：TextView(文本框)，用于顯示文本的一個(gè)控件，另外聲明一點(diǎn)，我不是翻譯API文檔，不會(huì)一個(gè)個(gè)屬性的去扣，只學(xué)實(shí)際開發(fā)中常用的，有用的，大家遇到感覺(jué)到陌生的屬性可以查詢對(duì)應(yīng)的API！當(dāng)然，每一節(jié)開始都會(huì)貼這一節(jié)對(duì)應(yīng)API文檔的鏈接：TextView API 好了，在開始本節(jié)內(nèi)容前，先要介紹下幾個(gè)單位：

dp(dip): device independent pixels(設(shè)備獨(dú)立像素). 不同設(shè)備有不同的顯示效果,這個(gè)和設(shè)備硬件有關(guān)，一般我們?yōu)榱酥С諻VGA、HVGA和QVGA 推薦使用這個(gè)，不依賴像素。 px: pixels(像素). 不同設(shè)備顯示效果相同，一般我們HVGA代表320x480像素，這個(gè)用的比較多。 pt: point，是一個(gè)標(biāo)準(zhǔn)的長(zhǎng)度單位，1pt＝1/72英寸，用于印刷業(yè)，非常簡(jiǎn)單易用； sp: scaled pixels(放大像素). 主要用于字體顯示best for textsize。

1.基礎(chǔ)屬性詳解：

通過(guò)下面這個(gè)簡(jiǎn)單的界面，我們來(lái)了解幾個(gè)最基本的屬性：

布局代碼：

<RelativeLayout 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"
    tools:context=".MainActivity"
    android:gravity="center"
    android:background="#8fffad">

    <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="#000000"
        android:textSize="18sp" />

</RelativeLayout>

上面的TextView中有下述幾個(gè)屬性:

• id：為TextView設(shè)置一個(gè)組件id，根據(jù)id，我們可以在Java代碼中通過(guò)findViewById()的方法獲取到該對(duì)象，然后進(jìn)行相關(guān)屬性的設(shè)置，又或者使用RelativeLayout時(shí)，參考組件用的也是id！
• layout_width：組件的寬度，一般寫：wrap_content或者match_parent(fill_parent)，前者是控件顯示的內(nèi)容多大，控件就多大，而后者會(huì)填滿該控件所在的父容器；當(dāng)然也可以設(shè)置成特定的大小，比如我這里為了顯示效果，設(shè)置成了200dp。
• layout_height：組件的高度，內(nèi)容同上。
• gravity：設(shè)置控件中內(nèi)容的對(duì)齊方向，TextView中是文字，ImageView中是圖片等等。
• text：設(shè)置顯示的文本內(nèi)容，一般我們是把字符串寫到string.xml文件中，然后通過(guò)@String/xxx取得對(duì)應(yīng)的字符串內(nèi)容的，這里為了方便我直接就寫到""里，不建議這樣寫?。?！
• textColor：設(shè)置字體顏色，同上，通過(guò)colors.xml資源來(lái)引用，別直接這樣寫！
• textStyle：設(shè)置字體風(fēng)格，三個(gè)可選值：normal(無(wú)效果)，bold(加粗)，italic(斜體)
• textSize：字體大小，單位一般是用sp！

• background：控件的背景顏色，可以理解為填充整個(gè)控件的顏色，可以是圖片哦！

2.實(shí)際開發(fā)例子

2.1 帶陰影的TextView

涉及到的幾個(gè)屬性：

• android:shadowColor:設(shè)置陰影顏色,需要與shadowRadius一起使用哦!
• android:shadowRadius:設(shè)置陰影的模糊程度,設(shè)為0.1就變成字體顏色了,建議使用3.0
• android:shadowDx:設(shè)置陰影在水平方向的偏移,就是水平方向陰影開始的橫坐標(biāo)位置
• android:shadowDy:設(shè)置陰影在豎直方向的偏移,就是豎直方向陰影開始的縱坐標(biāo)位置

效果圖：

實(shí)現(xiàn)代碼：

<TextView
        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è)置一個(gè)邊框背景，普通矩形邊框或者圓角邊框！下面可能幫到你！ 另外TextView是很多其他控件的父類，比如Button，也可以設(shè)置這樣的邊框！ 實(shí)現(xiàn)原理很簡(jiǎn)單，自行編寫一個(gè)ShapeDrawable的資源文件！然后TextView將blackgroung 設(shè)置為這個(gè)drawable資源即可！

簡(jiǎn)單說(shuō)下shapeDrawable資源文件的幾個(gè)節(jié)點(diǎn)以及屬性：

• 這個(gè)是設(shè)置背景顏色的
• 這個(gè)是設(shè)置邊框的粗細(xì),以及邊框顏色的
• 這個(gè)是設(shè)置邊距的
• 這個(gè)是設(shè)置圓角的
• 這個(gè)是設(shè)置漸變色的,可選屬性有: startColor:起始顏色 endColor:結(jié)束顏色 centerColor:中間顏色 angle:方向角度,等于0時(shí),從左到右,然后逆時(shí)針?lè)较蜣D(zhuǎn),當(dāng)angle = 90度時(shí)從下往上 type:設(shè)置漸變的類型

實(shí)現(xiàn)效果圖：

代碼實(shí)現(xiàn)：

Step 1:編寫矩形邊框的Drawable：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >

    <!-- 設(shè)置一個(gè)黑色邊框 -->
    <stroke android:width="2px" android:color="#000000"/>
    <!-- 漸變 -->
    <gradient
        android:angle="270"
        android:endColor="#C0C0C0"
        android:startColor="#FCD209" />
    <!-- 設(shè)置一下邊距,讓空間大一點(diǎn) -->
    <padding
        android:left="5dp"
        android:top="5dp"
        android:right="5dp"
        android:bottom="5dp"/>

</shape> 

Step 2:編寫圓角矩形邊框的Drawable：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- 設(shè)置透明背景色 -->
    <solid android:color="#87CEEB" />

    <!-- 設(shè)置一個(gè)黑色邊框 -->
    <stroke
        android:width="2px"
        android:color="#000000" />
    <!-- 設(shè)置四個(gè)圓角的半徑 -->
    <corners
        android:bottomLeftRadius="10px"
        android:bottomRightRadius="10px"
        android:topLeftRadius="10px"
        android:topRightRadius="10px" />
    <!-- 設(shè)置一下邊距,讓空間大一點(diǎn) -->
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

</shape>

Step 3:將TextView的blackground屬性設(shè)置成上面這兩個(gè)Drawable：

<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:background="#FFFFFF"
    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="@drawable/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="@drawable/txt_radiuborder"
        android:text="圓角邊框的TextView" />

</LinearLayout>

2.3 帶圖片(drawableXxx)的TextView：

在實(shí)際開發(fā)中，我們可能會(huì)遇到這種需求：

如圖，要實(shí)現(xiàn)這種效果，可能你的想法是：一個(gè)ImageView用于顯示圖片 + 一個(gè)TextView用于顯示文字，然后把他們丟到一個(gè)LinearLayout中，接著依次創(chuàng)建四個(gè)這樣的小布局，再另外放到一個(gè)大的LinearLayout中，效果是可以實(shí)現(xiàn)，但是會(huì)不會(huì)有點(diǎn)繁瑣呢？而且前面我們前面也說(shuō)過(guò)，布局層次越少，性能越好！使用drawableXxx就可以省掉上面的過(guò)程，直接設(shè)置四個(gè)TextView就可以完成我們的需求！

基本用法：

設(shè)置圖片的核心其實(shí)就是:drawableXxx;可以設(shè)置四個(gè)方向的圖片:drawableTop(上),drawableButtom(下),drawableLeft(左),drawableRight(右) 另外,你也可以使用drawablePadding來(lái)設(shè)置圖片與文字間的間距！

效果圖：(設(shè)置四個(gè)方向上的圖片)

實(shí)現(xiàn)代碼：

<RelativeLayout 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"  
    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> 

一些問(wèn)題： 可能你會(huì)發(fā)現(xiàn)，我們這樣設(shè)置的drawable并不能自行設(shè)置大小，在XML是無(wú)法直接設(shè)置的； 所以我們需要在Java代碼中來(lái)進(jìn)行一個(gè)修改！

示例代碼如下：

package com.jay.example.test;  

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]);  
    }  
} 

運(yùn)行效果圖：

代碼分析：

• ①Drawable[] drawable = txtZQD.getCompoundDrawables( ); 獲得四個(gè)不同方向上的圖片資源,數(shù)組元素依次是:左上右下的圖片
• ②drawable[1].setBounds(100, 0, 200, 200); 接著獲得資源后,可以調(diào)用setBounds設(shè)置左上右下坐標(biāo)點(diǎn),比如這里設(shè)置了代表的是: 長(zhǎng)是:從離文字最左邊開始100dp處到200dp處 寬是:從文字上方0dp處往上延伸200dp!
• ③txtZQD.setCompoundDrawables(drawable[0], drawable[1], drawable[2], drawable[3]);為TextView重新設(shè)置drawable數(shù)組!沒(méi)有圖片可以用null代替哦! PS：另外，從上面看出我們也可以直接在Java代碼中調(diào)用setCompoundDrawables為 TextView設(shè)置圖片！

2.4 使用autoLink屬性識(shí)別鏈接類型

當(dāng)文字中出現(xiàn)了URL，E-Mail，電話號(hào)碼，地圖的時(shí)候，我們可以通過(guò)設(shè)置autoLink屬性；當(dāng)我們點(diǎn)擊 文字中對(duì)應(yīng)部分的文字，即可跳轉(zhuǎn)至某默認(rèn)APP，比如一串號(hào)碼，點(diǎn)擊后跳轉(zhuǎn)至撥號(hào)界面！

看下效果圖：