Android用戶界面設計:基本按鈕

本文向你展示了在你的Andr​​oid應用程序中創建一個簡單的Button或ImageButton控件的步驟。首先,你會學到如何向你的佈局文件中添加按鈕控件。然後你會學習如何用兩種方法處理用戶對按鈕的點擊。最後,我們討論Android中按鈕控件一些其它的可用特性。

第1步:創建Android應用程序

我們從創建Android程序開始。你平常一樣完成你的Andr​​oid應用。一旦你已經創建項目並可以運行,決定你希望向什麼樣的屏幕添加Button控件。可能你就簡單地創建了一個使用默認活動和佈局(main.xml)的新Android項目。這個教程將使用這種情況作例子。一旦你創建了你的Andr​​oid項目,你就可以繼續學習這篇文章了。

你可以參考我們的項目:BasicButtons, 可以在一個開源​​項目中找到。

第2步:使用Button控件

Android SDK包含兩個在你的佈局中可以使用的簡單按鈕控件:Button(android.widget.Button)和ImageButton(android.widget.ImageButton)。這些控件的功能很相似因此我們幾乎可以一併地的討論它們。這兩個控件不相同的地方基本上就是外觀上;Button控件有一個文本標籤,而ImageButton使用一個可繪製的圖像資源來代替。 Button使用的一個很好的例子應該是一個簡單的帶有“保存”文本標籤的按鈕。 ImageButton使用的一個很好的例子可能是音樂播放器按鈕的集合,包括播放P(), 暫停()以及停止( )。

這裡是一個示例屏幕,包括一個Button控件(左邊)和一個ImageButton控件(右邊)。



Android screen with two types of button controls

Android SDK還包含了一些其它更不為人知的從上面兩個基本按鈕類型繼承來的類按鈕控件,包括CompoundButton,RadioButton,ToggleButton,和ZoomButton。要了解這些控件的更多信息,查看Android文檔。你也可以通過繼承合適的類並實現控件行為來創建自定義控件。

第3步:向佈局添加Button控件

Button控件通常都被作為活動的佈局資源文件一部分。比如,要添加一個Button控件到與你程序相關的main.xml佈局資源中,你必須編輯佈局文件。你可使用Eclipse的佈局資源設計器,或者直接編輯XML。像按鈕這樣的控件也可以通過程序動態地創建並在運行時添加到你的屏幕上。簡單地通過它的類來創建合適的控件並將它添加到你的活動中的佈局。

要添加一個Button控件到佈局資源文件,打開/res/layout/main.xml佈局文件,它是你的Andr​​oid項目的一部分。點擊你想要為其添加Button控件的LinearLayout (或者父級佈局控件,比如RelativeLayout或FrameLayout)。在Eclipse中,你可以點擊Outline標籤中的父級佈局,然後使用綠色加號按鈕添加一個新的控件。選擇你要添加的控件——在這個例子中是Button控件。

Adding a Button control to a Layout Resource in Eclipse

要配置Button控件的外觀,選中該控件並通過在屬性標籤中改變屬性值來調節控件的屬性。下面是一些你會想知道的特別的屬性:

  • 使用id屬性給Button或ImageButton一個唯一的名字。
  • 使用文本屬性設置Button控件上要顯示的文字;使用src屬性設置ImageButton控件上要顯示的圖片。
  • 將控件的佈局高度和佈局寬度屬性設置為wrap_content.
  • 設置任何其它屬性來調整控件的外觀。比如,使用文本顏色,文本大小和文本樣式屬性來調整Button的字體。

下面是用來生成前段中展示的屏幕的佈局資源文件的內容。它包括三個控件。 RelativeLayout組織屏幕上的控件,也就是兩個子控件,一個Button和一個ImageButton,如下:

< pre name="code"><?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:gravity="center">
 <Button
android:id="@+id/Button01 "
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello"
android:minHeight="92dp"
android:textSize="22dp"
android:onClick="onMyButtonClick"></Button>
 <ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/skater"
android:id="@+id/ImageButton01 "
android:layout_toRightOf="@+id/Button01 "></ ImageButton>
 </RelativeLayout>
 </pre>

第4步:處理點擊

現在,如果你運行你的程序,按鈕控件顯示出來了,但是如果你點擊它們不會有任何反應。現在應該來處理控件上的點擊事件了。有好幾種方法可以做到。

讓我們從簡單的方法開始吧。 Button和ImageButton控件有一個叫onClick的屬性(在屬性面板裡叫“On Click”)。你可以通過這個屬性設置要處理點擊事件的方法名,然後在你的活動中實現這個方法。比如,你可以將你的Button控件屬​​性設置為onMyButtonClick。在XML中,這個屬性將如下所示:

android:onClick= "onMyButtonClick"

然後,在你的活動類,你需要實現這個方法。它應該是一個帶有單個參數(一個View對象)的公有的void方法。例如,下面的按鈕點擊實現了當Button控件被點擊時在屏幕生成一個消息框:

public void onMyButtonClick(View view )
 {
 Toast.makeText(this, "Button clicked!", Toast.LENGTH_SHORT).show();
 }

當你點擊這個Button控件,onMyButtonClick()方法被調用,在屏幕上顯示一個消息。你的Button按鈕能做什麼就取決於你自己了。下圖顯示了當點擊Button按鈕時消息是如何展示的:

Handling a Button control click with a Toast

第5步:處理點擊——實現OnClickListener

實現點擊事件處理的另一種方法是使用setOnClickListener()方法向你的按鈕控件註冊一個新的View.OnClickListener。這種方式代替了將你佈局資源中的按鈕控件的On Click屬性設置為一個你必須實現的方法的方式,你可以在你的活動中動態地做這些事情。雖然這可能看起來有很多額外的代碼要寫,但至少理解它是非常重要的,因為在一些控件上點擊不是需要處理的唯一事件。我們將要向你展示的程序應用了其它的事件,比如長按。

要使用這個方法,你必須更新你的活動類以註冊控件點擊事件。通常情況下通過你的活動的onCreate()方法來實現。使用findViewById()方法找到控件然後使用它的setOnClickListener()方法來定義當它被點擊時的行為。你將需要自己去實現界面的onClick()方法。比如,下面的代碼(位於活動的onCreate()方法中)為我們的ImageButton控件註冊了一個點擊處理器。

ImageButton myImageButton = ( ImageButton) findViewById(R.id.ImageButton01);
 myImageButton.setOnClickListener(new View.OnClickListener() {
 public void onClick(View v) {
 Toast.makeText(BasicButtonActivity.this, "ImageButton clicked!", Toast.LENGTH_SHORT).show ();
 }
 });

同樣地,你可以使用這個技術來實現長按點擊處理,通過使用控件的setOnLongClickListener()方法。

總結

按鈕控件在Android程序中經常會用到。在這個快速教程中你學習瞭如何創建兩種不同的Andr​​oid按鈕控件:Button和ImageButton。你也學習了實現這些類型按鈕控件的按鈕點擊事件處理的幾種方法。 [English]

轉載請註明:

作者:RockUX–WEB前端

出自:Android用戶界面設計:基本按鈕

原創辛苦,請多多支持!

特別注意:本站所有轉載文章言論不代表本站觀點,本站所提供的攝影照片,插畫,設計作品,如需使用,請與原作者聯繫,文章轉自alibuybuy

Comments are closed.