Android用戶界面設(shè)計(jì):基本按鈕

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

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

第1步:創(chuàng)建Android應(yīng)用程序

我們從創(chuàng)建Android程序開始。你平常一樣完成你的Android應(yīng)用。一旦你已經(jīng)創(chuàng)建項(xiàng)目并可以運(yùn)行,決定你希望向什么樣的屏幕添加Button控件。可能你就簡單地創(chuàng)建了一個使用默認(rèn)活動和布局(main.xml)的新Android項(xiàng)目。這個教程將使用這種情況作例子。一旦你創(chuàng)建了你的Android項(xiàng)目,你就可以繼續(xù)學(xué)習(xí)這篇文章了。

你可以參考我們的項(xiàng)目:BasicButtons, 可以在一個開源項(xiàng)目中找到。

第2步:使用Button控件

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

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

Android screen with two types of button controls

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

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

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

要添加一個Button控件到布局資源文件,打開/res/layout/main.xml布局文件,它是你的Android項(xiàng)目的一部分。點(diǎn)擊你想要為其添加Button控件的LinearLayout (或者父級布局控件,比如RelativeLayout或FrameLayout)。在Eclipse中,你可以點(diǎn)擊Outline標(biāo)簽中的父級布局,然后使用綠色加號按鈕添加一個新的控件。選擇你要添加的控件——在這個例子中是Button控件。

Adding a Button control to a Layout Resource in Eclipse

要配置Button控件的外觀,選中該控件并通過在屬性標(biāo)簽中改變屬性值來調(diào)節(jié)控件的屬性。下面是一些你會想知道的特別的屬性:

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

下面是用來生成前段中展示的屏幕的布局資源文件的內(nèi)容。它包括三個控件。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步:處理點(diǎn)擊

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

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

android:onClick="onMyButtonClick"

然后,在你的活動類,你需要實(shí)現(xiàn)這個方法。它應(yīng)該是一個帶有單個參數(shù)(一個View對象)的公有的void方法。例如,下面的按鈕點(diǎn)擊實(shí)現(xiàn)了當(dāng)Button控件被點(diǎn)擊時在屏幕生成一個消息框:

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

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

Handling a Button control click with a Toast

第5步:處理點(diǎn)擊——實(shí)現(xiàn)OnClickListener

實(shí)現(xiàn)點(diǎn)擊事件處理的另一種方法是使用setOnClickListener()方法向你的按鈕控件注冊一個新的View.OnClickListener。這種方式代替了將你布局資源中的按鈕控件的On Click屬性設(shè)置為一個你必須實(shí)現(xiàn)的方法的方式,你可以在你的活動中動態(tài)地做這些事情。雖然這可能看起來有很多額外的代碼要寫,但至少理解它是非常重要的,因?yàn)樵谝恍┛丶宵c(diǎn)擊不是需要處理的唯一事件。我們將要向你展示的程序應(yīng)用了其它的事件,比如長按。

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

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();
 }
 });

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

總結(jié)

按鈕控件在Android程序中經(jīng)常會用到。在這個快速教程中你學(xué)習(xí)了如何創(chuàng)建兩種不同的Android按鈕控件:Button和ImageButton。你也學(xué)習(xí)了實(shí)現(xiàn)這些類型按鈕控件的按鈕點(diǎn)擊事件處理的幾種方法。[English]

轉(zhuǎn)載請注明:
作者:RockUX–WEB前端
出自:Android用戶界面設(shè)計(jì):基本按鈕

原創(chuàng)辛苦,請多多支持!

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發(fā)揮!