[Android] Buttonに画像を設定or画像をButtonのように使うImageButtonの設定

画像をタップして何か処理をさせたい場合があります。画像にリスナーsetOnTouchListenerを設定する方法もありますが、ここではButtonの背景に画像を指定する方法とImageButton を使う方法を試してみます。
 

imagebutton_5
ImageButtonとButton
河村友歌
画面全体がImageButton

Android Studio 2.2.2
Android 7.0

 

sponsored link

ImageButton

ImageButtonを使って画像をボタンののようにタップでアクションを起こすことができますが、画像の設定には、backgroundで指定する方法とsrcとする場合があります。drawableにicon.png, 200x200pixの画像を表示させてみます。
 
smile_yuca_cap
 
android:background

 
android:src

 
imagebutton_1
 
srcで画像を指定するとboundsが見えてしまいます。これは、backgroundで何かを指定すると消えます。
 

 
imagebutton_2
 
layout_widthとlayout_heightをwrap_contentから固定値に設定すると違いが出てきます。
 

 
imagebutton_3
 
backgroundにするとボタンサイズに影響されてしまいます、背景なので当然なのでしょう。
backgroundのケースはこれ以上あまりできることはありません。
srcの場合は上下が切り取られて表示されています。srcではscaleTypeの設定ができます。
 

 
imagebutton_4
 
centerInsideとfitCenterはこの場合は同じ結果ですがそれぞれ異なる効果があります。詳しくはImageView画像をScreenのレイアウトにフィットを参考にしてください。 

ImageButton と Button の作成

 
Buttonに画像を設定するにはbackgroundに画像を設定しますので、ImageButtonのbackgroundと同様の表示となります。

実際にActivity で ImageButton と Button を生成してみます。
MainActivity.java

 
activity_main.xml

 

 

全画面のImageButton

 
また、画面全体をButtonあるいはImageButtonにして、それを画像を張り付けると画面タッチのようにボタンを使う使い方もできます。
 
全画面にをボタンにするために
ImageButtonの縦横を最大にします
android:layout_width=”match_parent”
android:layout_height=”match_parent”

画像とスクリーンが比率も大きさも合わないので
余計な部分は切り取って最大に表示します
android:scaleType=”centerCrop”

テキストは別にTextViewをRelativeLayoutで適当な位置に配置すると
こうなります

MainActivity.java

 
activity_main.xml

 
タップすると文字が変わります
 

imageButton008
imagebutton009

 
[モデル 河村友歌]

関連ページ: