Android: ImageButton

개요

<Button> 태그로 만들어지는 버튼은 그냥 보기에 다소 투박해 보입니다..

멋있게 커스텀된 버튼을 사용하기 위해서는 버튼을 이미지로 제작하여 그 이미지를 버튼화할 수 있습니다.

이 때 사용하는 것이 <ImageButton>입니다.

activity_main.xml에 이미지 버튼 넣기

이미지버튼을 다음과 같이 넣어줍니다.

이 때, <ImageButton>의 app:srcCompat 속성에 이미지의 경로가 들어갑니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">
    <TextView
            android:id="@+id/textView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Hello World!"
            android:textSize="35sp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.283"
    />
    <ImageButton
            android:id="@+id/imageButton"
            app:srcCompat="@drawable/button"
            android:layout_width="362dp"
            android:layout_height="148dp"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.489"
            app:layout_constraintVertical_bias="0.622"/>

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity에서 이벤트 추가하기

버튼 클릭시 이벤트를 추가해주겠습니다.

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.ImageButton
import android.widget.TextView
import androidx.appcompat.app.AlertDialog

class MainActivity : AppCompatActivity(), View.OnClickListener {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val imgBtn = findViewById<ImageButton>(R.id.imageButton)

우선 이미지 버튼을 findViewById로 불러옵니다.

        // xml에 onClick을 쓰지 않아도 됨
        imgBtn.setOnClickListener(this)

    }

기존에는 xml에서 onClick을 추가해주었지만 여기에서는 setOnClickListener를 사용하여 xml에 onClick을 쓰지 않고 여기에서 바로 사용할 수 있게 해주었습니다.

이 때 온클릭 이벤트는 이미지 버튼의 이벤트이므로 this를 매개변수로 주었습니다.

    override fun onClick(v: View?) {
        val textView = findViewById<TextView>(R.id.textView)

        when(v?.id) {
            R.id.imageButton -> {
                val builder = AlertDialog.Builder(this)
                builder.setTitle("button is clicked")
                builder.setMessage("Image Button Clicked!!")
                builder.show()
                textView.text = "Image Button Clicked!!!"
            }
        }

    }
}

View.OnClickListener를 상속받아 onClick을 오버라이드 하였습니다.

뷰의 아이디가 이미지 버튼일 때 AlertDialog를 띄워줍니다.

또한 텍스트뷰의 내용도 바꿔줍니다.