[Android & Kotlin] ImageButton とButtonに画像を貼る

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

as413k m12b - [Android & Kotlin] ImageButton とButtonに画像を貼る

Android Studio 4.1.3
API 30




ImageButton

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

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

 

ImageButtonの画像設定

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

例として、400 x 267pix の画像(3:2)を res\drawable\ 以下に入れて表示させてみます。(画像はお好みのもので)
 
image button 04b - [Android & Kotlin] ImageButton とButtonに画像を貼る

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

背景として
android:background


画像をsourceとして
android:src

 

サンプルコード

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

MainActivity.kt

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

strings.xml

build.gralde

 

実行してみましょう

 

画像サイズが大きい場合

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

例えば、倍の画像サイズにするとbackgroundに画像を設定するとアスペクトレシオが無視されてこうなります。
android:background

as413k m13 - [Android & Kotlin] ImageButton とButtonに画像を貼る

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

as413k m14 - [Android & Kotlin] ImageButton とButtonに画像を貼る

対策:
android:background

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

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

as413k m15 - [Android & Kotlin] ImageButton とButtonに画像を貼る
srcで画像を指定すると薄いグレーのboundsが画像の周りに見えてしまいます。
これはbackgroundに透明色などを設定すると
android:background=”#0000″
見えなくなります。ただしボタン領域としては残ります。

as413k m12b - [Android & Kotlin] ImageButton とButtonに画像を貼る

 

画像が小さい場合

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

 
as413k m16 - [Android & Kotlin] ImageButton とButtonに画像を貼る
 
次はコードでImageButtonを記述する方法と、Buttonに画像を設定するやり方についてです。

 

ImageButtonをコードで作成

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

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

 
MainActivity.kt

 
コードで記述したためレイアウトXMLはいりません。
 
as413k m17 - [Android & Kotlin] ImageButton とButtonに画像を貼る

 

Buttonに画像を設定する

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

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




 

アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。


TECH ACADEMY
Androidアプリコース



Code Camp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


シェアする

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

フォローする