이미지가 마구 바뀌는 프로그레스 다이얼로그를 만들어보자 안드로이드 노트


인터넷 같은 걸 하다보면 서버와 통신하면서 무슨 처리를 하는 중이니 대기해 달라는 뺑뺑이 아이콘은 윈도우와 안드로이드, ios 등을 가리지 않고 폭넓게 사용되는 중이다.


안드로이드는 API 통신을 메인 UI단이 아닌 백그라운드에서 병렬 처리하도록 강제하고 있지만, 웬만한 경우에는 통신되는 와중에UI 조작을 막을 필요가 있다. 괜히 서버 통신 도중에 액티비티를 바꿔버리거나 하면 에러가 터지기 일쑤니까. 그 때는 프로그레스 다이얼로그라는 것을 띄워서 다른 조작을 못 하게 막아버리는 게 가장 보편적으로 쓰이는 방식이라 할 수 있다.


물론 그냥 "기다리슈" 하는 메시지만 띄우긴 뭐하니까 조금 장식을 해 뒀는데, 당장 크롬의 탭 부분만 봐도



이런 스타일의 뺑뺑이를 쓰고 있다. 당연히 안드로이드에서도 똑같은 형태를 유지하고 있다.


따라서, 앱을 만들 때에도 저거를 쓰면서 그냥 색깔이나 좀 바꿔주면 참 좋을텐데, 안드로이드 표준 디자인이라면 치를 떨어대는 디자이너(대체로 아이폰'만' 쓴다)들한테 저게 마음에 들 리가 있나.


뭐 그나마

이런 흉물을 넣어달라고 요구하지 않는 게 어디야. 이건 사랑해 마지않는 아이폰 표준에 가깝지만 지들이 봐도 그건 아닌 거지 ㅋㅋㅋ



그래서, 나같은 범인으로선 참으로 이해할 수 없는 짓거리지만, 대충 같은 크기의 이미지 대여섯 개를 던져주고 그거를 번갈아 보여주는 방식의 프로그레스를 요구하는 경우가 있다. 무슨 방식이라고 하는지 잘은 모르겠는데 아무튼 그럴 때 쓰는 게 있음.


이 부분에 대해서는 구글도 염두해 둔 것인지는 몰라도 구현 방법은 비교적 간단하다.



대충 이 네 개를 번갈아 쓸 거다.




프로젝트를 생성하고 요 네 개를 drawable에다가 넣었다. 화면 크기별로 다양한 크기의 아이콘을 넣으면 좋겠지만 지금은 귀찮으니까 패스. 그런 기본적인 거는 알아서들 하시면 되고


같은 drawable 폴더에서 리소스 파일을 하나 만들어 준다

기본이 selector로 설정된 xml 파일이 생성되는데, selector에서 animaiton-list 로 변경해 준 뒤 아이콘들을 item으로 추가시킨다.

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@drawable/ic_1"
android:duration="100"/>
<item
android:drawable="@drawable/ic_2"
android:duration="100"/>
<item
android:drawable="@drawable/ic_3"
android:duration="100"/>
<item
android:drawable="@drawable/ic_4"
android:duration="100"/>
</animation-list>
duration은 취향껏 넣어주면 됨







자바단에서 프로그레스 다이얼로그 클래스를 하나 만든다.


public class Dlg extends ProgressDialog {
public Dlg( Context context ) {
super( context );
}
}

기본적으로 요구하는 생성자를 하나 만들어 준 다음에

여러 곳에서 써먹을 물건이니까 싱글톤 식으로 쓰기 편하게 만들어 주는 것도 좋다.

public static Dlg getInstance( Context context ) {
Dlg dlg = new Dlg( context );
dlg.setIndeterminate( true );
dlg.setIndeterminateDrawable( context.getResources().getDrawable( R.drawable.ic_list_dlg ) );
return dlg;
}

완성됐으면 띄워 봐야지


@Override
protected void onCreate( Bundle savedInstanceState ) {
super.onCreate( savedInstanceState );
setContentView( R.layout.activity_main );
Dlg dlg = Dlg.getInstance( this );
dlg.show();
}



이런 형식의 결과물이 뜨게 되지만 아마 디자이너가 원하는 모양새는 이런 게 아니었을 것이다.
실제로 API 통신을 할 때 주로 띄우게 될텐데, 빨리 끝나면 특히 화면이 꺼멓게 깜빡이는 부분 때문에 조금 거시기한 모양새가 되기 때문에....

해서 좀 더 심플한 구성을 가지도록 할 것이다. 화면이 검게 dimming 되는 것을 막고, 저 허연 박스도 치우고, 글자는 필요 없으니까 이미지만 가운데로 보내자.

public class Dlg extends Dialog {
public Dlg( Context context ) {
super( context );
}

public static Dlg getInstance( Context context ) {
Dlg dlg = new Dlg( context );
dlg.setIndeterminate( true );
dlg.setIndeterminateDrawable( context.getResources().getDrawable( R.drawable.ic_list_dlg ) );
return dlg;
}
}
일단 상속받은 클래스를 ProgressDialog에서 그냥 Dialog로 변경시킨다. 하단에 dlg. 부분에서 대번에 에러가 뜰 것이다.


public static Dlg getInstance( Context context ) {
Dlg dlg = new Dlg( context );
ProgressBar progressBar = new ProgressBar( context );
progressBar.setIndeterminate( true );
progressBar.setIndeterminateDrawable( context.getResources().getDrawable( R.drawable.ic_list_dlg ) );
ViewGroup.LayoutParams params = new ViewGroup.LayoutParams( ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT );
dlg.addContentView( progressBar, params );
return dlg;
}
ProgressDialog에서 사용하던 프로그레스바 클래스가 필요하다. 패러미터도 대충 하나 만들어서 같이 보내줘야 한다.
이렇게 하면 흰 색 박스도 없어지고 이미지도 가운데로 정렬된다. 너저분하게 layout에서 xml을 만들지 않아도 되니까 좋다.


이제 배경의 dimming을 없애보자

res/values/styles.xml 로 이동해서

<style name="Dlg">
<item name="android:windowFrame">@null</item>
<item name="android:windowBackground">@android:color/transparent</item>
<item name="android:windowIsFloating">true</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowTitleStyle">@null</item>
<item name="android:windowAnimationStyle">@android:style/Animation.Dialog</item>
<item name="android:windowSoftInputMode">stateUnspecified|adjustPan</item>
<item name="android:backgroundDimEnabled">false</item>
<item name="android:background">@android:color/transparent</item>
</style>
이걸 추가해 준다.



마지막으로 다시 Dlg 클래스로 돌아와

public Dlg( Context context ) {
super( context, R.style.Dlg );
}
생성자의 super에다가 저 스타일을 지정해 주면 된다.






복잡한 것 같지만 사실은 별로 안 복잡하면서도 초보자들에게는 배울 점이 많은 파트였다.




덧글

  • 먹통XKim 2017/03/20 14:28 # 답글

    와..왈도체가 우습네요^ ^

    이젠 20년전이군요...마매 6 번들로 나온 거 그 게임지 사서 할때 간략 공략에서도 한글화가 좀 문제가 있다...
    책에 나올 정도라서 하면서


    얘들 무슨 외국인이 한국어 대충 하냐 할 정도로 그 번역이 정말 어이날림이었죠...

    가죽갑옷은 갑옷의 가죽이라고 번역하고 그 유명한 힘센 이끼....(리치)
댓글 입력 영역