在環境篇中我們學會了如何建立一個project和module，現在就可以在空白的介面裡編寫程式了。我們都知道，一個軟體想要吸引使用者那麼友好的操作介面是必不可少的。那如何設計一個美觀的介面呢，首先我們需要知道AS為我們提供了哪些UI工具以及它們的基本使用方法，簡單控制元件篇將介紹以下幾個常用的簡單控制元件：
- TextView 文字框
- EditText 可輸入文字框
- AutoCompleteTextView 自動匹配文字內容
- MutiAutoCompleteTextView 支援多次自動匹配文字內容
- ImageView 圖片
- Botton 按鈕
- ImageButton 圖片按鈕
- ToggleButton 多狀態按鈕
- CheckBox 核取方塊
- RadioButton 單選按鈕
在開始之前，我們要知道在哪裡操作這些控制元件：在XML佈局檔案中通過編寫程式實現，可建立XML檔案在layout資料夾下，如下圖。至於什麼是佈局，將在下一章佈局篇介紹。
1.TextView ：顯示文字框
其實這些控制元件的使用方式有很大的相似性，在具體瞭解最簡單的TextView控制元件之後再學習其他的控制元件會更容易一些。下圖裡展示TextView的一個效果圖，介面中顯示“Hello World”的字樣：
先跳過外層的RelativeLayout相對佈局，只要清楚在這個佈局裡可以包含有很多控制元件，接下來看TextView控制元件這一部分。 紅框內圈出的前三行：
android:id（指控制元件id，在其他地方可通過id找到這個控制元件，注意書寫格式 @+id/控制元件名）;
android:layout_width（指控制元件的寬度，有兩個常用選值，wrap_content包裹控制元件的寬度和match_parent鋪滿父容器的寬度 ，當然也可以自定義寬度，單位dp，如android:layout_width=“200dp”）;
android:android_height（指控制元件的高度，可選值同layout_width）; 安卓所有控制元件都有這三個屬性，也是必不可少的屬性。除了這些，每個控制元件還有屬於自己的屬性，下面介紹TextView常用的屬性。
android:text（指文字內容，好程式設計習慣是將具體的文字內容放到values->strings裡，然後用 @string/名 引用，三種實現方法見下圖）
android:textSize（指文字大小，單位sp）
android:textColor（指字型顏色，以#開頭的六位，可通過拾色器直接修改顏色）
TextView常用屬性介紹到這裡，因為TextView控制元件在activity_main.xml佈局檔案裡，只要在MainActivity設定顯示的佈局檔案是activity_main，然後就可以執行模擬器檢視效果了！
另外，其實所有的控制元件都可以在Design介面中從右側Palette直接拖拽，然後再回到Text介面內編輯需要的屬性，但建議初學者最好在程式碼介面自己敲程式碼，打牢基礎。
2.EditText ：可輸入文字框
先來看看EditText效果：
這個介面大家一定不陌生，由此可見EidtView是可以輸入文字的文字框。下面來看它的幾個獨特的屬性：
android:hint（指輸入提示文字內容。當然EditText也有android:text屬性，它們的區別是，當使用者準備在輸入文字框輸入的時候，hint的文字內容會消失，而text的文字內容不會消失會跟在使用者輸入內容的後面）
android:inputType（指輸入文字的型別，比如data，number等等，保證使用者輸入的格式正確）
至於後面的layout_alignBaseline等是控制元件之間位置關係的描述，在佈局篇會細說。
以下是原始碼
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="密碼"
android:textSize="32sp"
android:textColor="#000000"
android:id="@+id/textView"/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="請輸入密碼"
android:textSize="32sp"
android:id="@+id/editText"
android:layout_alignBaseline="@+id/textView"
android:layout_alignBottom="@+id/textView"
android:layout_centerHorizontal="true" />
複製程式碼3.AutoCompleteTextView ：自動匹配文字內容
當我們在搜尋引擎查詢內容的時候，當有想要輸入的資訊就會出現其他與其相關的提示資訊，這就是AutoCompleteTextView的功能，它有一個很重要的屬性，android:completionThreshold，指設定輸入多少字元時提示內容。
<AutoCompleteTextView
android:hint="請輸入要搜尋的資訊"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/autoCompleteTextView"
android:completionThreshold="2"/>
複製程式碼當然，能被提示的資料來源還需要自己手動設定，接下來MainActivity可以隆重上場了，見下圖，關於activity後續會詳細介紹。
實現方法，分三步:
第一步： 在類內定義一個AutoCompleteTextView物件，然後在onCreate方法裡用findViewById的方法找到之前定義好的AutoCompleteTextView控制元件，格式是 R.id. 控制元件id名，這就是為什麼要在.xml佈局檔案裡給控制元件一個id的原因，又由於findViewById返回的是View類物件，要在方法前加上強制轉換（AutoCompleteTextView）。
第二步： 在類內定義一個介面卡ArrayAdapter，介面卡是連線資料來源和檢視介面的橋樑，本例用資料介面卡就足夠，關於介面卡詳細內容後續會介紹。然後初始化介面卡載入資料來源，這裡自定義的data陣列就是被載入的資料來源，其他兩個引數this和android.R.layout.simple_list_item_1照寫即可。
第三步： 用控的自身方法setAdapter去載入介面卡ArrayAdapter。 完成這三步就可以實現了！
以下是原始碼：
public class MainActivity extends AppCompatActivity {
private ArrayAdapter<String> arrayAdapter;
private AutoCompleteTextView autoCompleteTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.auto);
String data[] = {"hello", "how", "happy", "haha"};
autoCompleteTextView = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView);
arrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, data);
autoCompleteTextView.setAdapter(arrayAdapter);
}
複製程式碼4.MutiAutoCompleteTextView ：支援多次自動匹配文字內容
當我們同時給多個人發郵件的時候會注意到，每次輸入一個收件郵箱都會有提示內容，這就是.MutiAutoCompleteTextView功能，它有個方法 setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer()) 指設定以逗號分隔符為結束的符號。它的使用方法和AutoCompleteTextView的使用基本一致，不再贅述，具體程式碼參照下圖。
以下是原始碼：
//.xml佈局檔案裡設定一個MultiAutoCompleteTextView控制元件的程式碼
<MultiAutoCompleteTextView
android:hint="請輸入要傳送的物件"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/multiAutoCompleteTextView" />
//在MainActivity裡實現的程式碼
public class MainActivity extends AppCompatActivity {
private ArrayAdapter<String> arrayAdapter;
private MultiAutoCompleteTextView multiAutoCompleteTextView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.auto);
String data[] = {"343028402@qq.com", "292500222@qq.com", "489103913@qq.com", "401804928@qq.com"};
arrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, data);
multiAutoCompleteTextView = (MultiAutoCompleteTextView) findViewById(R.id.multiAutoCompleteTextView);
multiAutoCompleteTextView.setAdapter(arrayAdapter);
multiAutoCompleteTextView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer());
}
複製程式碼5.ImageView ：顯示圖片
ImageView控制元件用來顯示圖片，和TextView顯示文字一樣功能簡單。需要注意的是ImageView的兩個屬性的區別:android:src（指需要被顯示的圖片，原來的圖片多大就會顯示多大），而android：background（指控制元件背景，可以是顏色或圖片，如果是圖片，大小會受控制元件大小影響，可能會變形）。
>簡單控制元件篇（下）會接著介紹後五種控制元件