Android Kotlin Image Full Screen - 이미지 클릭 시 확대

 

 

---

1. 결 과

결 과

 

# 이 글은 Image 클릭 시 전체 화면으로 전환하여 볼 수 있는 방법을 기술한다. 이를 위해서 makeSceneTransitionAnimation를 사용한다.

 

 

 

 

 

 

 

---

2. Main Activity

---

2-1. activity_main.xml (Layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    android:gravity="bottom"
    android:padding="5dp"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/main_image01"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:transitionName="imgTrans"
        android:src="@drawable/img01"/>

    <ImageView
        android:id="@+id/main_image02"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:transitionName="imgTrans"
        android:src="@drawable/img02"/>

    <ImageView
        android:id="@+id/main_image03"
        android:layout_width="150dp"
        android:layout_height="150dp"
        android:transitionName="imgTrans"
        android:src="@drawable/img03"/>

</LinearLayout>

 

# 레이아웃은 ImageView 3개를 넣어 임의의 이미지를 보여주도록 구성.

 

 

 

2-2. MainActivity.kt

package com.example.imagefullscreen

import android.app.ActivityOptions
import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        main_image01.setOnClickListener { clickEvent(it,1) }
        main_image02.setOnClickListener { clickEvent(it,2) }
        main_image03.setOnClickListener { clickEvent(it,3) }
    }

    private fun clickEvent(view: View, pos: Int) {
        val intent = Intent(this, ImageActivity::class.java)
        intent.putExtra("pos", pos)
        val opt = ActivityOptions.makeSceneTransitionAnimation(this, view, "imgTrans")
        startActivity(intent, opt.toBundle())
    }

}

 

# clickEvent 함수를 정의해주며 3개의 각 ImageView 클릭 시 실행되도록 구성.

 

# intent는 엑티비티 전환 하는 방식과 동일하게 사용

 

# opt는 ActivityOptions.makeSceneTransitionAnimation 값으로 파라미터로 (Activit!, View!, String!)값을 갖음

 

# 3번 째 String 값은 layout의 ImageView의 추가된 transitionName 값으로 이는 전환 될 Activity의 ImageView에도 똑같이 설정

 

 

 

---

3. Image Activity

---

3-1. activity_image.xml (Layout)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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=".ImageActivity">

    <ImageView
        android:id="@+id/image_full"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:transitionName="imgTrans"
        />

</LinearLayout>

 

# ImageView 1개로 구성되며 이는 Main Activity에서 ImageView 클릭 시 전환되어 보여줄 화면

 

# Main Activity의 ImageView와 마찬가지로 transitionName 값을 imgTrans로 동일한 값을 갖음

 

 

 

3-2. ImageActivity.kt

package com.example.imagefullscreen

import android.app.ActivityOptions
import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_image.*

class ImageActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_image)

        val img = when(intent.getIntExtra("pos", 1)) {
            1 -> R.drawable.img01
            2 -> R.drawable.img02
            else -> R.drawable.img03
        }
        image_full.setImageResource(img)

        image_full.setOnClickListener {
            supportFinishAfterTransition()
        }
    }
}

 

# intent로 넘어온 pos값을 사용하여 보여줄 Image를 지정해주며 클릭 시 본래 Finish() 역할을 하는 supportFinishAfterTransition()을 사용하여 마찬가지로 애니메이션을 주며 원래 엑티비티로 돌아감.

 

 

 

 

---

4. 전체 코드

애니메이션으로 활동 시작  |  Android 개발자  |  Android Developers

 

GitHub - Notepad96/BlogExample