【移動應(yīng)用開發(fā)技術(shù)】如何理解Android開發(fā)UI中Button控件

【移動應(yīng)用開發(fā)技術(shù)】如何理解Android開發(fā)UI中Button控件

本篇文章給大家分享的是有關(guān)如何理解Android開發(fā)UI中Button控件，在下覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著在下一起來看看吧。前言最近一直在講androidUI控件的使用方式，這篇文章講解一下基本上屬于用處最廣泛的控件之一的Button控件。如果有過其他平臺開發(fā)經(jīng)驗(yàn)的程序員，對按鈕是不會陌生的。首先講解一下Android的Button控件的常用事件以及事件綁定和觸發(fā)，再在Button控件中通過設(shè)定屬性值來實(shí)現(xiàn)圖文混排，這個功能是在項(xiàng)目中常用到的。Button控件Button繼承了TextView。它的功能就是提供一個按鈕，這個按鈕可以供用戶點(diǎn)擊，當(dāng)用戶對按鈕進(jìn)行操作的時(shí)候，觸發(fā)相應(yīng)事件，如點(diǎn)擊，觸摸。還有一個ImageButton，它繼承自Button，可以在ImageButton中顯示一個圖片展示給用戶看，并且對其Text屬性設(shè)置值的時(shí)候是無效的，其它功能與Button一樣。常用事件一般對于一個按鈕而言，用的最多的就是點(diǎn)擊事件，Button間接繼承自View，而AndroidUI中的所有事件，都是定義在View中的。在本篇博客中，示例講解的點(diǎn)擊事件、觸摸事件，其他事件的使用方式與此類似，只是觸發(fā)的時(shí)機(jī)不同而已。此處分別需要實(shí)現(xiàn)View.OnClickListener、View.OnTouchListener接口的方法。View.OnClickListener，需要實(shí)現(xiàn)onClick(Viewv)方法，其中v為當(dāng)前觸發(fā)事件的控件。View.OnTouchListener，需要實(shí)現(xiàn)onTouch(Viewv,MotionEvent

event)，其中v為當(dāng)前觸發(fā)事件的控件，event包括了觸摸時(shí)的具體內(nèi)容，如移動、按下等。下面使用一個示例講解一下事件的綁定及觸發(fā)，在示例中顯示兩個按鈕控件，一個為普通按鈕，一個為填充圖片的按鈕，為它們綁定click事件，當(dāng)點(diǎn)擊事件觸發(fā)的時(shí)候，對其尺寸進(jìn)行修改，為圖片按鈕綁定觸摸事件，當(dāng)觸摸的時(shí)候觸發(fā)，切換圖片顯示。布局代碼：<?xml

version="1.0"

encoding="utf-8"?>

<LinearLayout

xmlns:android="/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

>

<Button

android:id="@+id/btnChangeSize"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="點(diǎn)擊修改尺寸"

/>

<Button

android:id="@+id/btnChangeImg"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/image1"

/>

</LinearLayout>實(shí)現(xiàn)代碼：package

com.bgxt.buttondemo;

import

android.app.Activity;

import

android.os.Bundle;

import

android.view.MotionEvent;

import

android.view.View;

import

android.view.View.OnClickListener;

import

android.view.View.OnTouchListener;

import

android.widget.Button;

//通過實(shí)現(xiàn)接口，對其進(jìn)行click、touch事件的支持

public

class

ButtonListener

extends

Activity

implements

OnClickListener,

OnTouchListener

{

private

Button

btnChangeSize;

private

Button

btnChangeImg;

private

int

flag

=

1;

@Override

protected

void

onCreate(Bundle

savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.btn_listener);

btnChangeSize

=

(Button)

findViewById(R.id.btnChangeSize);

btnChangeImg

=

(Button)

findViewById(R.id.btnChangeImg);

//

對兩個按鈕進(jìn)行事件綁定

btnChangeSize.setOnClickListener(this);

btnChangeImg.setOnClickListener(this);

btnChangeImg.setOnTouchListener(this);

}

@Override

public

boolean

onTouch(View

v,

MotionEvent

event)

{

//

獲取觸發(fā)事件的Button控件

Button

btn

=

(Button)

v;

if

(event.getAction()

==

MotionEvent.ACTION_UP)

{

//

當(dāng)觸摸時(shí)按下，則替換展示圖片為image1

btn.setBackgroundResource(R.drawable.image1);

}

else

{

btn.setBackgroundResource(R.drawable.image2);

}

return

false;

}

@Override

public

void

onClick(View

v)

{

Button

btn

=

(Button)

v;

if

(flag

==

1

&&

btn.getWidth()

==

getWindowManager().getDefaultDisplay()

.getWidth())

{

//

如果等于屏幕的寬度，則修改標(biāo)識flag為-1

flag

=

-1;

}

else

if

(flag

==

-1

&&

btn.getWidth()

<

100)

{

flag

=

1;

}

//

設(shè)置button控件尺寸

btn.setWidth(btn.getWidth()

+

(int)

(btn.getWidth()

*

0.1)

*

flag);

btn.setHeight(btn.getHeight()

+

(int)

(btn.getHeight()

*

0.1)

*

flag);

}

}展示效果圖：當(dāng)點(diǎn)擊按鈕的時(shí)候，按鈕被放大，當(dāng)放大到屏幕寬度時(shí)，開始縮小。當(dāng)觸摸圖標(biāo)按鈕的時(shí)候，圖像改變。圖文混排對于在實(shí)際項(xiàng)目中，經(jīng)常會需要設(shè)置按鈕展示為圖文混排的效果，這樣可以通過圖表更直觀的把按鈕的功能展示給用戶，又可以有簡短的文字說明。雖然ImageButton也可以實(shí)現(xiàn)圖片按鈕的效果，但是對于ImageButton而言，設(shè)置Text屬性是沒有作用的，所以這里不講解ImageButton的使用。對于Button控件，圖文混排需要用到一個android:drawableXxx屬性（Xxx為圖片所在按鈕的方向），這個屬性配合android:text，就可以實(shí)現(xiàn)圖文混排的效果。下面一個示例，分別展示了上下左右四個方位的圖標(biāo)按鈕，并且生成一個通過Java代碼動態(tài)生成圖文混排按鈕的。因?yàn)锽utton是繼承自TextView的，所以通過代碼設(shè)置圖文混排的方式與TextView類似，都需要用到SpannableString類。布局代碼：<?xml

version="1.0"

encoding="utf-8"?>

<LinearLayout

xmlns:android="/apk/res/android"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="150dp"

android:orientation="horizontal"

>

<!--

圖片在上，項(xiàng)目中常用這樣的設(shè)置

-->

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableTop="@drawable/image2"

android:text="b1"

/>

<!--

圖片在下

-->

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableBottom="@drawable/image2"

android:drawablePadding="10dp"

android:text="b2"

/>

<!--

圖片在左

-->

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawableLeft="@drawable/image2"

android:text="b3"

/>

<!--

圖片在右

-->

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:drawablePadding="10dp"

android:drawableRight="@drawable/image2"

android:text="b4"

/>

</LinearLayout>

<!--

聲明一個空的按鈕，用于進(jìn)行代碼設(shè)置

-->

<Button

android:layout_width="200dp"

android:layout_height="200dp"

android:id="@+id/btnSty"

android:layout_marginTop="10dp"/>

</LinearLayout>Java實(shí)現(xiàn)代碼：package

com.bgxt.buttondemo;

import

android.app.Activity;

import

android.graphics.Bitmap;

import

android.graphics.BitmapFactory;

import

android.os.Bundle;

import

android.text.SpannableString;

import

android.text.Spanned;

import

android.text.style.ImageSpan;

import

android.widget.Button;

public

class

ButtonStyle

extends

Activity

{

private

Button

btnSty;

@Override

protected

void

onCreate(Bundle

savedInstanceState)

{

//

TODO

Auto-generated

method

stub

super.onCreate(savedInstanceState);

setContentView(R.layout.btn_style);

//獲取按鈕控件

btnSty=(Button)findViewById(R.id.btnSty);

//生成SpannableString，用于圖片的載體

SpannableString

spannebleLeft=new

SpannableString("left");

Bitmap

bitmapleft=BitmapFactory.decodeResource(getResources(),

R.drawable.image1);

ImageSpan

imageSpanLeft=new

ImageSpan(ButtonSty