1. 程式人生 > >Android筆記---常用控制元件以及用法

Android筆記---常用控制元件以及用法

這篇文章主要記錄下Android的常用控制元件以及使用的方法,Android 給我們提供了大量的UI控制元件,合理地使用這些控制元件就可以非常輕鬆地編寫出相當不錯的介面,這些是Android學習的基礎,沒有什麼業務邏輯,比較好入手。

這裡主要涉及到的控制元件包括:
文字類控制元件
TextView 負責展示文字,非編輯
EditText 可編輯文字控制元件
按鈕類控制元件
Button 按鈕
ImageButton 圖片按鈕
RadioButton與RadioGroup 單選按鈕
CheckBox 複選按鈕
圖片控制元件
ImageView 負責顯示圖片
進度條控制元件


ProgressBar 進度條

設定控制元件的屬性有兩種方法,一種是在佈局檔案中設定引數,另一種是在程式碼中呼叫對應方法實現,以下描述的都只是在佈局檔案中設定引數的方法。

介紹這些控制元件之前先介紹下所有控制元件都有的4個屬性id、layout_width以及layout_height,以及android:visibility。

android:id = "@+id/xxx"  @+id/xxx表示新增控制元件命名為xxx
android:layout_width = "xxx"
android:layout_height = "xxx"
//下面這個屬性預設可以省略
android:visibility = "visible"

其中layout_width以及layout_height屬性可選值有兩種 match_parent和wrap_content(其實從Android 2.2開始fill_parent改名為match_parent ,從API Level為8開始我們可以直接用match_parent來代替fill_parent):
match_parent表示讓當前控制元件的大小和父佈局的大小一樣,也就是由父佈局來決定當前控制元件的大小;
wrap_content表示讓當前控制元件的大小能夠剛好包含住裡面的內容,也就是由控制元件內容決定當前控制元件的大小。

android:visibility表示控制元件的可見屬性,所有的Android控制元件都具有這個屬性,可以通過 android:visibility 進行指定,可選值有三種,visible、invisible 和 gone。visible 表示控制元件是可見的,這個值是 預設值,不指定 android:visibility 時,控制元件都是可見的。invisible 表示控制元件不可見,但是它仍 然佔據著原來的位置和大小,可以理解成控制元件變成透明狀態了。gone 則表示控制元件不僅不可見, 而且不再佔用任何螢幕空間。一般用在Activity中通過setVisibility方法來指定呈現與否。

1. 文字類控制元件TextView

TextView是 Android 程式開發中最常用的控制元件之一,主要功能是向用戶展示文字的內容,它是不可編輯的 ,只能通過初始化設定或在程式中修改。

以下介紹一些常見的屬性,更多屬性可以參考TextView屬性大全

<TextView

//控制元件id
android:id = "@+id/xxx"  @+id/xxx表示新增控制元件命名為xxx

//寬度與高度
android:layout_width="wrap_content"  //wrap_content或者match_parent
android:layout_height="wrap_content"  //wrap_content或者match_parent

//文字文字 
android:text="@string/hello_world" //兩種方式,直接具體文字或者引用values下面的string.xml裡面的元素

//字型大小
android:textSize="24sp"  //以sp為單位

//字型顏色
android:textColor="#0000FF"  //RGB顏色

//字型格式
android:textStyle="normal"  //normal,bold,italic分別為正常,加粗以及斜體,預設為normal

//文字顯示位置
android:gravity="center"  //來指定文字的對齊方式,可選值有 top、bottom、left、right、center 等

//是否只在一行內顯示全部內容
android:singleLine="true"  //true或者false,預設為false

一般不對TextView文字進行修改,所以在Activity中的使用此處略。

2. 文字類控制元件EditText

相比TextView, EditText是可以編輯的,可以用來與使用者進行互動,其用法和TextView也是類似的,同樣,下面介紹一些常見的引數,更多引數可以參考EditText屬性大全

//控制元件id
android:id = "@+id/xxx"  @+id/xxx表示新增控制元件命名為xxx

//寬度與高度
android:layout_width="wrap_content"  //wrap_content或者match_parent
android:layout_height="wrap_content"  //wrap_content或者match_parent

//文字文字 
android:text="@string/hello_world" //兩種方式,直接具體文字或者引用values下面的string.xml裡面的元素

//文字提示內容
android:hint="hello_world" //android:text和android:hint區別是後者只是提示作用,真正需要輸入的時候提示的內容會消失

//字型大小
android:textSize="24sp"  //以sp為單位

//字型顏色
android:textColor="#0000FF"  //RGB顏色

//字型格式
android:textStyle="normal"  //normal,bold,italic分別為正常,加粗以及斜體,預設為normal

//文字顯示位置
android:gravity="center"  //來指定文字的對齊方式,可選值有 top、bottom、left、right、center 等

//是否只在一行內顯示全部內容
android:singleLine="true"  //true或者false,預設為false

//輸入內容設定為password型別
android:password="true"  //輸入的內容會變成······

//輸入內容設定為phoneNumber型別
android:phoneNumber="true"  //只能輸入數字

//設定游標為顯示/隱藏
android:cursorVisible = "false" //true或者false,預設為true顯示

在Activity中簡單用法:

public class MainActivity extends Activity {
    //宣告一個EditText
    private EditText edittext;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //給當前的活動載入一個佈局
        setContentView(R.layout.activity_main);
        //初始化edittext
        edittext=(EditText) findViewById(R.id.edit_text);
    }

...
...
    //在方法中呼叫給edittext賦值
    edittext.setText("success");
...
...
}

3.按鈕類控制元件Button

Button控制元件也是使用過程中用的最多的控制元件之一,所以需要好好掌握。使用者可以通過單擊 Button 來觸發一系列事件,然後為 Button 註冊監聽器,來實現 Button 的監聽事件。

首先來看下Button的配置屬性,其實和TextView差不多設定更簡單點,主要是顯示到Button上面的文字提示:

<Button

//控制元件id
android:id = "@+id/xxx"  @+id/xxx表示新增控制元件命名為xxx

//寬度與高度
android:layout_width="wrap_content"  //wrap_content或者match_parent
android:layout_height="wrap_content"  //wrap_content或者match_parent

//按鈕上顯示的文字 
android:text="theButton" //兩種方式,直接具體文字或者引用values下面的string.xml裡面的元素@string/button

//按鈕字型大小
android:textSize="24sp"  //以sp為單位

//字型顏色
android:textColor="#0000FF"  //RGB顏色

//字型格式
android:textStyle="normal"  //normal,bold,italic分別為正常,加粗以及斜體,預設為normal

//是否只在一行內顯示全部內容
android:singleLine="true"  //true或者false,預設為false

然後我們需要在Activity中為Button的點選事件註冊一個監聽器,以下介紹兩種方式來實現按鈕監聽事件,更多方法可以參考下Android的按鈕單擊事件及監聽器的實現方式
1.通過匿名內部類作為事件監聽器類,這種方法適用於事件監聽器只是臨時使用一次,因為大部分時候,事件處理器都沒有什麼利用價值(可利用程式碼通常都被抽象成了業務邏輯方法),這是一種使用最廣泛的方法:

public class MainActivity extends Activity {
    private EditText edittext;
    private Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        edittext=(EditText) findViewById(R.id.edit_text);
        button = (Button) findViewById(R.id.button);
        //為button按鈕註冊監聽器,並通過匿名內部類實現
        button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
            //點選Button會改變edittext的文字為"點選了Button"
            edittext.setText("點選了Button");
            }
        }); 
    }
}

2.使用實現介面的方式來進行註冊,讓Activity類實現了OnClickListener事件監聽介面,從而可以在該Activity類中直接定義事件處理器方法:onClick(view v),當為某個元件新增該事件監聽器物件時,直接使用this作為事件監聽器物件即可:

public class MainActivity extends Activity implements OnClickListener {
    private EditText edittext;
    private Button button;
    private Button button2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        edittext=(EditText) findViewById(R.id.edit_text);
        button = (Button) findViewById(R.id.button);
        button2 = (Button) findViewById(R.id.button2);
        button.setOnClickListener(this);
        button2.setOnClickListener(this);
    }

    @Override
    //用switch區分是哪個id
    public void onClick(View v) {
        switch (v.getId()){
        case R.id.button:
            edittext.setText("點選了Button");
            break;
        case R.id.button2:
            edittext.setText("點選了Button2");
            break;
        }
    }
}

4.按鈕類控制元件ImageButton

ImageButton和Button類似,是一個按鈕,ImageButton可以實現我們任何想要的圖片按鈕的效果,比如我們租一個下載的按鈕等等。它要比button實現的要好看,並且體驗要好很多, 不過它是以圖片作為背景,沒有文字。利用屬性android:src="圖片位置"來設定圖片背景。

下面還是先給出一些常見的屬性:

<ImageButton

//控制元件id
android:id = "@+id/xxx"  @+id/xxx表示新增控制元件命名為xxx

//寬度與高度
android:layout_width="wrap_content"   //wrap_content或者match_parent
android:layout_height="wrap_content"  //wrap_content或者match_parent

//此外,可以具體設定高度和寬度顯示的畫素,不過這樣設定如果圖片尺寸大於設定的顯示的尺寸,則圖片是顯示不全的,這是可以配合android:scaleType屬性。
android:layout_width="200dp"
android:layout_height="200dp" 

//把原圖按照指定的大小在View中顯示,拉伸顯示圖片,不保持原比例,填滿ImageButton.
android:scaleType="fitXY"

//其他的關於android:scaleType的引數解釋,也可以參考下面的直觀圖
//android:scaleType="center"  在檢視中心顯示圖片,並且不縮放圖片
//android:scaleType="centercrop"  按比例縮放圖片,使得圖片長 (寬)的大於等於檢視的相應維度
//android:scaleType="centerinside"  按比例縮放圖片,使得圖片長 (寬)的小於等於檢視的相應維度
//android:scaleType="fitcenter" 按比例縮放圖片到檢視的最小邊,居中顯示
//android:scaleType="fitend" 按比例縮放圖片到檢視的最小邊,顯示在檢視的下部分位置
//android:scaleType="fitstart" 把圖片按比例擴大/縮小到檢視的最小邊,顯示在檢視的上部分位置
//android:scaleType="matrix" 用矩陣來繪製

//圖片來源,需要將圖片複製放到res/drawable資料夾裡面,引用的時候不需要寫圖片的字尾
android:src ="@drawable/beautiful">  

附上android:scaleType不同引數對應效果圖:
這裡寫圖片描述

ImageButton的用法在Button在Activity中的用法基本一致,可以參考上面關於Button的用法,此處略。

5.按鈕類控制元件RadioButton與RadioGroup

RadioButton(單選按鈕)在 Android 平臺上也比較常用,比如一些選擇項會用到單選按鈕。它是一種單個圓形單選框雙狀態的按鈕,可以選擇或不選擇。在 RadioButton 沒有 被選中時,使用者通過單擊來選中它。但是,在選中後,無法通過單擊取消選中。

RadioGroup 是單選組合框,用於 將 RadioButton 框起來。在多個 RadioButton被 RadioGroup 包含的情況下,同一時刻只可以選擇一個 RadioButton,並用 setOnCheckedChangeListener 來對 RadioGroup 進行監聽。

下面介紹RadioGroup的常用的屬性,因為其中包含有RadioButton:

 <RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        //設定RadioButton的排列方式,分為水平排列horizontal與垂直排列vertical
        android:orientation="horizontal" >
           <RadioButton 
               android:id="@+id/rd1"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               //設定單選後緊跟的文字提示文字
               android:text="北京"
               //設定文字的大小
               android:textSize="30sp"
               //設定文字的顏色
               android:textColor="#0000FF"
               //字型格式
               android:textStyle="normal"  //normal,bold,italic分別為正常,加粗以及斜體,預設為normal
                />
           <RadioButton 
               android:id="@+id/rd2"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:textSize="30sp"
               android:text="上海" />
      </RadioGroup>

下面給出在Activity中用 setOnCheckedChangeListener 來對 RadioGroup 進行監聽的程式碼, 注意RadioGroup中的RadioButton也都是需要宣告和通過控制元件的id來得到代表控制元件的物件。

public class MainActivity extends Activity{
    ////對控制元件物件進行宣告 
    private TextView textView;
    private RadioGroup radiogroup; 
    private RadioButton radiobutton1; 
    private RadioButton radiobutton2;  

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //通過控制元件的ID來得到代表控制元件的物件 
        textView = (TextView) findViewById(R.id.text_view);
        radiogroup = (RadioGroup) findViewById(R.id.radio_group);
        radiobutton1 = (RadioButton) findViewById(R.id.rd1);
        radiobutton2 = (RadioButton) findViewById(R.id.rd2);

        //呼叫setOnCheckedChangeListener來對RadioGroup進行監聽的程式碼
        radiogroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                if(checkedId == radiobutton1.getId()){
                    textView.setText("北京");
                }else if(checkedId == radiobutton2.getId()){
                    textView.setText("上海");
                }
            }
        });
    }   
}

6.按鈕類控制元件CheckBox

CheckBox(複選按鈕),顧名思義是一種可以進行多選的按鈕,預設以矩形表示。與 RadioButton 相同,它也有選中或者不選中雙狀態。我們可以先在佈局檔案中定義多選按鈕, 然後對每一個多選按鈕進行事件監聽 setOnCheckedChangeListener,通過 isChecked 來判斷 選項是否被選中,做出相應的事件響應。

下面給出CheckBox在佈局檔案中的常用的屬性以及用法:

<CheckBox 
    android:id="@+id/cb1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    //設定複選按鈕後緊跟的文字提示文字
    android:text="北京"
    //設定文字的大小
    android:textSize="30sp"
    //設定文字的顏色
    android:textColor="#0000FF"
    //字型格式
    android:textStyle="normal"  //normal,bold,italic分別為正常,加粗以及斜體,預設為normal/>
<CheckBox 
    android:id="@+id/cb2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="上海"
    android:textSize="30sp"
    android:textColor="#0000FF"/>

在Activity中呼叫的程式碼如下:

public class MainActivity extends Activity{
    ////對控制元件物件進行宣告 
    private TextView textView;
    private CheckBox checkbox1;
    private CheckBox checkbox2; 

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //通過控制元件的ID來得到代表控制元件的物件 
        textView = (TextView) findViewById(R.id.text_view);
        checkbox1 = (CheckBox) findViewById(R.id.cb1);
        checkbox2 = (CheckBox) findViewById(R.id.cb2);

        //為第一個 CheckBox 註冊監聽
        checkbox1.setOnCheckedChangeListener(new OnCheckedChangeListener(){
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                //如果第一個 CheckBox 被選中
                if(isChecked == true){
                    textView.setText("CheckBox選中北京");
                }
            }
        });

        //為第二個 CheckBox 註冊監聽
        checkbox2.setOnCheckedChangeListener(new OnCheckedChangeListener(){
            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                //如果第二個 CheckBox 被選中
                if(isChecked == true){
                    textView.setText("CheckBox選中上海");
                }
            }
        });
    }   
}

7.圖片控制元件ImageView

ImageView 是一個圖片控制元件,負責顯示圖片,圖片的來源可以是系統提供的資原始檔,也可以是 Drawable 物件,相對來說,圖片空間還是比較好掌握的,因為前面有講過ImageButton, 很多屬性都是相同的。
下面直接給出在佈局中的屬性:

<ImageView
//控制元件id
android:id = "@+id/xxx"  @+id/xxx表示新增控制元件命名為xxx

//寬度與高度
android:layout_width="wrap_content"   //wrap_content或者match_parent
android:layout_height="wrap_content"  //wrap_content或者match_parent

//此外,可以具體設定高度和寬度顯示的畫素,不過這樣設定如果圖片尺寸大於設定的顯示的尺寸,則圖片是顯示不全的,這是可以配合android:scaleType屬性。
android:layout_width="200dp"
android:layout_height="200dp" 

//把原圖按照指定的大小在View中顯示,拉伸顯示圖片,不保持原比例,填滿ImageButton.
android:scaleType="fitXY"

//其他的關於android:scaleType的引數解釋,也可以參考下面的直觀圖
//android:scaleType="center"  在檢視中心顯示圖片,並且不縮放圖片
//android:scaleType="centercrop"  按比例縮放圖片,使得圖片長 (寬)的大於等於檢視的相應維度
//android:scaleType="centerinside"  按比例縮放圖片,使得圖片長 (寬)的小於等於檢視的相應維度
//android:scaleType="fitcenter" 按比例縮放圖片到檢視的最小邊,居中顯示
//android:scaleType="fitend" 按比例縮放圖片到檢視的最小邊,顯示在檢視的下部分位置
//android:scaleType="fitstart" 把圖片按比例擴大/縮小到檢視的最小邊,顯示在檢視的上部分位置
//android:scaleType="matrix" 用矩陣來繪製

//圖片來源,需要將圖片複製放到res/drawable資料夾裡面,引用的時候不需要寫圖片的字尾
android:src ="@drawable/beautiful">  

在Activity中因為不需要設定監聽,較簡單,用法略。

8.進度條控制元件ProgressBar

ProgressBar 用於在介面上顯示一個進度條,表示我們的程式正在載入一些資料,執行程式,會看到螢幕中有一個圓形進度條正在旋轉。
在佈局xml檔案中的用法非常簡單:

 <ProgressBar 
    android:id="@+id/pb"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    //預設是圓形進度條,可以知道樣式設定為水平進度條
    style="?android:attr/progressBarStyleHorizontal"/>
    //指定成水平進度條後,我們還可以通過 android:max屬性給進度條設定一個最大值,然後在程式碼中動態地更改進度條的進度
    android:max="100"

那麼如何才能讓進度條在資料載入完成時消失呢,這裡我們就需要用一開始所講的Android 控制元件的可見屬性。
可以通過程式碼來設定控制元件的可見性,使用的是 setVisibility()方法,可以傳入 View.VISIBLE、View.INVISIBLE 和 View.GONE 三種值。

下面實現點選一下按鈕讓進度條消失,再點選一下按鈕讓進度條出現的這種效果,這裡只給出按鈕監聽的程式碼:

button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //通過 getVisibility()方法來判斷 ProgressBar 是否可見
                if (progressBar.getVisibility() == View.GONE) {
                    progressBar.setVisibility(View.VISIBLE);
                } else {
                    progressBar.setVisibility(View.GONE);
                }
            }
        });

至此,關於Android的常用控制元件都已經講了一遍,此處再對將關於TextView中文字單獨在一行顯示的時候實現跑馬燈的方法補充下,這裡直接給出程式碼,也可以參考下這篇blog下android:ellipsize實現跑馬燈效果總結

 <TextView
        android:id="@+id/tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="TextViewTextViewTextViewTextViewTextViewTextViewTextViewTextView" 
        //主要是以下5個
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        android:focusable="true"
        android:focusableInTouchMode ="true"
        android:singleLine="true" />