패스트캠퍼스 챌린지 35일차

35일차

30개 프로젝트로 배우는 Android 앱 개발 with Kotlin 초격차 패키지 Online

강의 목표

---

• 프로젝트를 따라해보며 앱개발에 필요한 기술을 학습할 수 있습니다.
• 프로젝트를 따라해보며 앱개발에 필요한 기술을 학습할 수 있습니다.
• 앱 개발시 원하는 기능을 구현하기 위해 어떤 기술이 필요한 지 알 수 있습니다.
• 디자인 아키텍처 패턴, 비동기 처리 등 효율적인 앱 개발 방법을 익힐 수 있습니다.

목차 02 Basic - Ch05. 전자액자

---

• 인트로
• Android기기 권한 받아오기
• 권한을 통해 사진 가져오기
• 사진 가져와서 목록 구성하기
• 액자 화면 구성하기
• Activity Lifecycle 을 알아보고 완성도 높이기
• 아웃트로

액자 화면 구성하기

이전까지 intent로 넘겨준 데이터를 받아왔으니 이제 View에 적절히 보여주면 된다.

먼저 View 레이아웃을 보자

ImageView 두개를 만든 이유는 background에 사진을 설정하고, photoImageVIew의 투명도를 변경하면서 전환효과를 주기 위해서 이다.

사진 프레임 모드에서는 뒷배경에 검은색을 깔고, 일정 시간마다 사진을 바꿔주면서 전환 애니메이션을 줄 것이다.

private fun startTimer() {
    timer(period = 6 * 1000) {
        runOnUiThread {
            val current = currentPosition
            val next = if(photoList.size <= currentPosition + 1) 0 else currentPosition + 1

            backgroundPhotoImageView.setImageURI(photoList[current])
            photoImageView.alpha = 0f // 투명하게
            photoImageView.setImageURI(photoList[next])
            photoImageView.animate()
                .alpha(1.0f)
                .setDuration(1000)
                .start() // fadeIn animation

            currentPosition = next
        }
    }
}

일정 간격마다 일을 실행하기 위한 함수 timer을 이용한다.

현재 위치는 메인 쓰레드가 아니므로 화면 전환 효과를 수행하기 위해 runOnUiThread에서 작업하자.

먼저 뒷배경에 사진을 set해주고 앞배경의 투명도를 0 으로 준다. 그리고 1초동안 다시 투명도를 조절하고, 뒷배경의 사진을 바꾸는 것이다.

 

 

Activity Lifecycle 을 알아보고 완성도 높이기

 

현재 상태까지의 앱에서는 Activity가 화면에 더 이상 나오지 않을 때(전화를 받는 등) 에도 timer() 함수가 계속 돌아가면서 background의 메모리를 잡아먹는다.

onStop() 상태에서 일시 정지 하는 등의 조작으로 더 나은 완성도를 가진 어플리케이션을 만들수 있겠다.

먼저 Timer을 키고 끌 수 있도록 Timer를 전역변수로 설정하여 할당하는 식으로 코드를 수정한다.

private var timer : Timer? = null

private fun startTimer() {
    timer = timer(period = 6 * 1000) {
        runOnUiThread {
            val current = currentPosition
            val next = if(photoList.size <= currentPosition + 1) 0 else currentPosition + 1

            backgroundPhotoImageView.setImageURI(photoList[current])
            photoImageView.alpha = 0f // 투명하게
            photoImageView.setImageURI(photoList[next])
            photoImageView.animate()
                .alpha(1.0f)
                .setDuration(1000)
                .start() // fadeIn animation

            currentPosition = next
        }
    }
}

그리고 onStop 상태와 다시 시작되는 onStart, 그리고 액티비티가 종료되었을때의 onDestroy 를 고려하여 코드를 작성해준다

override fun onStop() {
    super.onStop()
    timer?.cancel()
}

override fun onStart() {
    super.onStart()
    startTimer()
}

override fun onDestroy() {
    super.onDestroy()
    timer?.cancel()
}

마지막으로 전자 액자 모드에서 가로로 보여주고 싶다면 manifest에 액티비티 속성에서 landscape 속성을 주면된다.

<activity android:name=".PhotoFrameActivity"
            android:screenOrientation="landscape" />

아웃트로

• Layout
  • 가로화면으로 그리기
• Android Permission 획득하기
  • 꼭 manifest에 기재해야함
  • checkSelfPermission()
  • 여러 경우를 고려하여 권한을 요청하고는 코드를 짜야한다
  • request code → onRequesetPermissionResult 등의 콜백함수로 받을때 코드체크
• View Animation
  • 전자액자의 사진을 전환할 때에 사용
  • animate() 함수로 alpha duration locate등의 속성을 조절 가능
• Content Provider
  • SAF 기능으로 사진을 추가하였음
  • Intent(Intent.ACTION_GET_CONTENT)
  • ActivityForResult → 넘겨받을 때 콜백이 필요함 onActivityResult
• Activity Life Cycle
  • onStart
  • onCreate
  • onStop
  • onDestroy

저장소 접근 권한을 이용하여 로컬 사진을 로드 할 수 있었음

추가한 사진들을 일정한 간격으로 애니메이션 전환하여 보여줄 수 있음

---

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

수강인증샷

 

링크

https://bit.ly/37BpXiC