Hirauchiホームプロフィールプログラミング作品集お問い合わせ最終更新日:2020/02/14【Kotlin基礎】ImageButtonで画像のボタンを実装する方法を解説KotlinプログラミングKotlinで画像をボタンにする方法が知りたいImageButtonの画像がうまく表示されない。こんな悩みを抱えている方、いらっしゃいませんか?Kotlinには、ImageButtonという画像のボタンを実装するViewがあります。本記事では、ImageButtonの実装方法や、画像がうまく表示されない場合の対処法などを、サンプルコードを交え、わかりやすく解説しております。目次1.ImageButtonで画像のボタンを実装する方法1-1.xmlでImageButtonを実装する1-2.コードで動的にImageButtonを実装する2.画像の設定方法の違いについて2-1.srcによる画像設定2-2.backgroundによる画像設定3.まとめImageButtonで画像のボタンを実装する方法Kotlinで画像のボタンを実装するには、ImageButtonというViewを使用します。DevelopersImageButtonを実装するには、xmlで実装する方法と、コードで動的に実装する方法があります。xmlでImageButtonを実装するまずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。“soccer_ball”という画像をdrawableフォルダに保存していることを前提としております。/><ImageButton/>タグで、ImageButtonを実装します。画像を指定するには、android:srcを使用します。@drawable/はdrawableフォルダを示しております。表示結果を見ると、画像の背景がグレーで、画像の周りに隙間ができております。これは、ImageButtonのデフォルトの背景が適応されているからです。背景は、android:backgroundで変更することができます。/>Point<ImageButton/>タグで、ImageButtonを実装する画像を指定するには、android:srcを使用するコードで動的にImageButtonを実装する続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。findViewById<LinearLayout>(R.id.container)linearLayout.addView(imageButton)ImageButton()で、ImageButtonのインスタンスを生成しております。画像を指定するには、setImageResource()を使用します。引数には、画像のIDを指定します。背景色を指定するには、setBackgroundColor()を使用します。引数には、色のIDを指定します。最後に、親レイアウトのlinearLayoutに対し、addView()でImageButtonを追加しております。Pointコードで実装するには、ImageButton()でインスタンスを生成した後、addView()で追加するコードで画像を指定するには、setImageResource()を使用するコードで背景を指定するには、setBackgroundColor()を使用するなお、クリックイベントの実装や、クリックイベントの有効・無効の切り替えなどは、Buttonと同様の方法で設定できます。Buttonについて詳しくまとめた記事もございますので、合わせてご覧いただけると幸いです。【Kotlin基礎】Buttonでボタンを実装する方法を解説Kotlinには、Buttonというボタンを実装するViewがあります。本記事では、Buttonの実装方法やボタンにクリックイベントを実装する方法を、サンプルコードを交え、わかりやすく解説しております。画像の設定方法の違いについてこれまで紹介したサンプルコードでは、画像の設定にsrcを使用しておりました。実は、ImageButtonの画像は、backgroundでも設定することができます。この章では、srcによる設定と、backgroundによる設定の違いや、それぞれの注意点について解説致します。srcによる画像設定まずはsrcによる画像設定についてです。以下のサンプルコードをご覧ください。android:text="テキストです。android:text="テキストです。/>ImageButtonとTextViewを交互に表示させるサンプルコードです。注目していただきたいのは、ImageButtonのサイズです。横幅、縦幅ともにwrap_contentが設定されております。ImageButtonは画像の大きさに合わせたサイズになります。このサンプルコードのImageButtonのサイズを変更するとどうなるでしょうか。1つは画像よりも大きく、もう1つは画像よりも小さく設定してみます。android:text="テキストです。android:text="テキストです。/>ImageButtonのサイズを大きくした場合は、ImageButtonの中央に画像が表示されました。ImageButtonのサイズを小さくした場合は、画像が切れて表示されました。ImageButtonのサイズに合わせ、画像の比率を保ったまま画像を表示させるには、scaleTypeを設定する必要があります。scaleTypeにfitCenterを指定すると、画像がImageButtonのサイズに合わせていい感じに表示されます。android:text="テキストです。android:text="テキストです。続いてbackgroundによる画像設定についてです。先ほどのsrc同様、ImageButtonとTextViewを交互に表示させるサンプルコードを用意しました。android:text="テキストです。android:text="テキストです。/>ImageButtonのサイズを変更してみます。android:text="テキストです。android:text="テキストです。/>今度は、ImageButtonのサイズに合わせて、画像の比率が変わって表示されました。android:text="テキストです。android:text="テキストです。/>何も変化はありませんね。このように、背景として画像を設定した場合、あくまで画像は背景なので、ImageButtonのサイズに合わせるように、比率を変えて表示されてしまいます。ImageButtonの比率と画像の比率が異なる場合は、backgroundではなく、srcによる指定が必要となります。Pointbackgroundで画像を設定する場合、scaleTypeは効かず、ImageButtonのサイズに合わせ、比率を変えて表示されるまとめxmlでImageButtonを実装するには、<ImageButton/>タグを使用するxmlで画像を指定するには、android:srcを使用するコードでImageButtonを実装するには、ImageButton()でインスタンスを生成した後、addView()で追加するコードで画像を指定するには、setImageResource()を使用するコードで背景色を指定するには、setBackgroundColor()を使用するsrcで画像を設定する場合、scaleTypeで画像の表示方法を設定できるbackgroundで画像を設定する場合、scaleTypeは効かず、ImageButtonのサイズに合わせ、比率を変えて表示されるTweet元太こんにちは、元太と申します。フリーランスのプログラマーとして、スマホアプリの開発をしております。現在は客先へ常駐で働いており、仕事以外の時間で、個人でアプリを開発したり、ブログの執筆等を行っております。子どもいっぱいの大家族を夢見る30歳です。