안드로이드 Animation으로 Custom Loading(커스텀 로딩) 구현하기(1/2)

"안녕하세요~!

오랜만에 다시 블로그를 시작하게 되었습니다. 

이번에는 안드로이드 애니메이션을 이용하여 커스텀 로딩 화면을 구현하려고 합니다.

예를 들면 아래와 같이 "배X의 민족" 앱 같은 경우 로딩 시 오토바이 맨이 나옵니다. 

(출저 : https://m.blog.naver.com/PostView.nhn?blogId=marie0831&logNo=220181991052&proxyReferer=https%3A%2F%2Fwww.google.co.kr%2F)

그럼 본론으로 돌아가서, Animation부터 차근차근 시작해 보죠.

커스텀 로딩 애니메이션은 사용자에게 시각적인 즐거움(?)을 주는 것으로 사용하면 매우 좋을(?) 것 같습니다.

단순히 Android에서 제공하는 Progress Bar을 사용하기에는 너무 식상하니깐요 ㅋㅋ;

1) 아래 그림과 같이 먼저 프로젝트를 생성 후, "res" 폴더에 "anim" 폴더를 생성해 줍니다.

2) 그 다음 아래 그림과 같이 loading.xml 파일을 생성해 줍니다.

3) loading.xml을 취향에 맞게 코딩해줍니다~!

<?xml version="1.0" encoding="utf-8"?> <set xmlns:android="http://schemas.android.com/apk/res/android"> <scale android:duration="400" android:fromXScale="1.0" android:fromYScale="1.0" android:interpolator="@android:anim/accelerate_decelerate_interpolator" android:pivotX="50%" android:pivotY="50%" android:repeatCount="infinite" android:repeatMode="reverse" android:toXScale="-1.0" android:toYScale="1.0" /> </set>

위 코드의 애니메이션 효과는 이미지를 시계 방향으로 무한 회전 시키는 것입니다.

위 코드에서 각 속성들이 무엇을 의미하는 지 공부 해보시기 바랍니다.

(그래도 이해가 안되시면 댓글을 남겨주시기 바랍니다~! )

Animation 속성 블로그 : http://ggoreb.tistory.com/8

4) 그럼 테스트를 위해, layout 파일인 activity_main.xml에 이미지를 집어 넣도록 하겠습니다~!

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.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" > <ImageView android:id="@+id/img_android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@mipmap/ic_launcher" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>

ConstraintLayout이 불편하신 분께서는 LinearLayout, RelativeLayout으로 레이아웃 xml 파일을 만드셔도 무방합니다~!

(LinearLayout, RelativeLayout으로 ImageView 넣는 게 잘 안되시면 댓글을 남겨주시기 바랍니다~! )

위 xml 레이아웃의 Design은 아래와 같습니다.

매우 Simple 하죠? ㅋㅋ

자 그럼 우린 저 청포도 괴물을 이제 움직이게 만들어야 합니다. 그러니 activity_main.xml을 참조하는 MainActivity를 건드릴 시간입니다!

5) MainActivity.java에 아래와 같이 몇 줄만 입력하면 끝납니다~!

package dongster.animationtest; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.ImageView; public class MainActivity extends AppCompatActivity { private ImageView imgAndroid; private Animation anim; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView(){ imgAndroid = (ImageView) findViewById(R.id.img_android); anim = AnimationUtils.loadAnimation(this, R.anim.loading); <-- imgAndroid.setAnimation(anim); } }

Animation을 실행시키기 Animation 객체에 어떤 속성을 이용하여 Animation을 작동시킬 지 속성을 설정해주시면 됩니다.

  - Android Developer 문서에 의하면 AnimationUtils는 "Defines common utilities for working with animations."라고 설명이 되어있습니다.  즉, Animation 작업을 할 때 필요한 요소들을 정의하고 있다는 것입니다.

  - 즉 AnimationUtils는 필요한 요소를 제공하고, 우린 그 중에서도 Animation을 수행시킬 때 필요한 속성을 "loadAnimation" 메쏘드를 이용하여 위에서 만든 loading.xml을 설정해줍니다.

  - 마지막으로 우리의 청포도 이미지인 imgAndoird에 setAnimation 메쏘드를 통해 animation을 적용시킵니다!

<TIP : 코딩을 하다가 제공되는 함수나 클래스의 정의를 보고 싶을 때는 해당 메쏘드나 클래스에 마우스 커서로 클릭하고 Ctrl+q 단축키를 누르시기 바랍니다>

[예시]

질문은 댓글로 언제든지 환영입니다~! 

그 다음 글에서는 "배X의 민족"의 오토바이맨 처럼 이미지는 보이고, 뒷 화면은 회색 계통의 투명으로 나오도록 Custom Dialog를 만들어보독 하겠습니다.

글이 마음에 드신다면 댓글로 응원해주세요~!