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

자 오늘은 2탄입니다~!

CustomDialog를 상속받아서 이제는 화면에 로딩 되듯이 자연스럽게 띄워줘야 합니다.

그럼 제 글보다는 코드에, 작동 결과 화면에 관심이 많으실 테니 바로 시작해보도록 하겠습니다.

1) CustomAnimationDialog.java 파일을 만들고 아래와 같이 코드를 작성합니다.

CustomAnimationDialog.java

public class CustomAnimationDialog extends ProgressDialog { private Context c; private ImageView imgLogo; public CustomAnimationDialog(Context context) { super(context); requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT)); setCanceledOnTouchOutside(false); c=context; } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.custom_dialog); imgLogo = (ImageView) findViewById(R.id.img_android); Animation anim = AnimationUtils.loadAnimation(c, R.anim.loading); imgLogo.setAnimation(anim); } @Override public void show() { super.show(); } @Override public void dismiss() { super.dismiss(); } }

custom_dialog.xml (첫번째 포스트의 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>

(설명)

requestWindowFeature(Window.FEATURE_NO_TITLE); getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

일단 로딩 화면에 TitleBar이라던 지, 불필요한 Bar들이 있으면 안되니, FEATURE_NO_TITLE 특성을 적용시켜 없애줍니다.

그리고 첫번 째 포스트에서도 봤듯이, 로딩 화면에서는 Logo를 제외한 나머지 부분은 회색 투명 처리가 되어있습니다.

이를 위해 저 또한 TRANSPARENT 특성을 적용시켜 주었습니다.

setCanceledOnTouchOutside(false);

대부분 팝업창 아니면 다이얼로그가 화면에 나왔을 때 팝업 창 밖을 클릭하면 팝업 창이 꺼집니다. 그러나 로딩 중에, 로딩 로고가 아닌 다른 부분을 클릭한다고 해서 로딩 로고가 사라지면 얼마나 어이없겠습니까?

그래서 위 코드를 집어넣어 화면 어느 부분을 클릭해도 없어지지 않게 설정해 둡니다.

@Override public void show() { super.show(); } @Override public void dismiss() { super.dismiss(); }

이 부분은 나중에 밑에 코드 쓰임새를 보면 이해를 하실 것이지만, 일단 설명 드리자면, 저희는 ProgressDialog를 상속 받았습니다.

ProgressDialog은 아래와 같은 화면인데, 이를 화면에 보여주기 위해서는 show() 메쏘드, 그리고 없애기 위해서는 dismiss() 메쏘드가 필요합니다. 그래서 이를 Overide 하여 사용하기 위함입니다.

(일반적인 ProgressDialog 화면)

(출저 : http://developer-joe.tistory.com/44)

2) 그럼 모든 작업이 끝났습니다. MainActivity.java를 아주 조금만 수정합시다.

MainActivity.java

public class MainActivity extends AppCompatActivity { private CustomAnimationDialog customAnimationDialog; private Button btnLoad; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); } private void initView(){ btnLoad = (Button) findViewById(R.id.btn_load); btnLoad.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { customAnimationDialog = new CustomAnimationDialog(MainActivity.this); customAnimationDialog.show(); } }); } @Override public void onBackPressed() { super.onBackPressed(); customAnimationDialog.dismiss(); } }

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" > <Button android:id="@+id/btn_load" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="load!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" /> </android.support.constraint.ConstraintLayout>

(설명)

어렵지 않습니다. MainActivity에는 단순히 Button을 추가하여, Button을 클릭했을 때 Loading 로고가 뜨도록 ClickListener만 붙여 주었습니다. 그리고 OnBackPressed 메쏘드를 집어넣어, 뒤로가기를 누르면 해당 로딩 화면이 없어지도록 설정한것입니다.

위에서 말씀드린 show()와 dismiss() Method는 MainActivity.java에서 쓰기 위함이였습니다.

customAnimationDialog = new CustomAnimationDialog(MainActivity.this); customAnimationDialog.show();  customAnimationDialog.dismiss();

"new"를 통해 새로운 CustomAnimationDialog 객체를 생성해주시고, 해당 로고화면을 보여주기 위해 show() 메쏘드를 사용하고, 

없애기 위해 dismiss() 메쏘드를 사용하면 끝입니다~!

그럼 어떻게 실행되는 지 Demo 화면을 확인 해 봅시다~!

중간에 "Load!" 버튼을 누르면, 로딩 화면이 뜨고, 맨 아래 우측에 "뒤로가기" 세모 버튼을 누르면 로딩 화면이 사라집니다.

[예시 화면]

<중요>

중요한 게, OOS (최신 안드로이드 운영체제) 부터는 ProgressDialog가 Deprecated 되었습니다.

그럼 PrgoressDialog를 상속받으면 ProgressDialog에 줄이 그어질텐데, 이것이 기분 나쁘시다면

ProgressDialog 대신에 Dialog를 상속 받으셔도 무방합니다.