最後のAndroidチュートリアル

では、 “ImageButton”を使用して、カスタマイズされた背景イメージを持つ “Button”を簡単に表示します。しかし、単純なイメージ以上のことを行うことができます。Androidでは、ボタンがフォーカスされているかボタンが押されているかなど、さまざまな状態に応じてボタンのイメージを変更できます。

この例は、このhttp://developer.android.com/resources/tutorials/views/hello-formstuff.html[Androidカスタムボタン]の記事から参照され、マイナーな変更が加えられています。


P.SこのプロジェクトはEclipse 3.7で開発され、Android 2.3.3.

でテストされています

1.画像をリソースに追加する

ボタン状態のために3つの画像を準備し、それを ”

resource/drawable

“フォルダに入れます。


  1. button

    normal

    green.png

    – デフォルト画像ボタン.


  2. button

    focused

    orange.png

    – ボタンがフォーカスされているときに表示する

たとえば、電話機のキーパッドがこのボタン上を移動(フォーカス)しているときです。


  1. button

    pressed

    yellow.png

    – ボタンが押されたときに表示します.

2.異なるボタンの状態にSelectorを追加する



res/drawable/

“フォルダに新しいXMLファイルを作成します。この場合、名前は “new__button.xml”としてください。このファイルは、どのボタンの状態がどの画像に属するかを定義したものです。

さて、あなたはこのId: `@ drawable/new__button`を使ってこのボタンを参照することができます。


File:res/drawable/new

button.xml__

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/button__pressed__yellow"
          android:state__pressed="true"/>
    <item android:drawable="@drawable/button__focused__orange"
          android:state__focused="true"/>
    <item android:drawable="@drawable/button__normal__green"/>
</selector>

3.ボタンを追加する



res/layout/main.xml

“ファイルを開き、通常のボタンを追加し、 “android:background =” @ drawable/new

button “を介して”

new


button


File:res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout__width="fill__parent"
    android:layout__height="fill__parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/imageButtonSelector"
        android:layout__width="wrap__content"
        android:layout__height="wrap__content"
        android:background="@drawable/new__button"/>

</LinearLayout>

4.コードコード

単純なクリックリスナーを持つ通常のボタン。

ファイル:私のAndroid App Activity.java

package com.mkyong.android;

import android.app.Activity;
import android.os.Bundle;
import android.widget.Button;
import android.widget.Toast;
import android.view.View;
import android.view.View.OnClickListener;

public class MyAndroidAppActivity extends Activity {

    Button imageButton;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        addListenerOnButton();

    }

    public void addListenerOnButton() {

        imageButton = (Button) findViewById(R.id.imageButtonSelector);

        imageButton.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View arg0) {

                Toast.makeText(MyAndroidAppActivity.this,
                    "ImageButton (selector) is clicked!",
                    Toast.LENGTH__SHORT).show();

            }

        });

    }

}

5.デモ

アプリケーションを実行します。

{空} 1。結果、デフォルトボタン。 (button

normal

green.png)


normal button、title = "android-buttonSelector-normal-demo1"、width = 318、height = 480

{空} 2。ボタンが集中している。 (button

focused

orange.png)


button is focused、title = "android-buttonSelector-focus-demo2"、width = 318、height = 480

{空} 3。ボタンが押された。 (button

pressed

yellow.png)

image =//wp-content/uploads/2011/12/android-buttonSelector-press-demo3.png[button is pressed、title = “android-buttonSelector-press-demo3″、width = 318、height = 480]

ソースコードをダウンロードする

ダウンロードする –

Android-ImageButton-Selector-Example.zip

(23 KB)

参考文献

カスタムボタンの例]。リンク://android/android-imagebutton-example/[Android ImageButton

例]