自定義佈局View

這裏寫圖片描述
引入佈局
如果你用過 iPhone 應該會知道, 幾乎每一個 iPhone應用的界面頂部都會有一個標題欄,
標題欄上會有一到兩個按鈕可用於返回或其他操作(iPhone 沒有實體返回鍵) 。現在很多的
Android程序也都喜歡模仿 iPhone的風格,在界面的頂部放置一個標題欄。雖然 Android系
統已經給每個活動提供了標題欄功能,但這裏我們仍然決定不使用它,而是創建一個自定義
的標題欄。
經過前面兩節的學習,我想創建一個標題欄佈局對你來說已經不是什麼困難的事情了,
只需要加入兩個 Button 和一個 TextView,然後在佈局中擺放好就可以了。可是這樣做卻存
在着一個問題,一般我們的程序中可能有很多個活動都需要這樣的標題欄,如果在每個活動
的佈局中都編寫一遍同樣的標題欄代碼,明顯就會導致代碼的大量重複。這個時候我們就可
以使用引入佈局的方式來解決這個問題,新建一個佈局 title.xml,代碼如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/title_bg" >
<Button
android:id="@+id/title_back"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:background="@drawable/back_bg"
android:text="Back"
android:textColor="#fff" />
<TextView
android:id="@+id/title_text"
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="1"
android:gravity="center"
android:text="Title Text"
android:textColor="#fff"
android:textSize="24sp" />
<Button
android:id="@+id/title_edit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="5dip"
android:background="@drawable/edit_bg"
android:text="Edit"
android:textColor="#fff" />
</LinearLayout>

這裏寫圖片描述
可以看到, 我們在LinearLayout中分別加入了兩個Button和一個TextView, 左邊的Button
可用於返回,右邊的 Button 可用於編輯,中間的 TextView 則可以顯示一段標題文本。上面
的代碼中大多數的屬性你都已經是見過的,下面我來說明一下幾個之前沒有講過的屬性。
android:background 用於爲佈局或控件指定一個背景,可以使用顏色或圖片來進行填充,這
裏我提前準備好了三張圖片, title_bg.png、 back_bg.png和 edit_bg.png, 分別用於作爲標題欄、
返回按鈕和編輯按鈕的背景。另外在兩個 Button中我們都使用了 android:layout_margin這個屬
性,它可以指定控件在上下左右方向上偏移的距離,當然也可以使用 android:layout_marginLeft
或 android:layout_marginTop 等屬性來單獨指定控件在某個方向上偏移的距離。
現在標題欄佈局已經編寫完成了,剩下的就是如何在程序中使用這個標題欄了,修改
activity_main.xml 中的代碼,如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<include layout="@layout/title" />
</LinearLayout>

�88�建自定義控件
引入佈局的技巧確實解決了重複編寫佈局代碼的問題, 但是如果佈局中有一些控件要求
能夠響應事件,我們還是需要在每個活動中爲這些控件單獨編寫一次事件註冊的代碼。比如
說標題欄中的返回按鈕,其實不管是在哪一個活動中,這個按鈕的功能都是相同的,即銷燬
掉當前活動。而如果在每一個活動中都需要重新註冊一遍返回按鈕的點擊事件,無疑又是增
加了很多重複代碼,這種情況最好是使用自定義控件的方式來解決。
新建 TitleLayout 繼承自 LinearLayout,讓它成爲我們自定義的標題欄控件,代碼如下
所示:

public class TitleLayout extends LinearLayout {
p
ublic TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title, this);
}
}

首先我們重寫了 LinearLayout 中的帶有兩個參數的構造函數,在佈局中引入 TitleLayout
控件就會調用這個構造函數。然後在構造函數中需要對標題欄佈局進行動態加載,這就要借
助 LayoutInflater 來實現了。通過 LayoutInflater 的 from()方法可以構建出一個 LayoutInflater
對象,然後調用 inflate()方法就可以動態加載一個佈局文件,inflate()方法接收兩個參數,第
一個參數是要加載的佈局文件的 id,這裏我們傳入 R.layout.title,第二個參數是給加載好的
佈局再添加一個父佈局,這裏我們想要指定爲 TitleLayout,於是直接傳入 this。
現在自定義控件已經創建好了,然後我們需要在佈局文件中添加這個自定義控件,修改
activity_main.xml 中的代碼,如下所示:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.uicustomviews.TitleLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
></com.example.uicustomviews.TitleLayout>
</LinearLayout>

添加自定義控件和添加普通控件的方式基本是一樣的, 只不過在添加自定義控件的時候
我們需要指明控件的完整類名,包名在這裏是不可以省略的。
重新運行程序,你會發現此時效果和使用引入佈局方式的效果是一樣的。
然後我們來嘗試爲標題欄中的按鈕註冊點擊事件,修改 TitleLayout中的代碼,如下所示:

public class TitleLayout extends LinearLayout {
public TitleLayout(Context context, AttributeSet attrs) {
super(context, attrs);
LayoutInflater.from(context).inflate(R.layout.title, this);
Button titleBack = (Button) findViewById(R.id.title_back);
Button titleEdit = (Button) findViewById(R.id.title_edit);
titleBack.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
((Activity) getContext()).finish();
}
});
titleEdit.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(getContext(), "You clicked Edit button",
Toast.LENGTH_SHORT).show();
}
});
}
}

首先還是通過 findViewById()方法得到按鈕的實例,然後分別調用 setOnClickListener()
方法給兩個按鈕註冊了點擊事件,當點擊返回按鈕時銷燬掉當前的活動,當點擊編輯按鈕時
彈出一段文本。重新運行程序,點擊一下編輯按鈕,效果如圖
這裏寫圖片描述

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