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

画像にリスナーsetOnTouchListenerを設定してタップを拾う方法もありますが、Buttonを使うというやり方もあります。Buttonの背景に画像を指定する方法とImageButton を使う方法を試してみます。
 
imagebutton 01b - [Android & Kotlin] ImageButton とButtonに画像を貼る

Android Studio 3.1.4
API 28
Kotlin 1.2.61

 



ImageButton or Button

 
ImageButtonは、Buttonで背景に画像を設定する場合とよく似ていますが、違いもあります。それぞれ用途に合った使い方を理解しておきましょう。
 

 

ImageButtonでの画像の設定

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

例として、 icon.png, 200x200pix の画像を res\drawable\ 以下に入れて表示させてみます。(画像は適当に持ってきてください)
 
imagebutton a01 500x294 - [Android & Kotlin] ImageButton とButtonに画像を貼る
 
android:background

 
android:src

 
imagebutton 1 171x300 - [Android & Kotlin] ImageButton とButtonに画像を貼る
 
srcで画像を指定すると薄いグレーのboundsが画像の周りに見えてしまいます。
 
imagebutton 1b - [Android & Kotlin] ImageButton とButtonに画像を貼る
 
これは、backgroundで何かを指定すると消えます。
 

 
imagebutton 2b - [Android & Kotlin] ImageButton とButtonに画像を貼る
 
backgroundとsrc設定の違いは、layout_widthとlayout_heightをwrap_contentから固定値に設定すると差が出てきます。
 

 
imagebutton 3b - [Android & Kotlin] ImageButton とButtonに画像を貼る
 
backgroundにするとボタンサイズに影響されてしまいます、背景なので当然なのでしょう。
backgroundのケースはこれ以上あまりできることはありません。

srcの場合は上下が切り取られて表示されています。srcではscaleTypeの設定ができ画像をImageViewの中央に寄せたり、いっぱいに広げたりできます。
 

 
imagebutton 4b - [Android & Kotlin] ImageButton とButtonに画像を貼る
 
centerInsideとfitCenterは「この場合は同じ結果」ですがそれぞれ異なる効果があります。

詳しくはImageView画像をScreenのレイアウトにフィットを参考にしてください。

 

ImageButton と Button の作成

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

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

 
レイアウトファイルです。
activity_main.xml

 
リソースファイル
strings.xml

 

 

ImageButtonをコードで作成

 
ついでですが、コードで記述するとどうなるでしょうか
基本的にはButtonをコードで書くのと同じですが画像の設定が異なります
 
MainActivity.kt

 
ボタンタップで文字列が変わりましたでしょうか。
 
imagebutton code 01 - [Android & Kotlin] ImageButton とButtonに画像を貼る
 
 
関連ページ:

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加


 


ページのトップへ戻る




シェアする

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

フォローする