學習筆記|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（指控件背景，能夠是顏色或圖片，若是是圖片，大小會受控件大小影響，可能會變形）。

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