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

釐米姑娘發表於2017-12-21

環境篇中我們學會了如何建立一個project和module,現在就可以在空白的介面裡編寫程式了。我們都知道,一個軟體想要吸引使用者那麼友好的操作介面是必不可少的。那如何設計一個美觀的介面呢,首先我們需要知道AS為我們提供了哪些UI工具以及它們的基本使用方法,簡單控制元件篇將介紹以下幾個常用的簡單控制元件:

  • TextView 文字框
  • EditText 可輸入文字框
  • AutoCompleteTextView 自動匹配文字內容
  • MutiAutoCompleteTextView 支援多次自動匹配文字內容
  • ImageView 圖片
  • Botton 按鈕
  • ImageButton 圖片按鈕
  • ToggleButton 多狀態按鈕
  • CheckBox 核取方塊
  • RadioButton 單選按鈕

在開始之前,我們要知道在哪裡操作這些控制元件:在XML佈局檔案中通過編寫程式實現,可建立XML檔案在layout資料夾下,如下圖。至於什麼是佈局,將在下一章佈局篇介紹。

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

1.TextView :顯示文字框

其實這些控制元件的使用方式有很大的相似性,在具體瞭解最簡單的TextView控制元件之後再學習其他的控制元件會更容易一些。下圖裡展示TextView的一個效果圖,介面中顯示“Hello World”的字樣:

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

先跳過外層的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/名 引用,三種實現方法見下圖)

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

android:textSize(指文字大小,單位sp)

android:textColor(指字型顏色,以#開頭的六位,可通過拾色器直接修改顏色)

學習筆記|AS入門(二) 簡單控制元件篇(上)
android:background(指控制元件背景,可以是顏色也可以是圖片,如果是圖片,會鋪滿整個控制元件,也就是可能會變形)

TextView常用屬性介紹到這裡,因為TextView控制元件在activity_main.xml佈局檔案裡,只要在MainActivity設定顯示的佈局檔案是activity_main,然後就可以執行模擬器檢視效果了!

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

另外,其實所有的控制元件都可以在Design介面中從右側Palette直接拖拽,然後再回到Text介面內編輯需要的屬性,但建議初學者最好在程式碼介面自己敲程式碼,打牢基礎。

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

2.EditText :可輸入文字框

先來看看EditText效果:

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

這個介面大家一定不陌生,由此可見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,指設定輸入多少字元時提示內容。

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

    <AutoCompleteTextView
        android:hint="請輸入要搜尋的資訊"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/autoCompleteTextView"
        android:completionThreshold="2"/>
複製程式碼

當然,能被提示的資料來源還需要自己手動設定,接下來MainActivity可以隆重上場了,見下圖,關於activity後續會詳細介紹。

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

實現方法,分三步:

第一步: 在類內定義一個AutoCompleteTextView物件,然後在onCreate方法裡用findViewById的方法找到之前定義好的AutoCompleteTextView控制元件,格式是 R.id. 控制元件id名,這就是為什麼要在.xml佈局檔案裡給控制元件一個id的原因,又由於findViewById返回的是View類物件,要在方法前加上強制轉換(AutoCompleteTextView)。

第二步: 在類內定義一個介面卡ArrayAdapter,介面卡是連線資料來源和檢視介面的橋樑,本例用資料介面卡就足夠,關於介面卡詳細內容後續會介紹。然後初始化介面卡載入資料來源,這裡自定義的data陣列就是被載入的資料來源,其他兩個引數this和android.R.layout.simple_list_item_1照寫即可。

第三步: 用控的自身方法setAdapter去載入介面卡ArrayAdapter。 完成這三步就可以實現了!

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

以下是原始碼:

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的使用基本一致,不再贅述,具體程式碼參照下圖。

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

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

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

以下是原始碼:

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

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

相關文章