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 裡面的。
程式碼比較簡單,直接看效果:
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 的基礎之上加上了陰影效果,如圖:
2.2 TextView 的背景
針對 TextView 有一個android:background
屬性,可以為我們的文字框設定一個自定義的背景圖,通常有兩種設定方法:
-
直接設定一個圖片作為背景圖;
-
設定一個 drawable 資源。
(關於 drawable 的介紹可以參考第四節)
直接設定圖片比較好理解,就不做過多的演示,大家可以自行嘗試,這裡主要講解一下采用 drawable 資源的用法。- 首先我們找到“src” -> “main” -> “res” -> “drawable”目錄,在裡面右鍵新建一個“Drawable Resource File”,輸入檔名:text_background;
- 可能 IDE 會預設生成部分程式碼,比如
<selector/>
,刪除預設生成的程式碼,新增一個<shape/>
標籤,用來指定 TextView 的外形; - 在
<shape/>
標籤中新增<stroke/>
,設定 TextView 外形的邊框樣式,設定邊框的寬度和顏色; - 在
<shape/>
中繼續新增<padding/>
標籤,用來設定 TextView 中文字和邊框的距離; - 最後在
<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" />
最終效果:
3. 小結
TextView 是最常用的一個 Android 原生 View,雖然它的特效屬性比較多,但是其實工作中可能大部分時候還是隻會用基本屬性,所以更多的特效大家只需要瞭解即可。後面將要學習的很多控制元件都是基於 TextView 來設計開發的,會有很多的共同之處,希望大家學完之後能夠動手實踐一些樣式,比如搭配前面學習的各種 Layout 來使用,試試不看例子,自己實現一個登陸頁面吧。