[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フォーム

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




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

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

以下の3つはAndroidが学習できるオンラインスクールです。


TECH ACADEMY
Androidアプリコース



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



CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp





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

尚、スクールがダメだと言う人がいますが、やる気があれば問題ありません。与えられるのを待っていてはいけないですね
欲しいものは取りに行くのです。


Google Pixel 3 XLグローバル版
SIMフリー 並行輸入品
6.3インチの大画面
背景をぼかすポートレートモード撮影

Anker PowerCore II Slim 10000
Power IQ 2.0搭載
iPhone & Android対応

シェアする

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

フォローする