這邊文章是從我的自己撰寫掘金博文搬過來的: 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基礎應用開發