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

이번 시간에는 한 장이 아닌 여러 장의 사진을 선택해서 RecyclerView에 보여주는 방법을 알아보겠습니다.

이전 프로젝트에 추가하니 이전 포스팅을 먼저 보시면 됩니다.

2022.10.11 - [안드로이드] - [안드로이드 코틀린] 갤러리에서 선택한 사진 이미지 뷰(ImageView)에 보여주는 방법

[안드로이드 코틀린] 갤러리에서 선택한 사진 이미지뷰(ImageView)에 보여주는 방법

---

목차

1. 실행 화면
2. 아이템 화면 item_layout.xml
3. 아이템 어댑터 GalleryAdapter.kt
4. 메인 화면 activity_main.xml
5. 메인 코드 MainActivity.kt

---

1. 실행 화면

 

2. 아이템 화면 item_layout.xml

- 설명 -

 1. 아이템 보여주는 Layout

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

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_marginHorizontal="30dp"
    android:layout_marginVertical="30dp">

    <ImageView
        android:id="@+id/galleryView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

 

3. 아이템 어댑터 GalleryAdapter.kt

- 설명 -

 1. 아이템 화면과 데이터를 연결해주는 Adapter

 2. constructor(imageList: ArrayList<Uri>, context: Context)

   생성자

   메인에서 데이터(imageList)와 Context를 받아온다. 

 3. onCreateViewHolder

   화면 설정 함수

 4. onBindViewHolder

   데이터 설정 함수

   Glide로 이미지를 보여준다.

class GalleryAdapter(): RecyclerView.Adapter<GalleryAdapter.ViewHolder>(){

    lateinit var imageList: ArrayList<Uri>
    lateinit var context: Context

    /**
     * 생성자
     */
    constructor(imageList: ArrayList<Uri>, context: Context): this(){

        this.imageList = imageList
        this.context = context
    }

    /**
     * 화면 설정
     */
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

        val inflater: LayoutInflater = LayoutInflater.from(parent.context)

        val view: View = inflater.inflate(R.layout.item_layout, parent, false)

        return ViewHolder(view)
    }

    /**
     * 데이터 설정
     */
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {

        Glide.with(context)
            .load(imageList[position]) //이미지 위치
            .into(holder.galleryView)//보여줄 위치
    }

    /**
     * 아이템 갯수
     */
    override fun getItemCount(): Int {

        return imageList.size
    }


    class ViewHolder(view: View): RecyclerView.ViewHolder(view){

        val galleryView: ImageView = view.findViewById(R.id.galleryView)
    }
}

 

4. 메인 화면 activity_main.xml

- 설명 -

 1. 갤러리 보여주는 Button

 2. 다중 선택한 이미지 보여줄 RecyclerView

<?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:orientation="vertical"
    tools:context=".MainActivity">

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


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

5. 메인 코드 MainActivity.kt

- 설명 -

 1. intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)

   intent 속성에 다중 선택 옵션 추가

 2. it.data!!.clipData

   다중 선택 이미지는 clipData로 받아 온다.

 3. it.data!!.clipData!!.getItemAt(index).uri

   선택한 이미지를 순서대로 가져온다. 

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    lateinit var galleryAdapter: GalleryAdapter

    var imageList: ArrayList<Uri> = ArrayList()

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

        //adapter 초기화
        galleryAdapter = GalleryAdapter(imageList, this)

        //recyclerView 설정
        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        binding.recyclerView.adapter = galleryAdapter

        //버튼 이벤트
        binding.galleryBtn.setOnClickListener {

            //갤러리 호출
            val intent = Intent(Intent.ACTION_PICK)
            intent.type = "image/*"
            //멀티 선택 기능
            intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)
            activityResult.launch(intent)
        }
    }//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)
                    }
                }else{ //싱글 이미지
                    val imageUri = it.data!!.data
                        imageList.add(imageUri!!)
                }
                galleryAdapter.notifyDataSetChanged()
            }
        }
}

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

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

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

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

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