2. 시작하기
우리는 Animation을 이용하여 간단히 View를 이동시킬 수 있습니다.
그런데 만약 View를 Drag에 따라 이동하게 한다거나, Fling에 따라 가속도가 붙어야 한다면 머리가 아파오겠죠
이제 Propose를 이용하여 간단한 방법으로 Drag, Fling 등에 속성을 부여할 수 있습니다.
Propose는 Android에서 제공하는 Property animation에 Motion 속성을 부여해줍니다.
또한 Touch 관련 제스처를 쉽고 간단하게 Property animation에 자동으로 연결해줍니다.
Property animation를 만들 수 있다면, 당신은 이미 Propose를 사용할 준비를 마친 것입니다.
Propose는 Property animation을 이용하기 때문에 Android 3.0 이상에서만 작동합니다.
만약 Property animation의 사용법을 모른다면 아래 링크를 통해 사용법을 익혀야 합니다.
- Google developer site
Note : Property animation으로는 ObjectAnimator와 ValueAnimator이 대표적입니다.
Property animation을 익혔다면 아래와 같이 gradle.build 파일에 디펜던시를 명시합니다.
dependencies {
compile 'com.markjmind.propose:propose:1.1.+'
}
이제 Property animation에 Propose를 연결하는 것이 얼마나 간단한지 알아보겠습니다.
Propose는 크게 3단계를 거치게 됩니다.
1. Propose 객체생성
2. Motion 방향선택과 Play할 Animator설정
4. Propose 객체를 View의 TouchListener 등록
우측으로 TextView가 이동하는 소스코드를 보면서 설명 드리겠습니다.
- ObjectAnimator를 생성하여 우측으로 TextView를 이동시키는 Animator를 생성합니다.
TextView textView1 = (TextView)findViewById(R.id.textView1);
float move = 200*getResources().getDisplayMetrics().density;//move 200dp
// create ObjectAnimator
ObjectAnimator rightMove = ObjectAnimator.ofFloat(textView1, View.TRANSLATION_X, 0,move);
rightMove.setDuration(1000);
rightMove.setInterpolator(null);- Propose 객체를 생성하고 motion.play에 Animator 객체(rightMove)를 넣습니다.
- textView1.onToucListener에 Propose객체를 넣습니다.
Propose pro = new Propose(this); // Propose 객체생성
pro.motionRight.play(rightMove); //Motion 방향선택과 Play할 Animator설정
textView1.setOnTouchListener(pro);//Propose 객체를 TouchListener에 등록Result
Animation이 끝나면 반대방향으로 Reverse Animation이 자동 적용됩니다.
- Source 설명
Propose에는 방향에 따라 4가지 Motion이 있습니다.
Motion은 'drag할 방향'이라고 생각하면 쉽습니다. 우측으로 모션을 주기 위해 motionRight를 선택합니다.
그리고 play할 애니메이션 객체를 매개변수로 넣습니다.
pro.motionRight.play(rightMove);Touch 입력을 받을 View에 OnTouchListener로 Propose 객체를 넣습니다.
textView1.setOnTouchListener(pro);하지만 이대로 실행해본다면 Drag시 왠지 반응이 느립니다.
추가적으로 Drag할 거리를 pro.motionRight에 setMotionDistance를 설정합니다.
Animation 이동거리만큼 MotionDistance를 설정함으로써 Drag와 view의 이동이 동일해졌습니다.
MotionDistance에 대해서는 Motion 파트에서 자세히 다루고 있습니다.
pro.motionRight.setMotionDistance(move);제스처는 default로 모두 사용하는 것으로 되어 있는데 필요하지 않는 제스처가 있을 수 있습니다. Motion class에서 enable로 시작하는 메소드로 원하는 제스처를 선택할 수 있게 지원합니다.
각각의 메소드는 체이닝방식으로 구성되어 간편하게 여러 개의 속성을 설정할 수 있습니다.
만약 SingleTabUp과 Fling을 사용하지 않는다면 아래와 같이 코드를 추가하면 됩니다.
propose.motionRight.enableSingleTabUp(false).enableFling(false);이 밖에 enable관련 메소드들입니다.
-
enableTabUp(boolean)
Move중 TabUp시 애니메이션 작동여부 설정 -
enableSingleTabUp(boolean)
SingleTabUp시 애니메이션 작동여부 설정 -
enableFling(boolean)
Fling시 애니메이션이 작동여부 설정 -
enableMove(boolean)
Move시 애니메이션이 작동여부 설정 -
enableReverse(boolean)
Reverse시 애니메이션 사용여부 설정 -
enableDuration(boolean)
tabUp시 duration을 거리로 환산할지 여부 설정
true일경우 motionDistance를 duration으로 자동설정 된다
Full Source
main_layout.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@android:color/holo_blue_light"
android:text="Large Text"
android:textAppearance="?android:attr/textAppearanceLarge" />
</LinearLayout>MainActivity.java
TextView textView1 = (TextView)findViewById(R.id.textView1);
float move = 200*getResources().getDisplayMetrics().density;//move 200dp
// create ObjectAnimator
final ObjectAnimator rightMove = ObjectAnimator.ofFloat(textView1, View.TRANSLATION_X, 0,move);
rightMove.setDuration(1000);
// create propose for all motion
Propose pro = new Propose(this);
pro.motionRight.play(rightMove);
pro.motionRight.setMotionDistance(move); //set Drag Distance
textView1.setOnTouchListener(pro);