【Android App with Kotlin #2】画像を取り扱う(ImageView/ImageButton)

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内の適当な画像を選んでみました。

他にもスパナのアイコンなど、新たに用意する必要のない位デフォルトアイコンの種類が豊富なので、最初に画面上部の検索バーから探してみるのも良いかもしれません。

テキストタブでレイアウトやコードの微修正します。

<?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>

<?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ファイル

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]
        }
    }
}

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クラス）が
どんなメソッドを持っているかはここで調べられます。

Image Button

[4]

setImageResourceメソッドを使って、　drawableディレクトリ内に格納した
画像のファイル名をR.drawableというキーから指定しています。
見ての通り、拡張子は指定しません。

Activityファイル（別の書き方）

Kotlin Android extentionsが有効であれば、以下のような書き方もできます。

valの宣言文がそのまま無くせます。

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)
        }


    }
}

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】ボタンウィジェットを使う

/以上