お気に入りの画像を使ってボタンのようにタップして何か処理をさせたい場合があります。そんな時は ImageButton が使えます。その他にButtonの画像とする方法もありますがそれぞれ微妙に異なる表示になりますので確認しておきましょう。
API 29
ImageButton
やりたいことは画像をタップしてのなんらなのActionが欲しいのだと思います。やり方はいろいろあり、
そのまま画像にOnTouchListenerを設定する方法がストレートです。また、ボタンに画像を設定することもでき簡単です。
ImageButtonという画像を使うことを前提にしたUIもあります。ここではButtonに画像を載せるとどうなるかやってます。
1. ImageButtonの画像設定
2. サンプルコード
3. 画像サイズが大きい場合
4. 画像サイズが小さい場合
5. ImageButtonをコードで作成
6. Buttonに画像を設定する
ImageButtonの画像設定
background と src:
ImageButtonを使って画像をボタンののようにタップでアクションを起こすことができますが、画像の設定には、「background」に指定する方法と「src」とする場合があります。
例として、芹菜ちゃんの 400 x 267pix の画像(3:2)を res\drawable\ 以下に入れて表示させてみます。(画像はお好みのもので)
ImageButtonへの設定はそれぞれ以下のようにできます。
背景として
android:background
1 2 3 |
<ImageButton ... android:background="@drawable/image" /> |
画像をsourceとして
android:src
1 2 3 |
<ImageButton ... android:src="@drawable/image" /> |
サンプルコード
Android の Button アプリを作ってみると簡単だった のようにやれば簡単にできます。
MainActivity.kt
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
package your.package.name import androidx.appcompat.app.AppCompatActivity import android.os.Bundle // Kotlin Android Extensions import kotlinx.android.synthetic.main.activity_main.* class MainActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) var flg = true imageButton.setOnClickListener{ if (flg) { textImageButton.text = getString(R.string.tapped) flg = false } else { textImageButton.text = getString(R.string.image_button) flg = true } } } } |
レイアウトの設定ですが、画像をbackgroundで設定し、ImageButtonのサイズを指定しています。またLinearLayoutで記述しました。(デフォルトの Constraintlayout ではありません)
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:background="#fdc" android:gravity="center" tools:context=".MainActivity" > <TextView android:id="@+id/text_imagebutton" android:textSize="30sp" android:textColor="#ff0000" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:gravity="center" android:text="@string/image_button"/> <ImageButton android:id="@+id/image_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="10dp" android:contentDescription="@string/image_description" android:background="@drawable/image" /> </LinearLayout> |
strings.xml
1 2 3 4 5 6 |
<resources> <string name="app_name">YourAppName</string> <string name="image_button">Image Button</string> <string name="tapped">Tapped</string> <string name="image_description">Serina</string> </resources> |
画像サイズが大きい場合
実はこの画像のサイズが400 x 267pixですが、このPixel 3XLの場合これ以上大きくなると不都合なことが起きます。
例えば、800 x 533 pix の画像サイズにするとbackgroundに画像を設定すると縮小されてしまいます。
android:background
srcで画像を設定すると画像が切り取られてしまいます。
android:src
対策:
画像比率が3:2でPixel 3XLの横幅が411dpなので、それに収まるように横幅を400dp, 縦を267dpに指定すれば改善できます。
android:background
1 2 3 4 5 6 7 |
<ImageButton android:id="@+id/image_button" android:layout_width="400dp" android:layout_height="267dp" android:layout_margin="10dp" android:contentDescription="@string/image_description" android:background="@drawable/image" /> |
android:src
この場合は更にscaleTypeとしてcenterInsideを入れて画像をボタン内に収めるようにします。
1 2 3 4 5 6 7 8 |
<ImageButton android:id="@+id/image_button" android:layout_width="400dp" android:layout_height="267dp" android:scaleType="centerInside" android:layout_margin="10dp" android:contentDescription="@string/image_description" android:src="@drawable/image_large" /> |
srcで画像を指定すると薄いグレーのboundsが画像の周りに見えてしまいます。
これはbackgroundに透明色などを設定すると
android:background=”#0000″
見えなくなります。ただしボタン領域としては残ります。
1 2 3 4 5 6 |
<ImageButton ... android:background="#0000" ... /> |
画像が小さい場合
画像はAndroidのスクリーンサイズよりも小さければ、wrap_contentを使えます。むしろこれを使うケースが多いかもしれません。
1 2 3 4 5 6 |
<ImageButton ... android:layout_width="wrap_content" android:layout_height="wrap_content" ... /> |
次はコードでImageButtonを記述する方法と、Buttonに画像を設定するやり方についてです。