[Android] Animated "ListView" Demo

[목표]
안드로이드용 Appy Geek 앱에 있는 리스트에는 갱신될 때마다 리스트 항목이 차례대로 위에서 아래로 흐르는 애니메이션이 적용되어 있다. 이것을 따라 만들어 본다.

 



[리스트 항목 레이아웃 잡기]

리스트 항목의 레이아웃은 아래 그림과 같이 잡는다.

 
이를 /res/layout/list_item_layout.xml 에 구현한다.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_height="fill_parent" 
	android:layout_width="fill_parent"
	android:orientation="vertical"
	android:background="#FFFFFF">
	<LinearLayout 
		android:id="@+id/listLayout_main"
		android:layout_height="wrap_content"
		android:layout_width="fill_parent" 
		android:layout_weight="5"
		android:orientation="horizontal">
		<ImageView
			android:id="@+id/main_icon"
			android:layout_height="35dip"
			android:layout_width="35dip"
			android:layout_gravity="center"
			android:layout_marginLeft="2dip"
			android:background="@drawable/icon01"/>
		<LinearLayout 
			android:id="@+id/listLayout02"
			android:layout_height="wrap_content"
			android:layout_width="fill_parent" 
			android:layout_weight="5"
			android:layout_marginLeft="10dip"
			android:orientation="vertical">
			<TextView 
				android:id="@+id/txt_top"
				android:layout_height="30dip"
				android:layout_width="wrap_content"
				android:gravity="center_vertical"
				android:textColor="@color/list_txt_top"
				android:textSize="@dimen/list_top_txt_size"
				android:singleLine="true" 
				android:ellipsize="marquee"
				android:text=""/>
			<TextView 
				android:id="@+id/txt_bottom"
				android:layout_height="20dip"
				android:layout_width="wrap_content"
				android:singleLine="true"
				android:gravity="center_vertical"
				android:textColor="@color/list_txt_bottom"
				android:textSize="@dimen/list_bottom_txt_size"
				android:ellipsize="marquee"
				android:text=""/>
		</LinearLayout>
		<Button 
			android:id="@+id/button01" 
			android:layout_height="35dip"
			android:layout_width="35dip" 
			android:background="@drawable/icon02" 
			android:clickable="true" 
			android:focusable="false" 
			android:focusableInTouchMode="true" 
			android:layout_gravity="center"
			android:layout_marginRight="2dip"/>
		<Button 
			android:id="@+id/button02"
			android:layout_height="35dip"
			android:layout_width="35dip"
			android:layout_gravity="center"
			android:background="@drawable/icon03"
			android:clickable="true" 
			android:focusable="false"
			android:focusableInTouchMode="true"
			android:layout_marginRight="2dip"/>
	</LinearLayout>
</LinearLayout>

[개별 Animation XML 정의하기]

res/anim/anim_alpha_translate_listview.xml 파일에 리스트 항목 한 개에 적용될 기본 애니메이션을 정의한다.
위에서 아래로 이동하고(translate), 페이드인 효과(alpha)를 동시에 표현하기 위해 아래와 같이 구현한다.

<set xmlns:android="http://schemas.android.com/apk/res/android" 
    android:interpolator="@android:anim/accelerate_decelerate_interpolator">
	<translate
		android:fromYDelta="-100%"
		android:toYDelta="0"
		android:duration="500">
	</translate>
	<alpha 
	    android:fromAlpha="0.0"
	    android:toAlpha="1.0"
	    android:duration="500">
	</alpha>
</set>

Line 04~06 : -100%에 해당하는 위치부터 제자리까지 0.5초 안에 이동하도록 설정한다.

Line 09~11 : 투명(0.0) 상태에서 본래 상태(1.0)까지 0.5초 안에 변하도록 설정한다.




[Layout Animation XML 정의하기]

위에서 정의한 애니메이션과 리스트뷰 자체를 연결하려면 제2의 XML 파일이 필요한데, 이를 레이아웃 컨트롤러 XML이라고 부른다. /res/anim/anim_layout_controller.xml 파일을 생성하고, 아래와 같이 구현한다.

<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android" 
	android:delay="40%"
	android:animationOrder="normal"
	android:animation="@anim/anim_alpha_translate_listview">
</layoutAnimation>

Line 02 : 항목별 애니메이션이 시작되는 지연시간이다. 애니메이션 총 시간의 30%에 해당되는 시간마다 다음 항목의 애니메이션을 시작한다. 만약, 100%를 지정하면, 첫 번째 리스트 항목의 애니메이션이 끝나야만 두 번째 항목의 애니메이션이 시작된다. (사용자가 지루함을 느끼지 않도록 할 자신이 있다면 100%를 사용해도 되지만.. 이 예제는 그럴 자신이 없으므로 40% 설정했다. ^^)

Line 03 : 애니메이션이 적용될 순서다. "normal"은 위에서 아래로 순차적으로 적용된다. 반대로 하려면 "reverse", 랜덤을 원하면 "random"을 적어 넣으면 된다.

Line 04 : 정의해 놓았던 개별 Animation XML 리소스(anim_alpha_translate_listview.xml)를 연결시킨다.




[ListView와 애니메이션 연결짓기]

위에서 준비했던 모든 과정은 바로 여기에서 사용하려고 했던 짓(?)이다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="#FFFFFF">
	<ListView 
		android:id="@android:id/list"
		android:layout_width="fill_parent"
		android:layout_height="wrap_content"
		android:divider="@color/list_divider" 
		android:dividerHeight="1dip"
		android:smoothScrollbar="true"
		android:fastScrollEnabled="true"
		android:background="#FFFFFF"
		android:persistentDrawingCache="animation|scrolling"
		android:layoutAnimation="@anim/anim_layout_controller"/>
</LinearLayout>

Line 15 : 애니메이션과 스크롤링의 최적화를 위해 persistentDrawingCache 속성을 부여한다.
Line 16 : 레이아웃 컨트롤러를 지정함으로써 드디어 리스트 뷰에 애니메이션이 적용된 것이다.




[결과화면]
(기본적인 리스트뷰 관련 코드는 생략합니다. 맨 아래 전체 코드를 다운받아 참고하시면 됩니다. ^^)

[다운로드]
    전체소스