14天學會安卓開發(第三天)UI事件處理與佈局管理

查志強發表於2014-06-25
安卓UI事件

【原文：http://blog.csdn.net/corder_raine/article/details/8310120】

14天學會安卓開發  
作者:神祕的N (英文名  corder_raine)
聯絡方式:369428455(反饋)
交流群:284552167(示例,原文件下載)
版權為作者所有,如有轉載請註明出處
第三天.UI事件處理與佈局管理

3.1 View與ViewGroup

3.1.1 Android介面元素... 49
3.1.2 認識View.. 49
3.1.3 認識ViewGroup. 49
3.1.4 View與ViewGroup的關係

3.2 事件處理機制... 50

3.2.1 Toast控制元件... 50
3.2.2 事件處理Demo

3.3 布介面佈局方式... 53

3.3.1 LinearLayout（線性佈局）... 53
3.3.2 AbsoluteLayout（絕對佈局）... 54
3.3.3 RelativeLayout（相對佈局）... 54
3.3.4 TableLayout（表格佈局）... 55
3.3.5 FrameLayout（框架佈局）... 57
3.3.6 佈局之間的關係... 57

3.4 樣式和主題(style&theme)58



第三天.UI事件處理與佈局管理
2.1View與ViewGroup 
2.1.1 Android介面元素
  1、View：  檢視元件
  2、Layout：     佈局元件
  3、Wigets：      UI元素
  4、Menus：      選單

2.1.2認識View
1、所有高階UI元件都繼承View類而實現的
2、一個View在螢幕上佔據一塊矩形區域
3、負責渲染
4、負責處理髮生的事件
5、設定是否可見
6、設定是否可以獲得焦點等

2.1.3 認識ViewGroup
1、ViewGroup物件是android.view.ViewGroup例項
2、 ViewGroup是View的容器
3、 負責對新增進ViewGroup的View進行佈局
4、一個ViewGroup可以加入到另一個ViewGroup
2.1.4 View與ViewGroup的關係



1.png 







2.2事件處理機制
控制元件事件通過設定其控制元件的監聽器來監聽並處理事件

按鍵按下事件：通過重寫onKeyDown方法

按鍵彈起事件：通過重寫onKeyUp方法

觸筆點選事件：通過實現onTouchEvent方法

其他事件參考相應UI元件的Demo!!
2.2.1 Toast控制元件
在檢視中給使用者顯示的短小的提示訊息。

Toast.makeText(this, string, Toast.LENGTH_SHORT).show();

LENGTH_LONG：長時間顯示

LENGTH_SHORT：短時間顯示


2.2.2事件處理Demo

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
publicclass Activity01 extendsActivity
{
 
        publicvoid onCreate(Bundle savedInstanceState)
        {
 
                super.onCreate(savedInstanceState);
                 
                setContentView(R.layout.main);
                //獲得Button物件
                Button button_ok = (Button) findViewById(R.id.ok);
                //設定Button控制元件監聽器
                button_ok.setOnClickListener(newButton.OnClickListener() {
                        publicvoid onClick(View v)
                        {
                                //這裡處理事件
                                DisplayToast("點選了OK按鈕");
                        }
                });
 
        }


01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
/* 按鍵按下所觸發的事件 */
        publicboolean onKeyDown(intkeyCode, KeyEvent event)
        {
                switch(keyCode)
                {
                        caseKeyEvent.KEYCODE_DPAD_CENTER:
                                DisplayToast("按下：中鍵");
                                break;
                        caseKeyEvent.KEYCODE_DPAD_UP:
                                DisplayToast("按下：上方向鍵");
                                break;
                        caseKeyEvent.KEYCODE_DPAD_DOWN:
                                DisplayToast("按下：下方向鍵");
                                break;
                        caseKeyEvent.KEYCODE_DPAD_LEFT:
                                DisplayToast("按下：左方向鍵");
                                break;
                        caseKeyEvent.KEYCODE_DPAD_RIGHT:
                                DisplayToast("按下：右方向鍵");
                                break;
                }
                returnsuper.onKeyDown(keyCode, event);
        }


01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 按鍵彈起所觸發的事件 */
        publicboolean onKeyUp(intkeyCode, KeyEvent event) {
                switch(keyCode) {
                        caseKeyEvent.KEYCODE_DPAD_CENTER:
                                DisplayToast("彈起：中鍵");
                                break;
                        caseKeyEvent.KEYCODE_DPAD_UP:
                                DisplayToast("彈起：上方向鍵");
                                break;
                        caseKeyEvent.KEYCODE_DPAD_DOWN:
                                DisplayToast("彈起：下方向鍵");
                                break;
                        caseKeyEvent.KEYCODE_DPAD_LEFT:
                                DisplayToast("彈起：左方向鍵");
                                break;
                        caseKeyEvent.KEYCODE_DPAD_RIGHT:
                                DisplayToast("彈起：右方向鍵");
                                break;
                }
                 
                returnsuper.onKeyUp(keyCode, event);
        }
         
        publicboolean onKeyMultiple(intkeyCode, intrepeatCount, KeyEvent event) {
                 
                returnsuper.onKeyMultiple(keyCode, repeatCount, event);
        }

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* 觸筆事件 */
    public boolean onTouchEvent(MotionEvent event)
    {
            int iAction = event.getAction();
                if (iAction == MotionEvent.ACTION_CANCEL ||
                        iAction == MotionEvent.ACTION_DOWN ||
                        iAction == MotionEvent.ACTION_MOVE)
                {
                        return false;
                }
                //得到觸筆點選的位置
                int x = (int) event.getX();
                int y = (int) event.getY();
                 
                DisplayToast("觸筆點選座標：("+Integer.toString(x)+","+Integer.toString(y)+")");
                 
                return super.onTouchEvent(event);
        }
         
        /* 顯示Toast  */
        publicvoid DisplayToast(String str)
        {
                Toast.makeText(this, str, Toast.LENGTH_SHORT).show();
        }
}

詳情請參考DEMO







2.3 布介面佈局方式
LinearLayout（線性佈局）
AbsoluteLayout（絕對佈局）
RelativeLayout（相對佈局）
TableLayout（表格佈局）
FrameLayout（框架佈局）

2.3.1LinearLayout（線性佈局）
是常用的佈局之一

一個元件一行的形式顯示出來

分垂直（vertical）與水平（horizontal）兩種。

main.xml： vertical

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:orientation="vertical"   android:layout_width="fill_parent"   android:layout_height="fill_parent"   >
        <TextView
            android:text="第一行”    android:gravity="center_vertical”            android:textSize="15pt"
            android:background="#aa0000”            android:layout_width="fill_parent"
            android:layout_height="wrap_content”    android:layout_weight="1"/>
         
        <TextView
            android:text="第二行”    android:textSize="15pt”    android:gravity="center_vertical"
            android:background="#00aa00”    android:layout_width="fill_parent"
            android:layout_height="wrap_content”    android:layout_weight="1"/>
         
        <TextView
            android:text="第三行”    android:textSize="15pt”    android:gravity="center_vertical"
            android:background="#0000aa”    android:layout_width="fill_parent"
            android:layout_height="wrap_content”    android:layout_weight="1"/>
 
        <TextView
            android:text="第四行”    android:textSize="15pt”    android:gravity="center_vertical"
            android:background="#aaaa00”    android:layout_width="fill_parent"
            android:layout_height="wrap_content”    android:layout_weight="1"/>
</LinearLayout>



main.xml： horizontal

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"   android:orientation="horizontal"   android:layout_width="fill_parent"   android:layout_height="fill_parent"   >       
<TextView
            android:text="第一列”    android:gravity="center_horizontal"
            android:background="#aa0000”    android:layout_width="wrap_content"
            android:layout_height="fill_parent”    android:layout_weight="1"/>
         
        <TextView
            android:text="第二列”    android:gravity="center_horizontal"
            android:background="#00aa00”    android:layout_width="wrap_content"
            android:layout_height="fill_parent”    android:layout_weight="1"/>
         
        <TextView
            android:text="第三列”    android:gravity="center_horizontal"
            android:background="#0000aa”    android:layout_width="wrap_content"
            android:layout_height="fill_parent”    android:layout_weight="1"/>
         
        <TextView
            android:text="第四列”    android:gravity="center_horizontal"
            android:background="#aaaa00”    android:layout_width="wrap_content"
            android:layout_height="fill_parent”    android:layout_weight="1"/></LinearLayout>

2.3.2AbsoluteLayout（絕對佈局）
絕對佈局根據設定好的座標進行定位顯示

AbsoluteLayout兩個重要的屬性：
android:layout_x 元件在螢幕中的X座標
android:layout_y 元件在螢幕中的Y座標
2.3.3RelativeLayout（相對佈局）
是按照相對某個元件的位置來進行佈局，也就是說參考某個元件，置於此元件的上、下、左、右

其中幾個重要的屬性：
android:layout_below=“元件ID” 在某元件下面
android:layout_above=“元件ID” 在某元件上面
android:layout_toRightOf=“ID” 在某元件右邊
android:layout_toLeftOf=“ID” 在某元件左邊

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent”   android:layout_height="fill_parent“>
    <TextView android:id="@+id/label"
        android:layout_width="fill_parent”  android:layout_height="wrap_content"
        android:text="請輸入:"/>
    <EditText  android:id="@+id/entry"
        android:layout_width="fill_parent”   android:layout_height="wrap_content"
        android:background="@android:drawable/editbox_background"
        android:layout_below="@id/label"/>
    <Button      android:id="@+id/ok"
        android:layout_width="wrap_content”   android:layout_height="wrap_content"
        android:layout_below="@id/entry”    android:layout_alignParentRight="true"
        android:layout_marginLeft="10dip”   android:text="確定" />
 
    <Button   android:layout_width="wrap_content"
        android:layout_height="wrap_content”        android:layout_toLeftOf="@id/ok"
        android:layout_alignTop="@id/ok”        android:text="取消" />
</RelativeLayout>


RelativeLayout Demo

2.3.4TableLayout（表格佈局）
是比較常用的佈局，它是按照表格的方式來佈局整個畫面的

TableRow：TableLayout中需要嵌入行，然後將元件置於TableRow中才能顯示成Table的形式

幾個重要的屬性：
android:layout_weight：比重
TableRow：行
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:stretchColumns="1">
    <TableRow>
        <TextView
            android:layout_column="1”            android:text="開啟...”            android:padding="3dip"/>
        <TextView
            android:text="Ctrl-O”            android:gravity="right”            android:padding="3dip"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_column="1”            android:text="儲存...”            android:padding="3dip"/>
        <TextView
            android:text="Ctrl-S”            android:gravity="right”            android:padding="3dip"/>
    </TableRow>
    <TableRow>
        <TextView
            android:layout_column="1”            android:text="另存為...”            android:padding="3dip"/>
        <TextView
            android:text="Ctrl-Shift-S”            android:gravity="right”            android:padding="3dip"/>
    </TableRow>

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<View
        android:layout_height="2dip"
        android:background="#FF909090"/>
    <TableRow>
        <TextView            android:text="*”            android:padding="3dip" />
        <TextView
            android:text="匯入...”            android:padding="3dip" />
    </TableRow>
    <TableRow>
        <TextView            android:text="*”            android:padding="3dip" />
        <TextView            android:text="匯出...”            android:padding="3dip" />
        <TextView            android:text="Ctrl-E”       android:gravity="right”      android:padding="3dip"/>
    </TableRow>
 
    <View
        android:layout_height="2dip”        android:background="#FF909090" />
 
    <TableRow>
        <TextView
            android:layout_column="1”            android:text="退出"
            android:padding="3dip"/>
    </TableRow>
</TableLayout>

TableLayout Demo

2.3.5FrameLayout（框架佈局）
是一個比較特殊的佈局

此佈局一般放一個元件，並且這個元件是靠左上角顯示，

如果加入多個元件，那將會顯示最上層的一個元件。

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
<FrameLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
        <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:scaleType="center"
                android:src="@drawable/golden_gate"
                />
        <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="20dip"
                android:layout_gravity="center_horizontal|bottom"
                android:padding="12dip"
                android:background="#AA000000"
                android:textColor="#ffffffff"
                android:text="Golden Gate"
                />
</FrameLayout>


FrameLayout Demo


2.3.6佈局之間的關係
LinearLayout、AbsoluteLayout、RelativeLayout、FrameLayout均是ViewGroup的子類

TableLayout則是LinearLayout子類，如果TableLayout中的元件沒有放入TableRow中的話，那麼就會按照LinearLayout顯示

在Android中，佈局是可以相互巢狀的，比如LinearLayout中能夠嵌入TableLayout一樣
2.4 樣式和主題(style&theme)
android中的樣式和CSS樣式作用相似，都是用於為介面元素定義顯示風格，它是一個包含一個或者多個view控制元件屬性的集合。如：需要定義字型的顏色和大小。
在CSS中是這樣定義的：
<style>
    .lxt{COLOR:#0000CC;font-size:18px;}
</style>
可以像這樣使用上面的css樣式：<div class=“lxt">lxt008</div>
在Android中可以這樣定義樣式：
在res/values/styles.xml檔案中新增以下內容
1
2
3
4
5
6
7
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
    <stylename=“lxt”> <!-- 為樣式定義一個全域性唯一的名字-->
        <itemname="android:textSize">18px</item><!-- name屬性為樣式要用在的View控制元件持有的屬性 -->
        <itemname="android:textColor">#0000CC</item>
    </style>
</resources>

在layout檔案中可以像下面這樣使用上面的android樣式：
1
2
3
4
5
<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"....>
    <TextViewstyle="@style/lxt"
        .....  />
</LinearLayout>


<style>元素中有一個parent屬性。這個屬性可以讓當前樣式繼承一個父樣式，當前樣式可以繼承到父樣式的值。當然，如果父樣式的值不符合你的需求，你也可以對它進行修改，如下：

01
02
03
04
05
06
07
08
09
10
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
    <stylename=“lxt">
        <itemname="android:textSize">18px</item><!-- name屬性為樣式要用在的View控制元件持有的屬性 -->
        <itemname="android:textColor">#0000CC</item>
    </style>
    <stylename="sublxt"parent="@style/lxt">
        <itemname="android:textColor">#FF0000</item>
    </style>
</resources>



android中主題也是用於為應用定義顯示風格，它的定義和樣式的定義相同，如下：
1
2
3
4
5
6
7
<?xmlversion="1.0"encoding="utf-8"?>
<resources>
<stylename=“lxtTheme">
        <itemname=“android:windowNoTitle”>true</item> <!– 沒標題 
        <itemname=“android:windowFullscreen”>?android:windowNoTitle</item> <!– 全屏顯示 
</style>
</resources>

上面“?android:windowNoTitle”中的問號用於引用在當前主題中定義過的資源的值。
下面程式碼顯示在AndroidManifest.xml中如何為應用設定上面定義的主題：
1
2
3
4
<applicationandroid:icon="@drawable/icon"android:label="@string/app_name"
     android:theme="@style/lxtTheme">
   ......
</application>

除了可以在AndroidManifest.xml中設定主題，同樣也可以在程式碼中設定主題，如下：
setTheme(R.style.lxtTheme);
儘管在定義上，樣式和主題基本相同，但是它們使用的地方不同。樣式用在單獨的View，如：EditText、TextView等；主題通過AndroidManifest.xml中的<application>和<activity>用在整個應用或者某個 Activity，主題對整個應用或某個Activity存在全域性性影響。如果一個應用使用了主題，同時應用下的view也使用了樣式，那麼當主題與樣式屬性發生衝突時，樣式的優先順序高於主題。
另外android系統也定義了一些主題，例如：<activity android:theme=“@android:style/Theme.Dialog”>，該主題可以讓Activity看起來像一個對話方塊，如果需要查閱這些主題，可以在文件的referenceandroid-->R.style 中檢視。




原始碼下載

相關文章