[Android & Kotlin] ImageButton に画像を貼ってボタンとして使う

画像を使ってボタンのようにタップして何か処理をさせたい場合があります。そんな時は ImageButton が使えます。

Android Studio
2021.1.1




ImageButton

 
画像をタップして何かのActionが欲しい場合です。やり方はいろいろあり、そのまま画像にOnTouchListenerを設定する方法がストレートかもしれません。

ImageButtonという画像を使うことを前提にしたButtonがあるので画像を載せるとどうなるかやってます。
 

 

ImageButtonの画像設定

 
background と src:
ImageButtonを使って画像をボタンののようにタップでアクションを起こすことができますが、画像の設定には、「background」に指定する方法と「src」とする場合があります。

例として、400 x 267pix の画像(3:2)を res\drawable\ 以下に入れて表示させてみます。(画像はお好みのもので)

 
1x1.trans - [Android & Kotlin] ImageButton に画像を貼ってボタンとして使う

ImageButtonへの設定はそれぞれ以下のようにできます。

背景として
android:background



画像をsourceとして
android:src

 

サンプルコード

 
Android の Button アプリを作ってみる のようにやれば簡単にできます。

MainActivity.kt


 
レイアウトの設定ですが、画像をbackgroundで設定し、ImageButtonのサイズを指定しています。
activity_main.xml


strings.xml


build.gralde


 

実行してみましょう

 

画像サイズが大きい場合

 
実はこの画像のサイズは画面サイズに合わせた大きさなので、画面サイズが異なる機種では不都合なことが起きます。

例えば、縦横倍の画像サイズにするとbackgroundに画像を設定するとアスペクトレシオが無視されてこうなります。
image_large.jpg (800 x 533pix)
android:background


1x1.trans - [Android & Kotlin] ImageButton に画像を貼ってボタンとして使う

srcで画像を設定すると画像が切り取られてしまいます。
android:src


1x1.trans - [Android & Kotlin] ImageButton に画像を貼ってボタンとして使う

対策:
android:background

スクリーン横幅に収まるように横幅と縦を計算して指定すれば改善できますが、機種の画面が変わるたびに画像サイズを自動計算して合わせないといけなくなります。

android:src
この場合は更にscaleTypeとして centerInside を入れて画像をボタン内に収めるようにします。

1x1.trans - [Android & Kotlin] ImageButton に画像を貼ってボタンとして使う


srcで画像を指定すると薄いグレーのboundsが画像の周りに見えてしまいます。
これはbackgroundに透明色などを設定すると
android:background=”#0000″
見えなくなります。

ただし! ボタン領域としては残ります。透明になっただけでタップに反応します。


1x1.trans - [Android & Kotlin] ImageButton に画像を貼ってボタンとして使う

 

画像が小さい場合

 
画像はAndroidのスクリーンサイズよりも小さければ、wrap_contentが働き画像サイズのボタンになります。


 
1x1.trans - [Android & Kotlin] ImageButton に画像を貼ってボタンとして使う


 
次はコードでImageButtonを記述する方法と、Buttonに画像を設定するやり方についてです。
 

ImageButtonをコードで作成

 
前の項目でXMLファイルを使ってImageButtonを設定できましたが、
コードで記述するとどうなるでしょうか、ダイナミックにボタンのサイズを変更したい場合はコードで書かないとXMLのレイアウトでは難しいでしょう。

同じようにボタンサイズを400dp x 267dpとして作成してみます。また、フラグで背景画像とするか画像ソースにするか切り替えてみます。

 
MainActivity.kt


 
コードで記述したためレイアウトXMLはいりません。
 
1x1.trans - [Android & Kotlin] ImageButton に画像を貼ってボタンとして使う

 

Buttonに画像を設定する

 
ImageButtonの他に画像をボタンのようにするには、Buttonに画像を設定することでも可能でしたが、Android Studio 4 あたりからButtonに背景色がついたままになり背景の変更が容易ではなくなりました。
やり方はあると思いますが、あえてImageButtonがあるのでButtonを画像にするのは深入りするのはやめておきます。
ボタンのスタイル設定

 
 
References:
ボタン | Android デベロッパー | Android Developers
ImageButton | Android Developers




シェアする

  • このエントリーをはてなブックマークに追加

フォローする