馬超老師 ·前面 6 節(jié)分別學(xué)習(xí)了 Android 的六大布局，它的功能就是將 View 及 ViewGroup 按照一定的規(guī)則擺放起來，那么接下來的章節(jié)我們就來學(xué)習(xí) Android 中常見的 View。
首先我們看看 TextView，它是 Android 中很常用的 View，用來展示文本信息。它通常會(huì)其他的 View 一起搭配使用，用來作為提示信息。比如我們前面做過的登陸界面，就會(huì)搭配 EditText，顯示輸入的內(nèi)容提示。
1. TextView 的基本屬性
- android:text：
用來定義TextView上要展示的文本內(nèi)容。 - android:textSize：
設(shè)置TextView顯示文本的字體大小。 - android:textColor：
設(shè)置TextView顯示文本的顏色。 - android:textAllCaps：
設(shè)置文本是否全是大寫，true 表示大寫，false 表示保持原樣。 - android:letterSpacing：
設(shè)置每個(gè)字之間的間距 - android:hint：
設(shè)置一個(gè)默認(rèn)文本作為，當(dāng)沒有設(shè)置文本內(nèi)容的時(shí)候會(huì)展示在 TextView 當(dāng)中。很多時(shí)候我們的 TextView 會(huì)根據(jù)服務(wù)端的內(nèi)容動(dòng)態(tài)設(shè)置，此時(shí)就可以通過android:hint為 TextView 設(shè)置一個(gè)默認(rèn)值，在沒有拉到服務(wù)器數(shù)據(jù)的時(shí)候展示默認(rèn)文本。
以上是最常用的屬性，大多數(shù)場(chǎng)景已經(jīng)足夠，通過這些屬性我們就可以展示我們需要的文本信息了，如下：
<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="跟著超哥學(xué)Android"
android:textColor="#CE4F2F"
android:textSize="40sp"
/>
注意：通常我們的 xml 最外層是一個(gè) ViewGroup，它幫我們擺放各種 View，但是如果只有一個(gè) View 的時(shí)候，是可以直接放在 xml 里面的。
代碼比較簡(jiǎn)單，直接看效果：
2. TextView 的高級(jí)屬性
也許你并不滿足于普通樣式的 TextView，那么接下來介紹一些高級(jí)屬性，讓你的文本框更多豐富生動(dòng)。
- android:capitalize：
指定輸入首字母大寫的方式，不過目前已棄用，如果需要設(shè)置可以使用后面將會(huì)學(xué)到的 EditText。支持以下四個(gè)枚舉值：- 0： 不需要首字母大寫
- 1： 每一句話首字母大寫
- 2： 每個(gè)單詞的首字母大寫
- 3： 每個(gè)字母都需要大寫
- android:inputType
設(shè)置文本的類型，比如可以指定顯示電話、日期、時(shí)間、數(shù)字、或者密碼等等。 - android:shadowColor
設(shè)置陰影顏色，需要配合 shadowRadius 一起使用。 - android:shadowRadius
文字陰影的模糊半徑。 - android:shadowDx：
設(shè)置陰影在水平方向上的偏移量。 - android:shadowDy：
設(shè)置陰影在豎直方向上的偏移量。 - android:background：
設(shè)置文本的背景，可以直接設(shè)置圖片，也可以設(shè)置 drawable 資源。
2.1 TextView 的陰影效果
下面我們加上一些高級(jí)屬性，可以做出不同尋常的效果：
<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="跟著超哥學(xué)Android"
android:textColor="#BECF0B"
android:textSize="40sp" />
我們?cè)诘谝粋€(gè) demo 的基礎(chǔ)之上加上了陰影效果，如圖：
2.2 TextView 的背景
針對(duì) TextView 有一個(gè)android:background屬性，可以為我們的文本框設(shè)置一個(gè)自定義的背景圖，通常有兩種設(shè)置方法：
-
直接設(shè)置一個(gè)圖片作為背景圖；
-
設(shè)置一個(gè) drawable 資源。
（關(guān)于 drawable 的介紹可以參考第四節(jié)）
直接設(shè)置圖片比較好理解，就不做過多的演示，大家可以自行嘗試，這里主要講解一下采用 drawable 資源的用法。- 首先我們找到“src” -> “main” -> “res” -> “drawable”目錄，在里面右鍵新建一個(gè)“Drawable Resource File”，輸入文件名：text_background；
- 可能 IDE 會(huì)默認(rèn)生成部分代碼，比如
<selector/>，刪除默認(rèn)生成的代碼，添加一個(gè)<shape/>標(biāo)簽，用來指定 TextView 的外形； - 在
<shape/>標(biāo)簽中添加<stroke/>，設(shè)置 TextView 外形的邊框樣式，設(shè)置邊框的寬度和顏色； - 在
<shape/>中繼續(xù)添加<padding/>標(biāo)簽，用來設(shè)置 TextView 中文本和邊框的距離； - 最后在
<shape/>標(biāo)簽中添加<gradient/>，為 TextView 的背景添加色彩漸變。
最終整體代碼修改如下：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 設(shè)置邊框顏色和寬度 -->
<stroke
android:width="10dp"
android:color="#000000" />
<!-- 設(shè)置邊距 -->
<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="跟著超哥學(xué)Android"
android:textColor="#BECF0B"
android:textSize="40sp" />
最終效果：
3. 小結(jié)
TextView 是最常用的一個(gè) Android 原生 View，雖然它的特效屬性比較多，但是其實(shí)工作中可能大部分時(shí)候還是只會(huì)用基本屬性，所以更多的特效大家只需要了解即可。后面將要學(xué)習(xí)的很多控件都是基于 TextView 來設(shè)計(jì)開發(fā)的，會(huì)有很多的共同之處，希望大家學(xué)完之后能夠動(dòng)手實(shí)踐一些樣式，比如搭配前面學(xué)習(xí)的各種 Layout 來使用，試試不看例子，自己實(shí)現(xiàn)一個(gè)登陸頁面吧。
2025 imooc.com All Rights Reserved |