[안드로이드 코틀린] 10. 실전프로젝트(3) - 전자액자

실전 프로젝트

실습 - 전자 액자

주요구성

- 프래그먼트라는 UI 조각으로 구성하고 프래그먼트들을 좌우로 슬라이드 할 수 있도록 뷰페이저ViewPager를 사용

- 사진이미지 로딩에 Glide 라이브러리를 사용

- timer를 사용하여 자동으로 슬라이드 되게 함

 

1. 프로바이더 사용

콘텐츠 프로바이더

- 앱의 데이터 접근을 다른 앱에 허용하는 컴포넌트

- 프로바이더를 이용하여 사진 정보를 가지고 오는 순서

① 사진 데이터는 외부 저장소에 저장되어 있으므로 외부 저장소 읽기 권한을 앱에 부여

② 외부 저장소 읽기 권한은 위험 권한으로 실행 중에 사용자에게 권한을 허용하도록 함

③ contentResolver 객체를 이용하여 데이터를 Cursor 객체로 가지고 옴

안드로이드 4대 컴포넌트 - 액티비티: 화면을 구성 - 콘텐츠 프로바이더: 데이터베이스, 파일, 네트워크의 데이터를 다른 앱에 공유 - 브로드캐스트 리시버: 앱이나 기기가 발송하는 방송을 수신함 - 서비스: 화면이 없고 백그라운드 작업에 용이

 

스마트폰의 사진 경로 찾기

외부 저장소에 저장된 모든 사진을 최신순으로 정렬하여 Cursor객체에 연결

① 첫 번째 인자 : 어떤 데이터를 가져오느냐를 URI 형태로 지정

② 두 번째 인자 : 어떤 항목의 데이터를 가져올 것인지 String 배열로 지정

③ 세 번째 인자 : 데이터를 가져올 조건을 지정. 전체 데이터는 null로 설정

④ 네 번째 인자 : 세 번째 인자에 추가 조건을 지정, 사용하지 않는다면 null로 설정

⑤ 다섯 번째 인자 : 정렬 방법을 지정, 사진이 찍힌 날짜의 내림차순 정렬

// 모든 사진 정보 가져오기
val cursor = contentResolver.query(MediaStore.Images.Media.EXTERNAL_CONTENT_URIm	//①
    null,	// ② 가져올 항목 배열
    null,	// ③ 조건
    null,	// ④ 조건
    MediaStore.Images.ImageColumns.DATE_TAKEN + "DESC")	// ⑤ 촬영 날짜 내림차순

※ 앱 실행하면 앱이 종료되면서 에러가 뜸 → 로그캣 창에 표시 (→ 외부 저장소의 데이터를 읽으려 했는데 권한이 없다는 에러 발생)

 

매니페스트에 외부 저장소 읽기 권한 추가

- AndroidManifest.xml 파일을 열고 READ_EXTERNAL_STORAGE 외부 저장소 읽기 권한을 앱에 추가

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
    
    <application
        ...
    </application>

</manifest>

권한 그룹	권한
STORAGE	- READ_EXTERNAL_STORAGE - WRITE_EXTERNAL_STORAGE
LOCATION	- ACCESS_FINE_LOCATION - ACCESS_COARSE_LOCATION
SMS	- SEND_SMS - RECEIVE_SMS
CAMERA	- CAMERA

 

권한 추가

- 실행 중에 위험 권한이 필요한 작업을 수행할 때마다 권한이 있는지 확인해야 함

- 앱이 외부 저장소 읽기 권한이 있는지 확인하는 코드

API 33 이상부터 READ_EXTERNAL_STORAGE 권한이 “READ_MEDIA_IMAGES”, ”READ_MEDIA_VIDEO”, ”READ_MEDIA_AUDIO”로 세분화 됨

→ 사진을 사용하려면 해당이름의 권한으로 권한 체크 및 권한요청을 진행해야 함

// 권한이 부여되었는지 확인
if (ContextCompat.checkSelfPermission(this, readIMagePermission) != PackageManager.PERMISSION_GRANTED)

    - Compat Class : 매년 새로 발표되는 SDK의 API 버전별 차이의 호환성 지원

    - ContextCompat : 앱과 앱 저장소 사이에 데이터 접근 지원

- Manifest 클래스는 여러 패키지에 존재하는데 코드 작성 중 어느 것을 임포트할지 물어보면 android를 임포트함

 

권한 요청(MainActivity.kt)

① 앱에 권한이 부여 여부 확인

② shoudShowRequestPermissionRationale( ) : 이전에 권한 요청을 거부 여부 반환

③권한 부여를 거부했다면 권한이 왜 필요한지에 대해서 메시지를 표시하고 다시 권한을 요청

④ 권한이 부여되지 않았다면 requestPermissions( ) 메서드를 사용하여 권한 요청

⑤ 권한 허용시에는 이미지 읽어 오기 수행

class MainActivity : AppCompatActivity() {

    private val REQUEST_READ_EXTERNAL_STORAGE = 1000

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

        val readIMagePermission = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) Manifest.permission.READ_MEDIA_IMAGES
            else Manifest.permission.READ_EXTERNAL_STORAGE

        // 권한이 부여되었는지 확인
        if (ContextCompat.checkSelfPermission(this, readIMagePermission) != PackageManager.PERMISSION_GRANTED)

            // 권한이 허용되지 않음
            if(ActivityCompat.shouldShowRequestPermissionRationale(this, readIMagePermission)){
                // 이전에 권한 거부한 적 있으면 설명(경고)
                var dlg = AlertDialog.Builder(this)
                dlg.setTitle("권한이 필요한 이유")
                dlg.setMessage("사진 정보를 얻기 위해서는 외부 저장소 권한이 필수로 필요합니다.")
                dlg.setPositiveButton("확인"){dialog, which-> ActivityCompat.requestPermissions(this@MainActivity,
                                    arrayOf(readIMagePermission), REQUEST_READ_EXTERNAL_STORAGE)}
                dlg.setNegativeButton("취소", null)
                dlg.show()
            } else{
                // 처음 권한 요청
                ActivityCompat.requestPermissions(this@MainActivity,
                    arrayOf(readIMagePermission), REQUEST_READ_EXTERNAL_STORAGE)
            } else{
                // 권한이 이미 제대로 허용됨
                getAllPhotos()
        }
    }

 

사용권한 요청 응답 처리

- 사용자가 권한을 요청하면 시스템은 onRequestPermissionsResult ( ) 메서드를 호출하고 사용자의 응답을 전달

- 응답 결과를 확인하여 사진 정보를 가져오거나 권한이 거부됐다는 토스트 메시지를 표시하는 코드를 다음과 같이 작성

private fun getAllPhotos(){
    ...
    if(cursor != null){
        while(cursor.moveToNext()){
            // 사진 경로 Uri 가져오기
            val uri = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA))
            Log.d("MainActivity", uri)
        }
        cursor.close()
    }
}

 

- Device File Explorer 클릭 > sdcard > Pictures 우클릭 > Upload 클릭해서 이미지 추가 > Synchronize

- AVD 재시작 필요 (사진 앱에 이미지 안들어가 있기 때문에)

 

2. 전자액자 구현하기

프래그먼트(Fragment): 사용자 인터페이스의 모음

 

프래그먼트의 개념

- 프래그먼트에 표시할 뷰를 레이아웃 파일로부터 읽어오는 부분은 ② onCreateView( ) 메서드이며 액티비티의 onCreate( )와 동일

- ① onCreate( ) 메서드는 프래그먼트를 생성할 때 인자가 함께 넘어온다면 주로 ① onCreate( ) 메서드에서 받아서 변수에 담음.

- ② onCreateView( ) 메서드에서 완성된 레이아웃 뷰는 생명주기에는 포함되지 않는 ③ onViewCreated( ) 메서드로 전달되며 이쪽에서 뷰가 완성된 이후에 이벤트 처리 등을 수행

 

프래그먼트 생성

- 프로젝트 창에서 패키지를 클릭 후 우클릭 또는 안드로이드 스튜디오 상단 메뉴에서 File → New → Fragment → Fragment (Blank)를 클릭

 

프래그먼트의 레이아웃 수정

레이아웃을 ConstraintLayout으로 변경하고 이미지 뷰를 화면에 꽉 채우도록 설정

 

Glide 라이브러리 : 빠르고 효율적으로 이미지 처리

- 이미지, Gif, 비디오 스틸 로딩과 디코딩, 캐싱 등의 API 지원

- 다양한 종류의 이미지를 빠르고 부드러운 스크롤 지원

 

Glide 사용을 위해서는 의존성 및 권한 설정 필요

- 방법1) Gradle 추가 (직접 코드 타이핑)

    - Sync Now 수행

 

- 매니페스트 추가(원격 이미지 쓸 경우, 권한 필요) (// 인터넷을 통해 이미지 가져옴)

 

뷰에 로드하는 방법

- .with(업로드할 이미지 띄울 곳), .load(업로드 이미지 uri), .into(보여줄 위젯)

 

방법2) Glide 라이브러리 사용 준비

- 직접 build.gradle 파일을 수정하지 않고 안드로이드 스튜디오의 메뉴 활용

- 상단 메뉴 중 File → Project Structure를 클릭

 

프래그먼트에 사진 표시하기

① 클래스 선언 밖에 const 키워드를 사용하여 상수로 정의

② newInstance( ) 메서드를 이용하여 프래그먼트를 생성할 수 있고 인자로 uri값을 전달 

③ 프래그먼트가 생성되면 onCreate( ) 메서드가 호출되고 ARG_URI 키에 저장된 uri값을 변수에 저장 

④ onCreateView( ) 메서드에서는 프래그먼트에 표시될 뷰를 생성

⑤ Glide.with (this)로 사용 준비를 하고 load ( )에 uri값을 인자로 주고 이미지 로딩

⑥ into( ) 메서드로 imageView에 표시

package com.example.mygallery

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import com.bumptech.glide.Glide

// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private const val ARG_URI = "uri"

/**
 * A simple [Fragment] subclass.
 * Use the [PhotoFragment.newInstance] factory method to
 * create an instance of this fragment.
 */
class PhotoFragment : Fragment() {
    // TODO: Rename and change types of parameters
    private var uri: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            uri = it.getString(ARG_URI)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_photo, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        var imageView : ImageView = view.findViewById(R.id.imageView)
        Glide.with(this).load(uri).into(imageView)      // 그림 출력
    }

    companion object {
        /**
         * Use this factory method to create a new instance of
         * this fragment using the provided parameters.
         *
         * @param param1 Parameter 1.
         * @param param2 Parameter 2.
         * @return A new instance of fragment PhotoFragment.
         */
        // TODO: Rename and change types and number of parameters
        @JvmStatic
        fun newInstance(uri: String) =
            PhotoFragment().apply {
                arguments = Bundle().apply {
                    putString(ARG_URI, uri)
                }
            }
    }
}

 

액티비티에 ViewPager 추가

- 뷰페이저 : 여러 프래그먼트들을 좌우로 슬라이드하는 뷰

 

PagerAdapter 작성

- ViewPager에 표시할 내용을 정의하려면 어댑터가 필요

- 프래그먼트를 아이템으로 가지면서 ViewPager에 설정하는 어댑터는 다음 두 가지

    - FragmentPAgerAdapter: 페이지 내용이 영구적일 때 적합. 한 번 로딩한 페이지는 메모리에 보관하기 때문에 빨름. 페이지가 많으면 많은 메모리를 사용

    - FragmentStatePagerAdapter: 많은 수의 페이지가 있을 때 적합. 보이지 않는 페이지를 메모리에서 제거할 수 있음. 상대적으로 적은 메모리를 차지

 

FragmentStatePagerAdapter 사용

- MainActivity 우클릭 → new → Kotlin File/Class (또는 안드로이드 스튜디오 상단 메뉴의 File → New → Kotlin File/Class를 클릭)

① MyPagerAdapter.kt 파일이 열리면 FragmentStatePagerAdapter 클래스를 상속받음

② 슈퍼 클래스의 생성자를 추가하는 Add constructor parameters from FragmentStatePagerAdapter(FragmentManager!)를 클릭

③ 생성자 파라미터가 추가되고 다시 빨간 줄이 표시되는 클래스 이름에 커서를 두고

미구현된 멤버를 구현하는 Implement members를 클릭

④ 'Ctrl + A' 를 클릭하여 모든 메서드를 선택하고 OK를 클릭

⑤ 자동으로 생성된 코드를 다음과 같이 수정함

⑥ 어댑터가 프래그먼트의 목록을 리스트로 가지도록 함

⑦ 이 목록은 update Fragments( ) 메서드를 사용해 외부에서 추가할 수 있음 (사용자가 직접 작성)

⑧ getItem ( ) : position 위치에 어떤 프래그먼트를 표시할지를 정의

⑨ getCount( ) : 아이템프래그먼트 개수를 정의

package com.example.mygallery

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter
import androidx.viewpager2.adapter.FragmentStateAdapter

class MyPagerAdapter(fragment: FragmentManager) : FragmentStatePagerAdapter(fragment) {

    private val items = ArrayList<Fragment>()

    // position 위치의 프래그먼트
    override fun getItem(position: Int): Fragment {
        return items[position]
    }

    // 프래그먼트의 갯수
    override fun getCount(): Int {
        return items.size
    }
    
    // 아이템 갱신
    fun updateFragments(items : List<Fragment>){
        this.items.addAll(items)
    }
}

 

전자액자 완성

- getAllPhotos ( ) 메서드 수정

① 프래그먼트를 아이템으로 하는 ArrayList 를 생성 

② 사진을 Cursor객체에서 가져올 때 PhotoFragment.newInstance (uri)로 프래그먼트를 생성하면서 fragments 리스트에 추가

③ MyPagerAdapter 를 생성하면서 프래그먼트 매니저를 생성자의 인자로 전달

④ 앱을 실행했을 때 사진이 표시되고 좌우로 슬라이드 했을 때 다음 사진으로 넘어가면 성공

class MainActivity : AppCompatActivity() {

    private val REQUEST_READ_EXTERNAL_STORAGE = 1000
    lateinit var viewPager: ViewPager

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

        viewPager = findViewById(R.id.viewPager)

       
       ...


    }

    private fun getAllPhotos(){
        // 모든 사진 정보 가져오기
        ...
        
        val fragments = ArrayList<Fragment>()	// 1

        if(cursor != null){
            while(cursor.moveToNext()){
                // 사진 경로 Uri 가져오기
                val uri = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA))
                Log.d("MainActivity", uri)
                fragments.add(PhotoFragment.newInstance(uri))		// 2
            }
            cursor.close()
        }

        // 어댑터 3
        val adapter = MyPagerAdapter(supportFragmentManager)
        adapter.updateFragments(fragments)
        viewPager.adapter = adapter
    }
}

 

// MyPagerAdapter.kt 코드 수정
class MyPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT)

 

3. 슬라이드쇼 수행하기

getAllPhotos ( ) 메서드의 마지막에 다음 코드를 추가

① 3초마다 실행되는 타이머를 생성 : 3초마다 페이지를 전환하는 UI 변경 실행 (timer 사용)

② Timer가 백그라운드 스레드로 동작해 UI를 변경은 runOnUiThread 수행 

③ 현재 페이지가 마지막 페이지가 아니라면 다음 페이지로 변경하고, 마지막 페이지라면 첫 페이지로 변경

 

class MainActivity : AppCompatActivity() {

    ...

        // 3초마다 자동으로 슬라이드
        timer(period = 3000){
            runOnUiThread {
                if(viewPager.currentItem < adapter.count-1){
                    viewPager.currentItem++
                } else{
                    viewPager.currentItem = 0
                }
            }
        }
    }
}

 

최종

MainActivity.kt

package com.example.mygallery

import android.Manifest
import android.app.AlertDialog
import android.content.pm.PackageManager
import android.os.Build
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.provider.MediaStore
import android.util.Log
import androidx.core.app.ActivityCompat
import androidx.core.content.ContextCompat
import androidx.fragment.app.Fragment
import androidx.viewpager.widget.ViewPager
import kotlin.concurrent.timer

class MainActivity : AppCompatActivity() {

    private val REQUEST_READ_EXTERNAL_STORAGE = 1000
    lateinit var viewPager: ViewPager

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

        viewPager = findViewById(R.id.viewPager)

        val readIMagePermission = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) Manifest.permission.READ_MEDIA_IMAGES
            else Manifest.permission.READ_EXTERNAL_STORAGE

        // 권한이 부여되었는지 확인
        if (ContextCompat.checkSelfPermission(this, readIMagePermission) != PackageManager.PERMISSION_GRANTED)

            // 권한이 허용되지 않음
            if(ActivityCompat.shouldShowRequestPermissionRationale(this, readIMagePermission)){
                // 이전에 권한 거부한 적 있으면 설명(경고)
                var dlg = AlertDialog.Builder(this)
                dlg.setTitle("권한이 필요한 이유")
                dlg.setMessage("사진 정보를 얻기 위해서는 외부 저장소 권한이 필수로 필요합니다.")
                dlg.setPositiveButton("확인"){dialog, which-> ActivityCompat.requestPermissions(this@MainActivity,
                                    arrayOf(readIMagePermission), REQUEST_READ_EXTERNAL_STORAGE)}
                dlg.setNegativeButton("취소", null)
                dlg.show()
            } else{
                // 처음 권한 요청
                ActivityCompat.requestPermissions(this@MainActivity,
                    arrayOf(readIMagePermission), REQUEST_READ_EXTERNAL_STORAGE)
            } else{
                // 권한이 이미 제대로 허용됨
                getAllPhotos()
        }
    }

    private fun getAllPhotos(){
        // 모든 사진 정보 가져오기
        val cursor = contentResolver.query(MediaStore.Images.Media.EXTERNAL_CONTENT_URI,
                null,   // 가져올 항목 배열
                null,      // 조건
                null,   // 조건
                MediaStore.Images.ImageColumns.DATE_TAKEN + " DESC")    // 촬영 날짜 내림차순

        val fragments = ArrayList<Fragment>()

        if(cursor != null){
            while(cursor.moveToNext()){
                // 사진 경로 Uri 가져오기
                val uri = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA))
                Log.d("MainActivity", uri)
                fragments.add(PhotoFragment.newInstance(uri))
            }
            cursor.close()
        }

        // 어댑터
        val adapter = MyPagerAdapter(supportFragmentManager)
        adapter.updateFragments(fragments)
        viewPager.adapter = adapter

        // 3초마다 자동으로 슬라이드
        timer(period = 3000){
            runOnUiThread {
                if(viewPager.currentItem < adapter.count-1){
                    viewPager.currentItem++
                } else{
                    viewPager.currentItem = 0
                }
            }
        }
    }
}

 

PhotoFragment.kt

package com.example.mygallery

import android.os.Bundle
import androidx.fragment.app.Fragment
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import com.bumptech.glide.Glide

// TODO: Rename parameter arguments, choose names that match
// the fragment initialization parameters, e.g. ARG_ITEM_NUMBER
private const val ARG_URI = "uri"

/**
 * A simple [Fragment] subclass.
 * Use the [PhotoFragment.newInstance] factory method to
 * create an instance of this fragment.
 */
class PhotoFragment : Fragment() {
    // TODO: Rename and change types of parameters
    private var uri: String? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        arguments?.let {
            uri = it.getString(ARG_URI)
        }
    }

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_photo, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)
        var imageView : ImageView = view.findViewById(R.id.imageView)
        Glide.with(this).load(uri).into(imageView)      // 그림 출력
    }

    companion object {
        /**
         * Use this factory method to create a new instance of
         * this fragment using the provided parameters.
         *
         * @param param1 Parameter 1.
         * @param param2 Parameter 2.
         * @return A new instance of fragment PhotoFragment.
         */
        // TODO: Rename and change types and number of parameters
        @JvmStatic
        fun newInstance(uri: String) =
            PhotoFragment().apply {
                arguments = Bundle().apply {
                    putString(ARG_URI, uri)
                }
            }
    }
}

 

MyPagerAdapter.kt

package com.example.mygallery

import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentManager
import androidx.fragment.app.FragmentStatePagerAdapter

class MyPagerAdapter(fm: FragmentManager) : FragmentStatePagerAdapter(fm, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT) {

    // 뷰페이저가 표시할 프래그먼트 목록
    private val items = ArrayList<Fragment>()

    // position 위치의 프래그먼트
    override fun getItem(position: Int): Fragment {
        return items[position]
    }

    // 프래그먼트의 갯수 (아이템 갯수)
    override fun getCount(): Int {
        return items.size
    }

    // 아이템 갱신
    fun updateFragments(items : List<Fragment>){
        this.items.addAll(items)
    }
}

 

 

 

정리

- 콘텐츠 프로바이더를 사용하면 기기에 저장된 사진 정보를 얻을 수 있음

- 위험한 권한을 사용할 때는 앱을 실행하는 중에 해당 권한의 사용 허용을 사용자에게 요청해야 함 

- 프래그먼트는 UI 조각입으로 액티비티에는 여러 프래그먼트를 배치할 수 있고 재사용이 가능

- 이미지를 로딩할 때 메모리와 캐시 관리 및 성능을 고려해 Glide 라이브러리를 사용하는 것이 좋음 

- 뷰페이저는 여러 프래그먼트를 좌우로 슬라이드하는 어댑터 패턴을 구현함