지금 참여하고 있는 프로젝트에서 TDD 관련 Role 을 맡고 있는데요.
안드로이드 Tablet 용 Native 애플리케이션 개발쪽 Role 을 맡을 수도 있을 것 같아서 얼마전 책 두권을 샀습니다.
그 중 하나가 B.M. Harwani 가 지은 The Android Tablet Developer's Cookbook 입니다.
기왕 샀으니 열심히 공부해야겠죠.
오늘은 책장을 넘기다가 눈에 띄는 부분을 공부하려구요.
Chapter 8에 있는 Tweening Animation 인데요.
이 앱을 공부해 보겠습니다.
이 앱에는 4가지 타입의 애니메이션이 있습니다.
Alpha animation - view 의 투명도를 바꿈
Rotate animation - 주어진 pivot point 나 axis 를 중심으로 특정 각도로 view를 rotate 시킴
Scale animation - X나 Y 축을 중심으로 view 를 축소하거나 확대 함.
Translate animation - X나 Y 축을 따라서 view를 움직임
원래 view 를 flipping 시키는 효과를 어디서 찾아보던 중이었거든요.
Rotate animation 이 바로 제가 원하는 효과인지 한번 봐야겠습니다.
그럼 일단 layout xml인 activity_tweening_anim_app.xml을 보겠습니다.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView android:id="@+id/imgview"
android:layout_width="@dimen/image_width"
android:layout_height="@dimen/image_height"
android:src="@drawable/ic_launcher"
android:layout_centerInParent="true" />
<Button
android:id="@+id/alpha_button"
android:text="Alpha"
android:textSize="@dimen/text_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
<Button
android:id="@+id/rotate_button"
android:text="Rotate"
android:textSize="@dimen/text_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/alpha_button" />
<Button
android:id="@+id/scale_button"
android:text="Scale"
android:textSize="@dimen/text_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/rotate_button" />
<Button
android:id="@+id/translate_button"
android:text="Translate"
android:textSize="@dimen/text_size"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/scale_button" />
</RelativeLayout>
전체 Layout 은 RelativeLayout 으로 감쌌습니다.
그리고 그 안에 1개의 ImageView와 4개의 Button들이 있습니다.
각 버튼마다 위에 소개한 4개의 효과 중 하나를 동작하도록 할 거 같습니다.
각 view 마다 모두 id 가 있죠? 나중에 java에서 갖다가 사용할 겁니다.
각 뷰마다 size는 @dimen/ 으로 시작하는데 이것은 res-values 폴더 아래에 있는 dimens.xml 안에 설정한 값을 사용하겠다는 겁니다.
dimens.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="text_size">14sp</dimen>
<dimen name="image_width">100dp</dimen>
<dimen name="image_height">120dp</dimen>
</resources>
이 크기들은 일반 phone 크기에 맞춘 것입니다.
이 소스를 보면 values-sw600dp 라는 폴더가 있는데요. 이 안에 있는 dimens.xml을 보면 아래와 같습니다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="text_size">24sp</dimen>
<dimen name="image_width">140dp</dimen>
<dimen name="image_height">160dp</dimen>
</resources>
이것은 7인치 타블렛 용입니다.
그리고 values-sw720dp 는 10 인치 이상의 tablet 을 위한 겁니다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<dimen name="text_size">32sp</dimen>
<dimen name="image_width">180dp</dimen>
<dimen name="image_height">200dp</dimen>
</resources>
크기의 비율을 잘 봐 두면 나중에 실무에 도움을 받을 수 있겠네요.
이렇게 설정을 해 놓으면 각 device 마다 해당 해상도에 맞는 dimens.xml 을 갖다가 쓰게 됩니다. 다양한 크기의 해상도를 가진 안드로이드 앱을 개발할 때는 이런 구성을 미리 생각하고 프로그래밍에 들어가야 겠습니다.
아까 소개했던 4개의 애니메이션 효과들은 각각 해당 class 를 가지고 있습니다.
먼저 AlphaAnimation 을 보겠습니다.
이 클래스는 view의 투명도를 조절하기 위해 만든 건데요. 그 구성은 아래와 같습니다.
public AlphaAnimation(float from_alpha, float to_alpha)
여기서 첫번째 파라미터인 from_alpha 는 이 애니메이션이 시작할 때의 alpha 값입니다. 값은 0.0에서 1.0까지 설정할 수 있습니다. 1.0은 제일 선명한 거고 0.0은 완전 투명한 겁니다.
두번째 파라미터인 to_alpha 는 이 애니메이션이 끝날 때의 alpha 값입니다.
예를 들어 Animation animation = new AlphaAnimation(1.0f,0.1f) 라고 선언하면 아주 뚜렷한 이미지에서 거의 투명한 이미지로 바뀌게 되겠죠.
이 클래스는 view를 움직이도록 합니다. syntax는 아래와 같습니다.
public TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
fromXDelta | Change in X coordinate to apply at the start of the animation |
---|---|
toXDelta | Change in X coordinate to apply at the end of the animation |
fromYDelta | Change in Y coordinate to apply at the start of the animation |
toYDelta | Change in Y coordinate to apply at the end of the animation |
public RotateAnimation (float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
Parameters
fromDegrees | Rotation offset to apply at the start of the animation. |
---|---|
toDegrees | Rotation offset to apply at the end of the animation. |
pivotXType | Specifies how pivotXValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT. |
pivotXValue | The X coordinate of the point about which the object is being rotated, specified as an absolute number where 0 is the left edge. This value can either be an absolute number if pivotXType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. |
pivotYType | Specifies how pivotYValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT. |
pivotYValue | The Y coordinate of the point about which the object is being rotated, specified as an absolute number where 0 is the top edge. This value can either be an absolute number if pivotYType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. |
public ScaleAnimation (float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
Parameters
fromX | Horizontal scaling factor to apply at the start of the animation |
---|---|
toX | Horizontal scaling factor to apply at the end of the animation |
fromY | Vertical scaling factor to apply at the start of the animation |
toY | Vertical scaling factor to apply at the end of the animation |
pivotXType | Specifies how pivotXValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT. |
pivotXValue | The X coordinate of the point about which the object is being scaled, specified as an absolute number where 0 is the left edge. (This point remains fixed while the object changes size.) This value can either be an absolute number if pivotXType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. |
pivotYType | Specifies how pivotYValue should be interpreted. One of Animation.ABSOLUTE, Animation.RELATIVE_TO_SELF, or Animation.RELATIVE_TO_PARENT. |
pivotYValue | The Y coordinate of the point about which the object is being scaled, specified as an absolute number where 0 is the top edge. (This point remains fixed while the object changes size.) This value can either be an absolute number if pivotYType is ABSOLUTE, or a percentage (where 1.0 is 100%) otherwise. |
4개의 애니메이션을 구현하기 위해 따로 코딩을 하지 않고 그냥 안드로이드 API 에서 해당 클래스를 불러다 쓰는 군요.
제가 원하는 flipping 효과를 낼 수 있을 지 어떨지 잘 모르겠네요.
다음 글에서 실제 자바 코드를 분석해 보고 어떻게 실행되는지도 살펴 보겠습니다.
그리고 실제 코드를 이것 저것 수정해서 어떤 효과들을 낼 수 있는지도 추가적으로 알아보겠습니다.
'WEB_APP > Android' 카테고리의 다른 글
[Cookbook] 안드로이드 Cores 와 Threads 이해하기 -3- (0) | 2013.09.24 |
---|---|
[Cookbook] 안드로이드 Cores 와 Threads 이해하기 -2- (0) | 2013.09.23 |
[Cookbook] 안드로이드 Cores 와 Threads 이해하기 -1- (0) | 2013.09.23 |
[CookBook] 원격에서JSON 데이터 받아와서 사용하기 (0) | 2013.09.20 |
[CookBook] Tweening Animation 소스 분석하기 -2- (0) | 2013.09.19 |
[PageSliding] SamplePageSliding 소스 파일 분석하기 (0) | 2013.09.17 |
[ViewPager] SampleVIewPager 소스 파일 분석하기 -2- (0) | 2013.09.16 |
[ViewPager] SampleVIewPager 소스 파일 분석하기 -1- (0) | 2013.09.15 |
[ViewFlipper] SampleVIewFlipper 소스 파일 분석하기 -3- (0) | 2013.09.14 |
[ViewFlipper] SampleVIewFlipper 소스 파일 분석하기 -2- (0) | 2013.09.13 |