學習筆記| AS入門（二） 簡單控制元件篇（上）

在環境篇中我們學會了如何建立一個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（指字型顏色，以#開頭的六位，可以在直接修改顏色）

android：background（指控制元件背景，可以是顏色也可以是圖片，如果是圖片，會鋪滿整個控制元件，也就是可能會變形）

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（指控制元件背景，可以是顏色或圖片，如果是圖片，大小會受控制元件大小影響，可能會變形）。

>簡單控制元件篇（下）會接著介紹後五種控制元件