安卓應用的界面編程(3)_ZenDei技術網路在線

第二組UI組件：TextView及其子類 1. TextView（不允許用戶編輯文本內容）直接繼承了View，同時是EditText（允許用戶編輯文本內容）/Button兩個UI組件類的父類。TextView的作用就是在界面上顯示文本（類似JLabel）下麵是TextView的幾個使用例子 1 <

第二組UI組件：TextView及其子類

TextView（不允許用戶編輯文本內容）直接繼承了View，同時是EditText（允許用戶編輯文本內容）/Button兩個UI組件類的父類。TextView的作用就是在界面上顯示文本（類似JLabel）

下麵是TextView的幾個使用例子

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2         android:orientation="vertical"
 3         android:layout_width="match_parent"
 4         android:layout_height="match_parent">
 5         <!-- 設置字型大小為20pt，在文本框結尾處繪製圖片 -->
 6         <TextView
 7             android:layout_width="match_parent"
 8             android:layout_height="wrap_content"
 9             android:layout_marginTop="30pt"
10             android:text="我愛Java"
11             android:textSize="20pt"
12             android:drawableEnd="@drawable/doge"
13             android:drawableRight="@drawable/doge"/>
14         <!-- 設置中間省略，所以字母大寫 -->
15         <TextView
16             android:layout_width="match_parent"
17             android:layout_height="wrap_content"
18             android:singleLine="true"
19             android:text="我愛Java 我愛Java 我愛Java 我愛Java 我愛Java 我aaa Java"
20             android:ellipsize="middle"
21             android:textAllCaps="true"/>
22         <!-- 對郵件/電話增加鏈接 -->
23         <TextView
24             android:layout_width="match_parent"
25             android:layout_height="wrap_content"
26             android:singleLine="true"
27             android:text="郵件是[email protected],電話是222266666"
28             android:autoLink="email|phone"/>
29         <!-- 設置文字顏色/大小，並使用陰影 -->
30         <TextView
31             android:layout_width="match_parent"
32             android:layout_height="wrap_content"
33             android:text="測試文字"
34             android:shadowColor="#00f"
35             android:shadowDx="10.0"
36             android:shadowDy="8.0"
37             android:shadowRadius="3.0"
38             android:textColor="#f00"
39             android:textSize="18pt"/>
40         <!-- 測試密碼框 -->
41         <TextView
42             android:id="@+id/passwd"
43             android:layout_width="match_parent"
44             android:layout_height="wrap_content"
45             android:text="@string/hello"
46             android:password="true"/>
47         <CheckedTextView
48             android:layout_width="match_parent"
49             android:layout_height="wrap_content"
50             android:text="可勾選的文本"
51             android:checkMark="@drawable/doge"/>
52     </LinearLayout>

View Code

然後是一個圓角邊框/漸變背景的TextView的實例

先在兩個XML文件中定義兩個背景文件

bg_border.xml

1 <?xml version="1.0" encoding="utf-8"?>
2 <shape xmlns:android="http://schemas.android.com/apk/res/android">
3     <!-- 設置背景色為透明色 -->
4     <solid android:color="#0000" />
5     <!-- 設置紅色邊框 -->
6     <stroke android:width="4px" android:color="#f00" />
7 </shape>

View Code

bg_border1.xml

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
 3     <!-- 指定圓角矩形的4個圓角的半徑 -->
 4     <corners android:topLeftRadius="20px"
 5         android:topRightRadius="5px"
 6         android:bottomRightRadius="20px"
 7         android:bottomLeftRadius="5px"/>
 8     <!-- 指定邊框線條的寬度和顏色 -->
 9     <stroke android:width="4px" android:color="#f0f" />
10     <!-- 指定使用漸變背景色，使用sweep類型的漸變，顏色從紅色到綠色到藍色 -->
11     <gradient android:startColor="#f00"
12         android:centerColor="#0f0"
13         android:endColor="#00f"
14         android:type="sweep"/>
15 </shape>

View Code

新增xml文件時，它是跑到layout目錄下的而且還無法移動。。我就把文件寫好剪切到了drawable文件夾裡面。

然後添加一個佈局文件border到layout目錄下

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:orientation="vertical"
 4     android:layout_width="match_parent"
 5     android:layout_height="match_parent">
 6     <!-- 通過android:background指定背景 -->
 7     <TextView
 8         android:layout_width="match_parent"
 9         android:layout_height="wrap_content"
10         android:text="帶邊框的文本"
11         android:textSize="24pt"
12         android:background="@drawable/bg_border"/>
13     <TextView
14         android:layout_width="match_parent"
15         android:layout_height="wrap_content"
16         android:text="圓角邊框/漸變背景的文本"
17         android:textSize="24pt"
18         android:background="@drawable/bg_border1"/>
19 </LinearLayout>

View Code

在引用背景的兩行有感嘆號提示錯誤。但是找不到錯誤，程式運行的錯誤是空指針異常，不知道怎麼修改。但是可以看到右方的實例效果圖。

錯誤的地方，求大神講解

2.EditText的功能與用法

與TextView最大的區別是可以接受用戶輸入。最重要的屬性是inputType,該屬性相當於HTML的<input.../>元素的type屬性，用於將EditView設置為指定類型的輸入組件。

下麵是一個用戶相對友好的輸入界面

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:stretchColumns="1">
 6     <TextView
 7         android:layout_width="match_parent"
 8         android:layout_height="32sp" />
 9     <TableRow>
10         <TextView
11             android:layout_width="match_parent"
12             android:layout_height="wrap_content"
13             android:text="用戶名："
14             android:textSize="16sp"/>
15         <EditText
16             android:layout_width="match_parent"
17             android:layout_height="wrap_content"
18             android:hint="請填寫登陸賬號"
19             android:selectAllOnFocus="true"/>
20     </TableRow>
21     <TableRow>
22         <TextView
23             android:layout_width="match_parent"
24             android:layout_height="wrap_content"
25             android:text="密碼："
26             android:textSize="16sp"/>
27         <!-- android:inputType="numberPassword"表明只能接受數字密碼 -->
28         <EditText
29             android:layout_width="match_parent"
30             android:layout_height="wrap_content"
31             android:inputType="numberPassword"/>
32     </TableRow>
33     <TableRow>
34         <TextView
35             android:layout_width="match_parent"
36             android:layout_height="wrap_content"
37             android:text="年齡："
38             android:textSize="16sp"/>
39         <!-- inputType="number"表明是數值輸入框 -->
40         <EditText
41             android:layout_width="match_parent"
42             android:layout_height="wrap_content"
43             android:inputType="number"/>
44     </TableRow>
45     <TableRow>
46         <TextView
47             android:layout_width="match_parent"
48             android:layout_height="wrap_content"
49             android:text="生日："
50             android:textSize="16sp"/>
51         <!-- inputType="date"表明是日期輸入框 -->
52         <EditText
53             android:layout_width="match_parent"
54             android:layout_height="wrap_content"
55             android:inputType="date"/>
56     </TableRow>
57     <TableRow>
58         <TextView
59             android:layout_width="match_parent"
60             android:layout_height="wrap_content"
61             android:text="電話號碼："
62             android:textSize="16sp"/>
63         <!-- inputType="phone"表明是輸入電話號碼的輸入框 -->
64         <EditText
65             android:layout_width="match_parent"
66             android:layout_height="wrap_content"
67             android:hint="請填寫您的電話號碼"
68             android:selectAllOnFocus="true"
69             android:inputType="phone"/>
70     </TableRow>
71     <Button
72         android:layout_width="wrap_content"
73         android:layout_height="wrap_content"
74         android:text="註冊"/>
75 </TableLayout>

View Code

切換不同的文本框時會啟用不同的鍵盤

3.Button

可以指定按鈕按下/鬆開時的圖片

還可以使用9Patch圖片作為背景（sdk/tools裡面的draw9patch.bat）可以設定縮放的圖片區域，防止圖片變形（暫時沒有實際操作）

下麵是一個簡單的使用說明

首先是一個界面佈局文件

 1 <LinearLayout
 2         xmlns:android="http://schemas.android.com/apk/res/android"
 3         android:orientation="vertical"
 4         android:layout_width="match_parent"
 5         android:layout_height="match_parent">
 6         <TextView
 7             android:layout_marginTop="80px"
 8             android:layout_width="wrap_content"
 9             android:layout_height="wrap_content" />
10         <!-- 文字帶陰影的按鈕 -->
11         <Button
12             android:layout_width="wrap_content"
13             android:layout_height="wrap_content"
14             android:text="文字帶陰影的按鈕"
15             android:textSize="12pt"
16             android:shadowColor="#aa5"
17             android:shadowRadius="1"
18             android:shadowDx="5"
19             android:shadowDy="5"/>
20         <!-- 普通文字按鈕 -->
21         <Button
22             android:layout_width="wrap_content"
23             android:layout_height="wrap_content"
24             android:background="@drawable/doge"
25             android:text="普通按鈕"
26             android:textSize="10pt" />
27         <!-- 帶文字的圖片按鈕 -->
28         <Button
29             android:layout_width="wrap_content"
30             android:layout_height="wrap_content"
31             android:background="@drawable/button_selector"
32             android:textSize="11px"
33             android:text="帶文字的圖片按鈕"/>
34     </LinearLayout>

View Code

裡面引用了一個xml文件，文件指定了第三個按鈕按下和鬆開時的圖片

1 <?xml version="1.0" encoding="utf-8"?>
2 <selector xmlns:android="http://schemas.android.com/apk/res/android">
3     <!-- 指定按鈕按下時的圖片 -->
4     <item android:state_pressed="true"
5         android:drawable="@drawable/three"/>
6     <!-- 指定按鈕鬆開時的圖片 -->
7     <item android:state_pressed="false"
8         android:drawable="@drawable/four"/>
9 </selector>

View Code

4.單選鈕(RadioButton)和覆選框(CheckBox)的功能與用法

比普通按鈕多了一個可選中的功能，可額外指定一個android:checked屬性（初始時是否被選中）

註意：如果在XML佈局文件中定義了一組單選鈕，並預設勾選了第一個單選鈕，則必須為該組單選鈕的每個按鈕指定android:id屬性值；否組這組單選鈕不能正常工作

XML佈局文件如下

 1 <TableLayout
 2         xmlns:android="http://schemas.android.com/apk/res/android"
 3         android:layout_width="match_parent"
 4         android:layout_height="match_parent">
 5         <TextView
 6             android:layout_width="match_parent"
 7             android:layout_height="wrap_content"
 8             android:layout_marginTop="100px"/>
 9         <TableRow>
10             <TextView
11                 android:layout_width="wrap_content"
12                 android:layout_height="wrap_content"
13                 android:text="性別"/>
14             <!-- 定義一組單選鈕 -->
15             <RadioGroup android:id="@+id/rg"
16                 android:orientation="horizontal"
17                 android:layout_gravity="center_horizontal">
18                 <!-- 定義兩個單選鈕 -->
19                 <RadioButton
20                     android:layout_width="wrap_content"
21                     android:layout_height="wrap_content"
22                     android:id="@+id/male"
23                     android:text="男"
24                     android:checked="true"/>
25                 <RadioButton
26                     android:layout_width="wrap_content"
27                     android:layout_height="wrap_content"
28                     android:id="@+id/female"
29                     android:text="女"/>
30             </RadioGroup>
31         </TableRow>
32         <TableRow>
33             <TextView
34                 android:layout_width="wrap_content"
35                 android:layout_height="wrap_content"
36                 android:text="喜歡的顏色："/>
37             <!-- 定義一個垂直的線性佈局 -->
38             <LinearLayout
39                 android:layout_gravity="center_horizontal"
40                 android:orientation="vertical"
41                 android:layout_width="wrap_content"
42                 android:layout_height="wrap_content">
43                 <!-- 定義三個覆選框 -->
44                 <CheckBox
45                     android:layout_width="wrap_content"
46                     android:layout_height="wrap_content"
47                     android:text="紅色"
48                     android:checked="true"/>
49                 <CheckBox
50                     android:layout_width="wrap_content"
51                     android:layout_height="wrap_content"
52                     android:text="藍色"/>
53                 <CheckBox
54                     android:layout_width="wrap_content"
55                     android:layout_height="wrap_content"
56                     android:text="綠色"/>
57             </LinearLayout>
58         </TableRow>
59         <TextView
60             android:id="@+id/show"
61             android:layout_width="wrap_content"
62             android:layout_height="wrap_content"/>
63     </TableLayout>

View Code

為了監聽單選鈕/覆選框勾選狀態的改變，為他們添加事件監聽器，如下的代碼為RadioGroup添加了事件監聽器

 1 public class RadioButtonAndCheckBox extends AppCompatActivity {
 2 
 3     RadioGroup rg;
 4     TextView show;
 5     @Override
 6     protected void onCreate(Bundle savedInstanceState) {
 7         super.onCreate(savedInstanceState);
 8         setContentView(R.layout.activity_radio_button_and_check_box);
 9         //獲取界面上rg/show兩個組件
10         rg=(RadioGroup)findViewById(R.id.rg);
11         show=(TextView)findViewById(R.id.show);
12         //為RadioGroup組件的onCheckedChanged事件綁定事件監聽器
13         rg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener()
14         {
15             @Override
16             public void onCheckedChanged(RadioGroup group,int checkedId)
17             {
18                 //根據用戶勾選的單選按鈕來動態改變tip字元串的值
19                 String tip=checkedId==R.id.male?"您的性別是男":"您的性別是女";
20                 //修改show組件中的文本
21                 show.setText(tip);
22             }
23         });
24     }
25 }

View Code

運行效果如下

5.狀態開關按鈕(ToggleButton)和開關(Switch)的功能與用法

通常用於切換程式中的某種狀態，下麵是一個動態控制佈局的實例

在頁面中增加一個ToggleButton，隨著該按鈕狀態的改變，界面佈局中的LinearLayout佈局的方向在水平佈局/垂直佈局之間切換。如下是界面佈局文件

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2         android:orientation="vertical"
 3         android:layout_width="match_parent"
 4         android:layout_height="match_parent">
 5         <TextView
 6             android:layout_width="match_parent"
 7             android:layout_height="wrap_content"
 8             android:layout_marginTop="150px"/>
 9         <!-- 定義一個ToggleButton按鈕 -->
10         <ToggleButton
11             android:id="@+id/toggle"
12             android:layout_width="wrap_content"
13             android:layout_height="wrap_content"
14             android:textOff="橫向排列"
15             android:textOn="縱向排列"
16             android:checked="true"/>
17         <Switch
18             android:id="@+id/switcher"
19             android:layout_wid