[안드로이드 코틀린] 갤러리에서 다중 선택 사진 화면 전환 하는 방법

이번 시간에는 갤러리에서 가져온 여러 장의 사진을 을 앞 뒤로 넘겨서 보는 방법을 알아보겠습니다.

이전 프로젝트를 수정해서 만들게 되니 이전 포스팅을 먼저 보시면 됩니다.

2022.10.12 - [안드로이드] - [안드로이드 코틀린] 갤러리에서 다중 선택 사진 RecycelrView 에 보여주는 방법

[안드로이드 코틀린] 갤러리에서 다중 선택 사진 RecycelrView 에 보여주는 방법

---

목차

1. 실행 화면
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 메인 화면 activity_main.xml

- 설명 -

 1. 현재 이미지 위치 보여주는 TextView

 2. 선택한 사진 보여주는 ImageView

 3. 이전 이미지 보여주는 Button

 4. 다음 이미지 보여주는 Button

 5.  갤러리 보여주는 Button

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

    <TextView
        android:id="@+id/positionText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_below="@id/positionText"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageView">

        <Button
            android:id="@+id/backBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_marginStart="10dp"
            android:text="이전"
            android:textSize="20sp"/>

        <Button
            android:id="@+id/nextBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="10dp"
            android:text="다음"
            android:textSize="20sp"/>
    </RelativeLayout>

    <Button
        android:id="@+id/galleryBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="사진첩 열기"
        android:textSize="20sp" />


</RelativeLayout>

3. 메인 코드 MainActivity.kt

- 설명 -

 1. var position = 0

   이미지 위치 

 2. showPosition(position: String)

   현재 위치 텍스트뷰에 보여주는 함수

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    var imageList: ArrayList<Uri> = ArrayList()

    var position = 0 //이미지 현재 위치

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //사진첩 호출 버튼 이벤트
        binding.galleryBtn.setOnClickListener {

            //갤러리 호출
            val intent = Intent(Intent.ACTION_PICK)
            intent.type = "image/*"
            //멀티 선택 기능
            intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)
            activityResult.launch(intent)
        }
        //이전 버튼 이벤트
        binding.backBtn.setOnClickListener {

            if(position > 0){
                position--
                //이미지 보여주기
                binding.imageView.setImageURI(imageList[position])
                // 현재 위치 보여주기
                showPosition(position.toString())
            }else{
                Toast.makeText(this, "첫 이미지 입니다.", Toast.LENGTH_SHORT).show()
            }
        }

        //다음 버튼 이벤트
        binding.nextBtn.setOnClickListener {
            if(position < imageList.size-1){
                position++
                //이미지 보여주기
                binding.imageView.setImageURI(imageList[position])
                // 현재 위치 보여주기
                showPosition(position.toString())
            }else{
                Toast.makeText(this, "마지막 이미지 입니다.", Toast.LENGTH_SHORT).show()
            }
        }

    }//onCreate

    //결과 가져오기
    private val activityResult: ActivityResultLauncher<Intent> = registerForActivityResult(
        ActivityResultContracts.StartActivityForResult()){

        //결과 코드 OK , 결가값 null 아니면
        if(it.resultCode == RESULT_OK){

            //멀티 선택은 clipData
            if(it.data!!.clipData != null){ //멀티 이미지

                //선택한 이미지 갯수
                val count = it.data!!.clipData!!.itemCount

                for(index in 0 until count){
                    //이미지 담기
                    val imageUri = it.data!!.clipData!!.getItemAt(index).uri
                    //이미지 추가
                    imageList.add(imageUri)

                    //첫 번째 이미지로 보여준다.
                    binding.imageView.setImageURI(imageList[0])
                    position = 0
                    showPosition(position.toString())
                }
            }else{ //싱글 이미지
                val imageUri = it.data!!.data
                binding.imageView.setImageURI(imageUri)
                position = 0
                showPosition(position.toString())
            }
        }
    }

    /**
     * 현재 위치 보여주는 함수
     */
    private fun showPosition(position: String){
        binding.positionText.text = position
    }
}

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법