1. 程式人生 > Android入門教學 >Android 文字框 TextView

Android 文字框 TextView

首先我們看看 TextView,它是 Android 中很常用的 View,用來展示文字資訊。它通常會其他的 View 一起搭配使用,用來作為提示資訊。比如我們前面做過的登陸介面,就會搭配 EditText,顯示輸入的內容提示。

1. TextView 的基本屬性

  • android:text:
    用來定義TextView上要展示的文字內容。
  • android:textSize:
    設定TextView顯示文字的字型大小。
  • android:textColor:
    設定TextView顯示文字的顏色。
  • android:textAllCaps:
    設定文字是否全是大寫,true 表示大寫,false 表示保持原樣。
  • android:letterSpacing:
    設定每個字之間的間距
  • android:hint:
    設定一個預設文字作為,當沒有設定文字內容的時候會展示在 TextView 當中。很多時候我們的 TextView 會根據服務端的內容動態設定,此時就可以通過android:hint為 TextView 設定一個預設值,在沒有拉到伺服器資料的時候展示預設文字。

以上是最常用的屬性,大多數場景已經足夠,通過這些屬性我們就可以展示我們需要的文字資訊了,如下:

<TextView  xmlns:android="http://schemas.android.com/apk/res/android"
    android:
layout_height
="wrap_content" android:layout_width="wrap_content" android:padding="20dp" android:text="跟著超哥學Android" android:textColor="#CE4F2F" android:textSize="40sp" />

注意:通常我們的 xml 最外層是一個 ViewGroup,它幫我們擺放各種 View,但是如果只有一個 View 的時候,是可以直接放在 xml 裡面的。
程式碼比較簡單,直接看效果:

TextView基本樣式

2. TextView 的高階屬性

也許你並不滿足於普通樣式的 TextView,那麼接下來介紹一些高階屬性,讓你的文字框更多豐富生動。

  • android:capitalize:
    指定輸入首字母大寫的方式,不過目前已棄用,如果需要設定可以使用後面將會學到的 EditText。支援以下四個列舉值:
    • 0: 不需要首字母大寫
    • 1: 每一句話首字母大寫
    • 2: 每個單詞的首字母大寫
    • 3: 每個字母都需要大寫
  • android:inputType
    設定文字的型別,比如可以指定顯示電話、日期、時間、數字、或者密碼等等。
  • android:shadowColor
    設定陰影顏色,需要配合 shadowRadius 一起使用。
  • android:shadowRadius
    文字陰影的模糊半徑。
  • android:shadowDx:
    設定陰影在水平方向上的偏移量。
  • android:shadowDy:
    設定陰影在豎直方向上的偏移量。
  • android:background:
    設定文字的背景,可以直接設定圖片,也可以設定 drawable 資源。

2.1 TextView 的陰影效果

下面我們加上一些高階屬性,可以做出不同尋常的效果:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:padding="20dp"
    android:shadowColor="#5919C9"
    android:shadowDx="20.0"
    android:shadowDy="20.0"
    android:shadowRadius="4.5"
    android:text="跟著超哥學Android"
    android:textColor="#BECF0B"
    android:textSize="40sp" />

我們在第一個 demo 的基礎之上加上了陰影效果,如圖:

TextView陰影效果

2.2 TextView 的背景

針對 TextView 有一個android:background屬性,可以為我們的文字框設定一個自定義的背景圖,通常有兩種設定方法:

  • 直接設定一個圖片作為背景圖;

  • 設定一個 drawable 資源。
    (關於 drawable 的介紹可以參考第四節)
    直接設定圖片比較好理解,就不做過多的演示,大家可以自行嘗試,這裡主要講解一下采用 drawable 資源的用法。

    1. 首先我們找到“src” -> “main” -> “res” -> “drawable”目錄,在裡面右鍵新建一個“Drawable Resource File”,輸入檔名:text_background;
    2. 可能 IDE 會預設生成部分程式碼,比如<selector/>,刪除預設生成的程式碼,新增一個<shape/>標籤,用來指定 TextView 的外形;
    3. <shape/>標籤中新增<stroke/>,設定 TextView 外形的邊框樣式,設定邊框的寬度和顏色;
    4. <shape/>中繼續新增<padding/>標籤,用來設定 TextView 中文字和邊框的距離;
    5. 最後在<shape/>標籤中新增<gradient/>,為 TextView 的背景新增色彩漸變。

最終整體程式碼修改如下:

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

    <!-- 設定邊框顏色和寬度 -->
    <stroke
        android:width="10dp"
        android:color="#000000" />

    <!-- 設定邊距 -->
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />

    <!-- 新增漸變效果 -->
    <gradient
        android:angle="45"
        android:endColor="#EEC5C5"
        android:startColor="#0A22A5" />

</shape>

至此,drawable 資源編寫完畢,我們就可以在 TextView 中使用了。直接修改TextView的程式碼,新增android:background屬性:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:background="@drawable/text_backgroud"
    android:padding="20dp"
    android:shadowColor="#5919C9"
    android:shadowDx="20.0"
    android:shadowDy="20.0"
    android:shadowRadius="4.5"
    android:text="跟著超哥學Android"
    android:textColor="#BECF0B"
    android:textSize="40sp" />

最終效果:

TextView背景效果

3. 小結

TextView 是最常用的一個 Android 原生 View,雖然它的特效屬性比較多,但是其實工作中可能大部分時候還是隻會用基本屬性,所以更多的特效大家只需要瞭解即可。後面將要學習的很多控制元件都是基於 TextView 來設計開發的,會有很多的共同之處,希望大家學完之後能夠動手實踐一些樣式,比如搭配前面學習的各種 Layout 來使用,試試不看例子,自己實現一個登陸頁面吧。