오늘도 Do it 안드로이드 프로그래밍에서 제공하는 예제로 공부를 했습니다.
예제소스는 http://android-town.org/ 로 가면 무료로 제공하고 있으니 필요하신 분들은 받으셔서 보셔도 됩니다.
동영상강좌는 http://www.youtube.com/user/easyspub 에서 제공되고 있습니다.
책을 직접 구입하셔서 보시면 훨씬 더 도움이 될 것 같네요.
이 예제 중 book3 에 있는 SamplePageSliding 을 공부했는데요.
지금 하고 있는 일과 관련해서 화면을 하나 만들어야 되서 이 예제를 바탕으로 좀 수정을 했습니다.
이 예제는 Android 의 Animation 기능을 이용해서 버튼을 누르면 오른쪽에 메뉴화면이 뜨고 또 버튼을 누르면 이 메뉴화면이 부드럽게 사라지는 효과를 주었습니다.
저는 이 메뉴를 오른쪽으로 옮기고 버튼을 없애는 대신 두 손가락으로 sliding을 할 경우 왼쪽에서 메뉴가 부드럽게 나타났다고 다시 두 손가락으로 sliding 하면 부드럽게 사라지는 기능을 만들었습니다.
우선 Layout xml 을 볼께요.
activity_main.xml
<FrameLayout 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" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#ffffffff">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="26px"
android:text="AAA Bank Check - 9513 Available balance $2,354.32"
android:textColor="#000000"
android:layout_marginLeft="350dp"
android:layout_marginTop="100dp"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/slidingPage01"
android:layout_width="250dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="left"
android:background="#ff888888"
android:visibility="gone">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20px"
android:text="Direct banking $642.77 "
android:textColor="#ff000000"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:textSize="20px"
android:text="Money Market - 3670"
android:textColor="#ff000000"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
/>
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_gravity="right|center_vertical"
android:background="#00000000">
<Button
android:id="@+id/openBtn01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Open"
android:visibility="invisible"
/>
</LinearLayout>
</FrameLayout>
전체 화면은 FrameLayout 을 사용했습니다. Animation 기능을 구현해야 하기 때문에 이 FrameLayout 을 사용했을 겁니다.
FrameLayout 의 특징이 화면에 여러 뷰나 레이아웃을 겹쳐 놓고 한순간에 하나의 레이아웃을 보이도록 할 수 있습니다. 계속 이 레이아웃을 바꾸면 애니메이션 효과가 나올 수 있겠죠.
그 다음엔 LinearLayout 이 있고 orientation은 vertical 로 돼 있습니다.
이 LinearLayout 안에 있는 view들은 위에서 아래로 정렬이 될 겁니다.
그 아래 보니까 그냥 TextView 하나만 있네요.
일단 화면에 이 TextView가 표시 될 겁니다.
다음에 보니까 다시 LinearLayout 이 나왔습니다.
이것도 orientation이 vertical 이네요. view들이 위에서 아래로 배치가 될겁니다.
그런데 그 다음에 layout_gravity 가 left로 돼 있습니다. 이것은 기준이 왼쪽이 된다는 겁니다.
원래 소스에는 이것이 right로 돼 있었습니다.
그런데 저는 메뉴가 왼쪽에서 나오도록 하기 위해 이것을 right으로 바꿨습니다.
다음에는 TextView가 두개가 나오는데요.
이 두개는 아래 위로 배치될 겁니다.
이 두번째 LinearLayout 에 animation 효과가 적용되서 좌우로 sliding 될 겁니다.
이 LinearLayout 의 id 가 slidingPage01 이라는 것을 잘 봐 두세요.
그 다음에 LinearLayout 이 또 나오네요.
orientation은 vertical 이고 gravity 가 right|center_vertical 이네요.
이 의미는 가로로는 오른쪽으로 배치를 하는데 세로로는 가운데에 정렬한다는 뜻입니다.
이 Linear Layout 에는 Button 만 하나 있네요.
그런데 저는 이 버튼을 사용하지 않을거기 때문에 그냥 android:visibility="invisible" 로 해서 화면에서 없앴습니다.
이제 Java 파일을 볼까요?
MainActivity.java
public class MainActivity extends Activity {
boolean isPageOpen = false;
Animation translateLeftAnim;
Animation translateRightAnim;
LinearLayout slidingPage01;
Button openBtn01;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
slidingPage01 = (LinearLayout) findViewById(R.id.slidingPage01);
translateLeftAnim = AnimationUtils.loadAnimation(this, R.anim.translate_left);
translateRightAnim = AnimationUtils.loadAnimation(this, R.anim.translate_right);
SlidingPageAnimationListener animListener = new SlidingPageAnimationListener();
translateLeftAnim.setAnimationListener(animListener);
translateRightAnim.setAnimationListener(animListener);
openBtn01 = (Button) findViewById(R.id.openBtn01);
openBtn01.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
if (isPageOpen) {
slidingPage01.startAnimation(translateRightAnim);
} else {
slidingPage01.setVisibility(View.VISIBLE);
slidingPage01.startAnimation(translateLeftAnim);
}
}
});
}
private class SlidingPageAnimationListener implements AnimationListener {
public void onAnimationEnd(Animation animation) {
if (isPageOpen) {
slidingPage01.setVisibility(View.INVISIBLE);
openBtn01.setText("Open");
isPageOpen = false;
} else {
openBtn01.setText("Close");
isPageOpen = true;
}
}
public void onAnimationRepeat(Animation animation) {
}
public void onAnimationStart(Animation animation) {
}
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
public boolean onTouchEvent(MotionEvent event) {
if(event.getPointerCount() > 2) {
return false;
}
else if (event.getPointerCount() == 2) {
int action = event.getAction();
float downX = 0;
float upX = 0;
int pureaction = action & MotionEvent.ACTION_MASK;
if (isPageOpen) {
slidingPage01.startAnimation(translateRightAnim);
} else {
slidingPage01.setVisibility(View.VISIBLE);
slidingPage01.startAnimation(translateLeftAnim);
}
}
return true;
}
}
우선 onCreate() 메소드 부터 보겠습니다.
layout xml 로 activity_main 을 세팅했죠.
그 다음에 한 것이 sliding 효과를 줄 LinearLayout 객체에 넣은 겁니다.
아까 봤던 두번째 LinearLayout 인 slidingPage01 을요.
다음엔 animation 효과를 객체에 담은 건데요.
translate_left와 translate_right는 res의 amin 이라는 폴더안에 xml 형태로 있습니다.
translate_left.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
>
<translate
android:fromXDelta="-20%p"
android:toXDelta="0%p"
android:duration="500"
android:repeatCount="0"
android:fillAfter="true"
/>
</set>
translate_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_decelerate_interpolator"
>
<translate
android:fromXDelta="0%p"
android:toXDelta="-20%p"
android:duration="500"
android:repeatCount="0"
android:fillAfter="false"
/>
</set>
저는 메뉴가 좌측에서 나오도록 하기 위해서 from, toXDelta 값들을 바꿨습니다.
애니메이션의 시작점과 끝점을 가리키는 겁니다.
그 다음에는 SlidingPageAnimationListener 의 객체를 만들어서 방금 만들었던 Animation에 이 리스너를 set 해 넣습니다.
그리고 Button 을 만들어서 이 버튼을 클릭하면 좌측 화면이 사라졌다가 나타났다가 하는 동작을 하도록 코딩을 해 줍니다.
사실 이 부분은 원본 소스에서 사용되는 부분이구요.
저는 버튼클릭은 없애고 대신 두손가락으로 sliding 하는 이벤트를 Listening 하다가 그에 반응하는 기능을 넣고 싶었거든요.
그래서 onTouchEvent() 메소드를 구현한 겁니다.
이 메소드를 보죠.
public boolean onTouchEvent(MotionEvent event) {
if(event.getPointerCount() > 2) {
return false;
}
else if (event.getPointerCount() == 2) {
int action = event.getAction();
float downX = 0;
float upX = 0;
int pureaction = action & MotionEvent.ACTION_MASK;
if (isPageOpen) {
slidingPage01.startAnimation(translateRightAnim);
} else {
slidingPage01.setVisibility(View.VISIBLE);
slidingPage01.startAnimation(translateLeftAnim);
}
}
return true;
}
화면에서 일어나는 이벤트를 감지해서 어떤 동작을 하고 싶으면 이 메소드를 구현하면 됩니다.
getPointerCount()는 화면에 닿은 손가락 갯수를 받는 거구요.
화면에 2개의 손가락이 닿았을 공우 isPageOpen 이 true 이면 translateRightAmin 이 실행되고 false 이면 translateLeftAnim 이 실행 되도록 만든 겁니다.
원본 샘플 파일을 받아서 실행해 보시고 위에서 제가 바꾼 것들을 따라서 바꿔가면서 결과를 단계별로 확인하시면 쉽게 이해하실 수 있을 겁니다.
그리고 이 두 소스를 기반으로 본인이 구현하고 싶은 기능을 나름대로 생각해서 구현하면 공부하는데 훨씬 도움이 될 겁니다.
'WEB_APP > Android' 카테고리의 다른 글
[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 |
[CookBook] Tweening Animation 소스 분석하기 -1- (0) | 2013.09.18 |
[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 |
[ViewFlipper] SampleVIewFlipper 소스 파일 분석하기 -1- (0) | 2013.09.13 |