[Kotlin][Android] 안드로이드 - 다중이미지 불러오기

안녕하세요.~

 

이번시간에는 안드로이드 코틀린으로 앨범에서 다중이미지를 불러오는 기능을 만들어보겠습니다.

 

스틱코드 (stickode.com/mainlogin.html)

이번에도 역시 빠르게 만들기 위해 스틱코드 플러그인을 사용해서 만들어보겠습니다.

 

스틱코드는 자주쓰는 코드를 저장해서 쉽고 빠르게 사용할 수 있고,

다른사람들의 코드도 즐겨찾기를 통해 쉽게 내코드로 등록하여 사용할 수 있어 사용하는 사람이 늘어나고, 

좋은 코드가 쌓일수록 강력해지는 플러그인 입니다.

 

그럼 시작하겠습니다.

 

권한설정

AndroidManifest.xml 파일 안에 파일을 불러오기 위한 권한을 추가해줍니다.

이미지 파일을 불러오기위해서 앱의 manifest에 권한 설정을 해주어야 에러가 나지 않습니다.

<!-- 파일에 읽기 퍼미션 설정 -->
    <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

프로젝트 생성

새로운 프로젝트를 생성 했고,

 

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">

    <TextView
        android:id="@+id/textView4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="다중 이미지 가져오기"
        android:textSize="25sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_marginTop="24dp"
        android:layout_marginBottom="16dp"
        android:orientation="vertical"
        app:layout_constraintBottom_toTopOf="@+id/getImage"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView4" />

    <Button
        android:id="@+id/getImage"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="36dp"
        android:text="GET IMAGE"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

 

 

다음으로 리사이클러뷰에서 보여줄 아이템 관련 xml 파일을 작성해보겠습니다.

 

multi_image_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:scaleType="center"
        android:layout_marginHorizontal="5dp"/>


</androidx.constraintlayout.widget.ConstraintLayout>

레이아웃 준비가 완료되었습니다.

 

메인 액티비티 셋팅

스틱코드를 사용하여 이미지를 불러오는 코드를 완성해보겠습니다.

 

스틱코드를 통해 완성된 코드를 확인 할 수 있습니다.

이미지를 선택하고 돌아오는 메소드인 onActivityResult도 만들어보도록 하겠습니다.

다음과 같이 onActivityResult메소드도 바로 완성이된 것을 확인 할 수 있습니다. 

사용하시는 분들은 각자 상황에 맞게 수정해서 사용하시면 됩니다.

이렇게 메인 액티비티 셋팅이 완료되었습니다. 

 

멀티 이미지 어댑터

 

이미지들에 들어갈 리사이클러뷰 어댑터를 만들어보도록 하겠습니다. 

MultiImageAdapter.kt 파일을 만들고, 

 

다시한번 스틱코드를 사용하여 셋팅해보도록 하겠습니다. 

다음과 같이 어댑터 셋팅이 완료되었습니다. 

 

 

이미지는 Glide 라이브러리를 사용하여 넣어주도록 하겠습니다.

Glide란?

이미지를 빠르고 쉽게 가져오는 라이브러리입니다.

 

[참고]

github.com/bumptech/glide

---

먼저, build.gradle 파일 안에 Glide라는 라이브러리를 사용하기 위해 아래 화면처럼 추가합니다.

 

build.gradle -> dependencies 위치 안에 빨간 박스로 표시해둔 곳처럼 추가해주시고 위에 Sync Now 버튼을 누르시면 라이브러리가 적용됩니다.

 

이제 준비가 완료되었습니다. 

 

mainActivity 전문입니다.

package com.example.multiimageactivity

import android.content.Intent
import android.net.Uri
import android.os.Bundle
import android.provider.MediaStore
import android.widget.Button
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import androidx.recyclerview.widget.LinearLayoutManager
import androidx.recyclerview.widget.RecyclerView
import java.net.URI


class MainActivity : AppCompatActivity() {
    // 이미지 데이터 리스트
    var list = ArrayList<Uri>()
    val adapter = MultiImageAdapter(list, this)

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

         // 이미지 불러오기 버튼
        var getImage_btn = findViewById<Button>(R.id.getImage_btn)
        // 리사이클러뷰
        var recyclerview = findViewById<RecyclerView>(R.id.recyclerView)


        getImage_btn.setOnClickListener {
          var intent = Intent(Intent.ACTION_PICK)
          intent.data = MediaStore.Images.Media.EXTERNAL_CONTENT_URI
          intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)
          intent.action = Intent.ACTION_GET_CONTENT

          startActivityForResult(intent, 200)
        }

        val layoutManager = LinearLayoutManager(this)
        recyclerview.layoutManager = layoutManager
        recyclerview.adapter = adapter

    }


    override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) {
        super.onActivityResult(requestCode, resultCode, data)


        if (resultCode == RESULT_OK && requestCode == 200) {
            list.clear()

            if (data?.clipData != null) { // 사진 여러개 선택한 경우
                val count = data.clipData!!.itemCount
                if (count > 10) {
                    Toast.makeText(applicationContext, "사진은 10장까지 선택 가능합니다.", Toast.LENGTH_LONG)
                    return
                }
                for (i in 0 until count) {
                    val imageUri = data.clipData!!.getItemAt(i).uri
                    list.add(imageUri)
                }

            } else { // 단일 선택
                data?.data?.let { uri ->
                    val imageUri : Uri? = data?.data
                    if (imageUri != null) {
                        list.add(imageUri)
                    }
                }
            }
            adapter.notifyDataSetChanged()

        }

    }
}

 

잘 실행되는 것을 보여드리면서 마치도록 하겠습니다.

 

잘동작하네요~

 

이렇게 스틱코드를 사용해 다중이미지를 불러와 리사이클러뷰에 넣어보았습니다.

 

 

이 예제에서 사용된 스틱코드

출처 : stickode.com/detail.html?no=2129 - 코틀린 다중이미지 리사이클러뷰 빨리 적용하기

 

감사합니다.