전자 액자 앱 개발하기

Side Projects - Electronics Photo Frames
사진 앱에서 사진을 선택해 추가하고, 가로 화면으로 액자처럼 사진이 하나씩 넘어가는 기능을 구현한 간단한 프로젝트

• GitHub Repository-> https://github.com/hwayeon351/Electronic-Picture-Frames

GitHub - hwayeon351/Electronic-Picture-Frames

---

학습 회고

오늘은 사진 앱에서 불러온 사진들을 가로모드 액자로 5초에 한 번씩 자동으로 넘어가며 보여주는 기능을 개발했다.

5초에 한 장씩 사진을 넘길 때마다 사진이 Fade In 되는 View Animation 효과를 적용해보았다.

---

오늘 공부한 내용

• Activity 가로모드 설정하기

사진 추가하기 기능을 통해 전자액자로 실행할 사진들을 불러왔다.

전자액자 실행하기 버튼을 클릭해서 선택한 사진들을 가로 화면으로 보여주고자 한다.

Menifest에 선언한 Activity에 screenOrientation 속성에 landscape를 적용해서 가로모드를 구현할 수 있다.

 

 

• Intent를 통해 Activity에서 Activity로 데이터 주고 받기

전자액자 기능을 이용하기 위해서는 사진을 선택하는 기능이 있는 MainActivity에서 전자액자를 보여주는 PhotoFrameActivity를 실행시키고 선택한 사진 Uri를 전달해야 한다.

이를 위해 인텐트 빌드를 해줘야 한다.

 

인텐트는 구성요소(이 경우에서는 두 개의 Activity) 간에 런타임 바인딩을 제공하는 객체이다.

Intent는 어떤 작업을 하려는 것인지 앱의 의도를 나타내는 객체이다.

startActivity() 매서드의 매개변수로 Intent를 담아서 또 다른 Activity를 시작시킬 수 있다.

이때 실행시키고자 하는 Activity에 데이터를 전송하기 위해서 데이터를 Indent에 함께 담아 전송한다.

 

전자액자 앱에서는 MainActivity에서 전자액자 실행하기 버튼을 클릭해 PhotoFrameActivity를 실행시키므로, 버튼에 클릭이벤트가 발생했을 때 Intent를 통해 PhotoFrameActivity를 시작시킨다.

Intent 클래스의 putExtra() 매서드를 통해 담고자 하는 데이터를 key-value로 담아주면 데이터를 보낼 수 있다.

Uri를 string형으로 바꾸어 인텐트에 싣는다.

 

이제 MainActivity에서 보낸 데이터를 PhotoFrameActivity에서 받아보자.

이 역시, Intent를 통해 받을 수 있다. 당연히 인텐트에 데이터를 실어 보냈으니 인텐트에서 꺼내오면 된다!

이때에는 Intent.getStringExtra() 메서드를 통해 받아오고 이를 다시 Uri로 파싱해서 받아주면 Uri 데이터를 받아올 수 있다.

 

 

• View Animation 적용하기

전자액자를 실행시키면 선택한 사진들을 5초에 한번씩 순서대로 전환시키는 기능을 적용하였다.

그리고 사진을 적용할 때 Fade In 되는 애니매이션을 적용하였다.

 

이를 위해 먼저 ImageView를 2개 만들어서 서로 겹쳐있는 형태로 xml을 정의해주었다.

xml에 정의된 View들은 순서대로 화면 앞에 그려나기 때문에 나중에 정의된 ImageView가 화면 앞단에 배치되게 된다.

화면의 앞단에 있는 photoImageView가 우리가 볼 사진이 들어간다고 보면 되고, photoImageView 뒤에 배치된 backgroundPhotoImageView를 함께 활용해서 애니매이션 효과를 줄꺼다.

 

1. 먼저 현재 보여지고 있는 사진의 인덱스를 current 변수에 담는다.

그리고 다음에 보여질 사진의 인덱스를 next 변수에 담는다.

 

2. Fade In 효과를 photoImageView의 투명도를 조절해서 적용할 것이다.

처음에 photoImageView 투명도 alpha를 0으로 주면 이미지뷰가 아예 투명해져 보이지 않고 backgroundImageView가 화면에 보일 것이다.

따라서 backgroundImageView에 현재 사진을 적용해주고, photoImageView 투명도를 0으로 만들어준다.

 

3. 투명한 photoImageView에 다음 사진을 적용해두고 Fade In 효과를 통해 다음 사진이 보이도록 한다.

이를 위해 animate() 메서드를 사용할 수 있다. alpha에 1.0f를 적용하고 애니메이션 길이를 1초로 설정하고 start하면 애니메이션이 적용된다.

 

4. 다음 사진으로 변경이 되었기 때문에 현재 사진의 인덱스를 담고 있는 currentPosition 값을 next로 담아준다.

 

 

• timer 기능 사용하기

위에서 적용한 애니메이션을 5초에 한 번씩 반복해서 전자액자 기능을 구현하기 위해 Timer 클래스를 사용했다.

Timer는 백그라운드 쓰레드에서 나중에 실행되어야 하는 작업을 수행하도록 예약하는 데에 사용된다.

한 번의 실행에서도 사용 가능하지만 특정 간격을 두고 반복적인 작업을 수행할 때에도 사용할 수 있다.

Timer에 정의된 작업은 백그라운드 쓰레드에서 수행되기 때문에 UI 작업을 위해서 runOnUiThread를 호출한다.

https://developer.android.com/reference/java/util/Timer

Timer  |  Android Developers