[Android Studio]掌握Android Studio的五種常見控件和五種常見佈局

這邊文章是從我的自己撰寫掘金博文搬過來的: Android Studio 的五種常見控件和五種常見佈局,同時通過這篇文章想比較一下CSDN掘金網站的分享博文的優缺點以及效果感覺如何(希望大佬們給點建議)…如果文章有什麼不足之處,也希望大家多多指點。

一、View和ViewGroup

Android體系中UI的設計採用視圖層次的結構。

視圖層次: 由View和ViewGroup組成。在創建UI時,開發人員不會真正去創建View或者ViewGroup,而是直接使用Android所提供的具有不同功能的控件,因此通常是看不到View或ViewGroup。

View是Android系統中最基本的組件,同時也是Android所有可視組件的父類,它完成了構建按鈕、文本框、時鐘等諸多控件的基本功能。此外View還有一個非常重要的子類ViewGroup。
View與ViewGroup的區別:ViewGroup能夠容納多個View作爲ViewGroup的子組件,同時View也可以包含ViewGroup作爲其子組件,所以View和ViewGroup是相互包容、“你中有我,我中有你”的關係。


wrap_content: 是layout_width和layout_height的屬性值之一,表示和自身內容一樣的長度。(由內容決定)

match_parent: 是layout_width和layout_height的屬性值之一,表示和父組件一樣的長度。

fill_parent: 以填充佈局單元內儘可能多的空間。

margin屬性: 外邊距,指當前視圖與其他視圖間的距離,可以一次性指定上下左右四個外邊距值,也可以一次性指定上下左右採用同一個邊距值。

android:layout_margin="10dp"

android:layout_marginTop="10dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"

padding屬性: 內邊距,指當前視圖邊距與其內容間的距離。賦值跟margin屬性同類型。

android:layout_padding="10dp"

android:layout_paddingTop="10dp"
android:layout_paddingBottom="10dp"
android:layout_paddingLeft="10dp"
android:layout_paddingRight="10dp"

visible屬性:

android:visiblity="visible"
android:visiblity="invisible"
android:visiblity="gone"

二、Android的五種常見控件

2.1 文本控件

在Android的體系結構中,TextView和EditView之間是父類和子類的關係。即EditText繼承於TextView,因此EditText幾乎具備TextView的所有功能,兩者之間最大的不同在於:EditText能夠支持用戶輸入,而TextView不能。

2.1.1 TextView


TextView是用於顯示文字(字符串)的控件,可在代碼中通過設置屬性改變文字的大小、顏色、樣式等功能。

注意:
顏色值組成(三原色)有三種表示方法

1.#RGB:3位16進制整數,如:#f00

2.#RRGGBB:#00ff00

3.#AARRGGBB:#ff0000ff

2.1.2 EditText


EditText是可以進行編輯操作(用於用戶輸入和編輯文字或字符的控件)的文本框,將用戶信息傳遞給Android程序。還可以爲EditText控件設置監聽器,用來測試用戶輸入的內容是否合法。

2.2 按鈕控件

2.2.1 Button

Android的體系結構中Button繼承於TextView,而ImageButton繼承於ImageView。雖然這兩個控件繼承於不同的控件,但是Button和ImageButton都是用於完成用戶的單擊按鈕時的onClick事件。


Button是按鈕,是用於響應用戶的一系列點擊事件,使程序更加流暢和完整。

點擊事件(監聽事件)實現方式(三種):

☞ 實現方式一:

先在layout文件中指定onClick屬性:Android:onClick=“click”。然後在Activity中實現這個click方法

public void click (View v){
   /// 處理按鈕監聽事件
}

☞ 實現方式二:在Activity中添加匿名內部類

Button button = findViewById(R.id.button);


button.setOnClickListener(new View.OnClickListener(){
    @Override
    public void OnClick(View v){
   /// 處理按鈕監聽事件
    Log.i("匿名內部類方式","button is clicked");  
    }
});

☞ 實現方式三:

public class MainActivity implements View.OnClickListener
{
    //實現接口抽象方法
    public void onClick(View v){
    //處理按鈕監聽事件
    }
}

//在Activity中註冊回調接口
button.setOnClickListener(this);

2.2.2 RadioButton


RadioButton爲單選按鈕,它需要與RadioGroup配合使用,提供兩個或多個互斥的選項集。(如男、女)
RadioGroup是單選組合框,可容納多個RadioButton,並把它們組合在一起,實現單選狀態。


RadioButton按鈕的實現步驟:

1.先在UI佈局文件activity——main.xml中的LinearLayout標籤中添加如下代碼:

<RadioGroup
   android:id="@+id/radiogroup"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:orientation="horizontal">
   
    <RadioButton
   android:id="@+id/radiobutton1"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:checked="true"
   android:text="Male"/>
   <RadioButton
   android:id="@+id/radiobutton2"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:text="Female"/>
   
 </RadioGroup>

然後在MainActivity.java中添加onCreate函數中添加以下代碼:

RadioGroup radiogroup = (RadioGroup)findViewById(R.id.radiogroup);
radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener(){
    public void onCheckedChanged(RadioGroup group,int checkedId){
    switch(checkedId){
        case R,id.maleradio:editText.setText("男");
        break;
     }
       case R,id.femaleradio:editText.setText("女");
        break;
     }
    }
}

///另外Switch也可以用以下方法表示
if(checked==R.id.radiobutton1){
    textView.setText("男");
}
else{
     case R,id.maleradio:editText.setText("女");
        break;
     } 
}

2.2.3 CheckBox


CheckBox即多選按鈕,允許用戶在一組選項中進行單選和多選。用法與RadioButton類似。

CheckBox按鈕的實現步驟:

1.先在UI佈局文件activity——main.xml中的LinearLayout標籤中添加代碼(與radioBox的相似)
2.

注意:響應事件從何而來?(兩個來源)

1.由系統提供的,具有特定函數名的響應函數(在OnCreate中進行定義和實現)

2.自定義響應函數名的方法來響應用戶事件(放在Activity中作爲一個成員函數來使用)

public void CheckboxClicked(View view){
    boolean checked = ((Checked)view).isChecked();
    case R.id.meat:
    if(checked){
        editText.setText("肉類");
    }else{
        ...
    }
    break;
    
    ...
}

2.3 圖片控件

2.3.1 ImageView

ImageView是視圖控件,它繼承於View,其功能是在屏幕中顯示圖像,ImageView類可以從各種來源加載圖像(如資源庫或網絡),並提供縮放、裁剪、着色(渲染)等功能。

///在UI佈局文件activity——main.xml中添加

<ImageView 
android:id="@id/imageView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:srcCompat="@tolls:sample/backgrounds/scenic[0]"

///在MainActivity.java中添加onCreate函數中定義ImageView對象
ImageView imageView;
imageView.setImageResource(R.drawable.ic_launcher_foreground);

2.4 列表控件

2.4.1 ListView

普通列表–ListView在程序中使用頻率相對比較高,很多地方都會用到這個控件,其中的內容會以一個列表的形式顯示出來,但是在使用ListView時需要一個適配器(應用自帶適配器、z自定義適配器)(Adapter)類顯示需要的內容。當顯示的內容複雜的時候系統的適配器不能滿足要求了,這時可以自定義適配器,寫一個類繼承BaseAdapter。

2.4.2 Spinner

下拉列表–Spinner 控件也是一種列表類型的控件,可以極大地提高用戶的體驗性。當需要用戶選擇時,可以提供一個下拉列表將所有可選的項列出來,供用戶選擇。

2.4.3 ExpandableListView

多級列表ExpandableListView控件提供的是一個多級列表(一般是兩級)。


如何實現這個兩級列表呢?既然ExpandableListView採用列表的形式,它也是應該有一個適配器,但是它的適配器不是繼承BaseAdapter,而是繼承它獨有的適配器BaseExpandableListView,同時也需要實現其中的幾個方法:

BaseExpandableListView中的方法:

方法名稱 參數 說明
getGroudId int groundPosition 獲取在給定的位置編號
getChildId int groundPosition,int childPosition 獲取給定組的孩子的ID
getGroudCount 獲取第一級列表的列數
getChildrenCount int groupPosition 獲取指定組中孩子的數量
getGroup int groupPosition 獲取定組相關的數據
getGroupView int groupPositin,boolean isExpanded,View convertView,ViewGroup parent 獲取一個顯示的視圖給定組
getChild int groupPosition,int childPosition 獲取與孩子在給定的組相關的數據
getChildView int groupPosition,boolean isLastChild,View convertView,ViewGroup parent 獲取一個視圖顯示在給定的組的孩子的數據

2.5 時間日期控件

2.5.1 AnalogClock(模擬時鐘的顯示方式)和DigitalClock

這兩個控件都是通過獲取系統時間展示給用戶。AnalogClock是以模擬時鐘的形式展示,DigitalClock是以數字時鐘 的形式向用戶展示。

2.5.2 DatePicker和TimePiker

用戶可以通過這兩個控件來設置日期和時間,DatePicker(會在Android 4.0中自動產生一個日曆的功能)用於選擇日期,TimePicker用於選擇時間。

三、五種常用的佈局

在Android程序中界面是通過佈局文件設定的,在每個應用程序創建會默認包含一個主界面佈局,該佈局位於res/layout目錄中。實際開發中每個應用程序都包含多個界面,而程序默認提供的一個主界面佈局無法滿足需求,因此經常會在程序中添加多個佈局。

在Android中有兩種方式創建佈局:一種是在項目中的layout文件夾中寫XML,將各個佈局寫在XML中;一種是在程序中通過代碼去編寫,這種方式一般用得比較少。

四種佈局常用的單位:

1.px: 像素,即在屏幕中可以顯示最小元素單位。

2.pt: 磅數,一磅等於1/72英寸,一般pt作爲字體的單位來顯示

3.dp(與密度無關的像素,dp與dip相同): 基於屏幕密度的抽象單位。不同設備由不同的顯示效果,更具分辨率的不同來去頂控件的尺寸。

4.sp: 可伸縮像素,採用與dp相同的設計理念,推薦設置文字大小時使用。

3.1 線性佈局(LinearLayout)

線性佈局就是將一些控件排放在一條線上,但是有水平方向和垂直方向兩種。水平和垂直方向的控制由屬性android:orientation來控制,這個屬性有兩個值:水平(Vertical)和垂直(Horizaontal),在線性佈局中還有一些比較常用的屬性,如:android:gravity、android:weight(控件的權值)等。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    >
    <LinearLayout
        android:id="@+id/LinearLayout01"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1.0"
        android:orientation="horizontal"
        >
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="center_horizontal"
            android:text="按鈕1"
            android:layout_weight="1.0"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="center_horizontal"
            android:text="按鈕2"
            android:layout_weight="1.0"
            />
        <Button
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:gravity="center_horizontal"
            android:text="按鈕3"
            android:layout_weight="1.0"
            />
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="按鈕4"
            android:layout_weight="1.0"
            />
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="按鈕5"
            android:layout_weight="1.0"
            />
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="按鈕6"
            android:layout_weight="1.0"
            />
    </LinearLayout>
</LinearLayout>

運行效果效果如下:

3.2 相對佈局(RelativelLayout)

線對佈局是指按照控件間的相對位置進行佈局,也就是說我們可以選一個控件作爲參照,其他的控件可以在它的上邊、下邊、左邊及右邊等。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:background="#ffffff"
    >
   <TextView
       android:id="@+id/textView01"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="AA"
       android:textColor="#00FF00"
       android:textSize="22sp"
       android:layout_marginLeft="20px"/>

    <TextView
    android:id="@+id/textRight"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
        android:layout_toRightOf="@id/textView01"
    android:text="BB"
        android:textColor="#FF0000"
        android:textSize="22sp"
    android:layout_marginLeft="20px"/>
    <TextView
        android:id="@+id/text02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textView01"
        android:text="CC"
        android:textColor="#00FFFF"
        android:textSize="22sp"
        android:layout_marginLeft="20px"/>
    <TextView
        android:id="@+id/textView02"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/textRight"
        android:layout_toRightOf="@id/text02"
        android:text="DD"
        android:textColor="#000000"
        android:textSize="22sp"
        android:layout_marginLeft="20dip"/>

</RelativeLayout>

運行結果如下:
BB相對於AA的左邊,CC相對於AA的下邊邊,DD相對於BB的下邊且相對於CC的右邊

3.3 幀佈局(FrameLayout)

幀佈局是五大布局中最簡單的一個佈局,在這個佈局中,整個界面被當成一塊空白備用區域,所有的子元素都不能被指定放置的位置,它們統統放於這塊區域的左上角,並且後面的子元素直接覆蓋在前面的子元素上,將前面的子元素部分和全部遮擋。

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/FrameLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    >
    <TextView
        android:id="@+id/TextView01"
        android:layout_width="1000px"
        android:layout_height="1000px"
        android:background="#ff0000"
        android:text="文本框1"
        android:textColor="#ffffff"/>
    <TextView
        android:id="@+id/TextView02"
        android:layout_width="750px"
        android:layout_height="750px"
        android:background="#0000ff"
        />
    <TextView
        android:id="@+id/TextView03"
        android:layout_width="500px"
        android:layout_height="500px"
        android:background="#00ff00"
        />
</FrameLayout>

運行結果如下:

3.4 表格佈局(TableLayout)

表格佈局適用於N行N列的佈局格式。一個TableLayout由許多TableRow組成,一個TableRow就代表TableLayout中的一行。TableRow的數量決定表格的行數。而表格的列數是由包含最多控件的TableRow決定。

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#ffffff"
    android:stretchColumns="1"
    >
    <TableRow>
    <TextView
        android:layout_column = "1"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="open..."/>
    <TextView
        android:gravity="right"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Ctrl_o"/>
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090"/>

    <TableRow>
    <TextView
        android:layout_column = "1"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Save..."/>
    <TextView
        android:gravity="right"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Ctrl_s"/>
    />
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090"/>

    <TableRow>
    <TextView
        android:layout_column = "1"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Save As..."/>
    <TextView
        android:gravity="right"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Ctrl_shift_s"/>
    </TableRow>

    <View
        android:layout_height="2dip"
        android:background="#FF909090"/>

    <TableRow>
    <TextView
        android:layout_column = "1"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="X"/>
    <TextView
        android:gravity="right"
        android:padding="3dip"
        android:textColor="#000000"
        android:text="Import..."/>
    </TableRow>
</TableLayout>

運行結果如下:

3.5 絕對佈局(AbsoluteLayout)

絕對佈局是通過指定x、y座標來控制每一個控件位置的。

四、參考資料

《從零開始學Android編程》

中國大學慕課網:Android應用開發

中國大學慕課網:Android基礎應用開發

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章