ImageViewとImageButtonの使い方をまとめました。
作るもの
Activity内にImageView
とImageButton
を配置し、ImageButton
をタップすると
ImageView
の画像が予め用意した画像に変わります。
環境
このコードは以下の環境で書いています。
- macOS 10.14.2(Mojave)
- Android Studio 3.2.1
- Android SDK 28
- gradle 4.6
事前準備
app/src/main/res/drawable 内に pngまたはjpgのファイルを格納します。
今回は「いらすとや」さんから適当な画像を拝借してきました。
レイアウトファイル
デザインタブから「Image View」、「ImageButton」を挿入します。
ImageViewやImageButton挿入時、どの画像を使用するか選択するウィザードが表示されます。
元々入っている画像もあれば、自分で用意した画像を直ぐに利用することも出来ます。
今回はProjects内の適当な画像を選んでみました。
他にもスパナのアイコンなど、新たに用意する必要のない位デフォルトアイコンの種類が豊富なので、最初に画面上部の検索バーから探してみるのも良いかもしれません。
テキストタブでレイアウトやコードの微修正します。
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 30 31 32 |
<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/imgvIcon" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="8dp" android:layout_marginBottom="8dp" android:layout_marginStart="8dp" android:layout_marginEnd="8dp" app:srcCompat="@mipmap/ic_launcher" app:layout_constraintTop_toTopOf="parent" app:layout_constraintBottom_toTopOf="@+id/imgbManage" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" /> <ImageButton android:id="@+id/imgbManage" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="156dp" android:layout_marginStart="8dp" android:layout_marginEnd="8dp" app:srcCompat="@android:drawable/ic_menu_manage" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent"/> </android.support.constraint.ConstraintLayout> |
Activityファイル
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class ImgActivity : AppCompatActivity(){ override fun onCreate(savedInstanceState: Bundle?){ super.onCreate(savedInstanceState) setContentView(R.layout.imgv_imgb_activity) val imgvIcon: ImageView = findViewById(R.id.imgvIcon) //[1] val imgbManage: ImageButton = findViewById(R.id.imgbManage) //[2] //[3] imgbManage.setOnClickListener{ imgvIcon.setImageResource(R.drawable.pose_kyosyu_boy) //[4] } } } |
[1]、[2]
ImageView
クラス、Image Button
クラスを それぞれimgvIcon
、imgbManage
という名前で宣言します。
同時に、レイアウトファイルに用意したウィジェットのIDを引っ張ってきます。
val
は定数。 Javaのfinalと同じ。基本はこっちで宣言するといい。imgvIcon
ImageView型の定数をimgvIcon
という名前で用意するimgbManage
ImageButton型の定数をimgbManage
という名前で用意する
[3]
ImageButtonクラスが持つメソッドsetOnClickListener
を使って、
ボタンがタップされた時の動作を記述しています。
(厳密にはImageButtonクラスの親クラス、更に親クラスのViewクラスが持つメソッド)
この時、imgbManage
(すなわちImageButtonクラス)が
どんなメソッドを持っているかはここで調べられます。
[4]
setImageResource
メソッドを使って、 drawableディレクトリ内に格納した
画像のファイル名をR.drawable
というキーから指定しています。
見ての通り、拡張子は指定しません。
Activityファイル(別の書き方)
Kotlin Android extentionsが有効であれば、以下のような書き方もできます。
valの宣言文がそのまま無くせます。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class imgActivity : AppCompatActivity(){ override fun onCreate(savedInstanceState: Bundle?){ super.onCreate(savedInstanceState) setContentView(R.layout.imgv_imgb_activity) imgbManage.setOnClickListener{ imgvIcon.setImageResource(R.drawable.pose_kyosyu_boy) } } } |
リンク
次の記事
次回はListViewです。
【Android App with Kotlin #3】ListViewを使う
前回の記事
【Android App with Kotlin #1】ボタンウィジェットを使う
/以上
「【Android App with Kotlin #2】画像を取り扱う(ImageView/ImageButton)」への2件のフィードバック