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

0 評論 4900 瀏覽 0 收藏 11 分鐘

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

第1步:創建Android應用程序

我們從創建Android程序開始。你平常一樣完成你的Android應用。一旦你已經創建項目并可以運行,決定你希望向什么樣的屏幕添加Button控件??赡苣憔秃唵蔚貏摻艘粋€使用默認活動和布局(main.xml)的新Android項目。這個教程將使用這種情況作例子。一旦你創建了你的Android項目,你就可以繼續學習這篇文章了。

你可以參考我們的項目: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布局文件,它是你的Android項目的一部分。點擊你想要為其添加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步:處理點擊

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

讓我們從簡單的方法開始吧。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程序中經常會用到。在這個快速教程中你學習了如何創建兩種不同的Android按鈕控件:Button和ImageButton。你也學習了實現這些類型按鈕控件的按鈕點擊事件處理的幾種方法。[English]

轉載請注明:
作者:RockUX–WEB前端
出自:Android用戶界面設計:基本按鈕

原創辛苦,請多多支持!

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!