[Kotlin][Android] 이미지 확대, 축소 기능 만들기

스틱코드를 사용하여 이미지를 확대하거나, 축소하는 기능을 만들어 보겠습니다.

 

---

먼저 예제에 사용할 화면을 만들어보겠습니다.

 

 

<activity_main.xml>

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

---

다음 예제에 사용할 코드를 작성하겠습니다.

 

<MainActivity.kt>

 

1. 예제에 사용할 변수 생성

 

아래 사진을 보시면 에러가 발생하고 있는데 이 부분은 다음 코드를 추가하면 해결 됩니다.

 

 

 

import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity

import android.view.ScaleGestureDetector


class MainActivity : AppCompatActivity() {

    // 제스처 이벤트 감지하는 변수
    private var mScaleGestureDetector: ScaleGestureDetector? = null
    private var scaleFactor = 1.0f
    private lateinit var mImageView: ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mImageView= findViewById(R.id.imageView);

        mScaleGestureDetector = ScaleGestureDetector(this, ScaleListener())
    }
}

 

2. 이미지 확대 / 축소 기능 생성

 

이미지 확대/ 축소 기능을 만들기 위해 이벤트를 추가합니다.

 

스틱코드를 활용한다면, 클래스에서 'zo' 까지만 작성했을 때 '이미지 확대/축소 기능 생성' 이벤트가 나타납니다.

 

 

'이미지 확대/축소 기능 생성' 이벤트를 누를 경우 코드가 자동으로 완성됩니다.

 

코드들이 생기면서 에러가 사라지는 것을 확인할 수 있습니다.

 

 

 

<최종코드>

import android.view.MotionEvent
import android.os.Bundle
import android.widget.ImageView
import androidx.appcompat.app.AppCompatActivity
import android.view.ScaleGestureDetector


class MainActivity : AppCompatActivity() {

    // 제스처 이벤트 감지하는 변수
    private var mScaleGestureDetector: ScaleGestureDetector? = null
    private var scaleFactor = 1.0f
    private lateinit var mImageView: ImageView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mImageView= findViewById(R.id.imageView);

        mScaleGestureDetector = ScaleGestureDetector(this, ScaleListener())
    }

    // 제스처 이벤트가 발생하면 실행되는 메소드
    override fun onTouchEvent(motionEvent: MotionEvent?): Boolean {

        // 제스처 이벤트를 처리하는 메소드를 호출
        mScaleGestureDetector!!.onTouchEvent(motionEvent)
        return true
    }

    // 제스처 이벤트를 처리하는 클래스
    inner class ScaleListener : ScaleGestureDetector.SimpleOnScaleGestureListener() {
        override fun onScale(scaleGestureDetector: ScaleGestureDetector): Boolean {

            scaleFactor *= scaleGestureDetector.scaleFactor

            // 최소 0.5, 최대 2배
            scaleFactor = Math.max(0.5f, Math.min(scaleFactor, 2.0f))

            // 이미지에 적용
            mImageView.scaleX = scaleFactor
            mImageView.scaleY = scaleFactor
            return true
        }
    }
}

 

---

프로젝트를 실행하면 아래 사진과 같이 이미지 축소/ 확대가 되는 것을 확인하실 수 있습니다.

 

 

참고한 스틱코드

이미지 확대 / 축소 기능 만들기 -

stickode.com/detail.html?no=2183