상세 컨텐츠

본문 제목

flipper 사용하여 좌우 슬라이딩 만들기

쿠쿠 작업장(mobile)/도전 안드로이드

by eunclove 2012. 9. 18. 15:04

본문

728x90
반응형

flipper를 이용 하여 좌우 슬라이딩 animation 효과 주기 사용법

우선 main.xml 에 viewflipper 안에 슬라이딩 효과를 주고 싶은 TextView 또는 ImageView 같은 View를 넣어준다.

main.xml

<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent">
 
 <ViewFlipper
  android:layout_height="fill_parent"
  android:id="@+id/viewFlipper1"
  android:layout_width="fill_parent"
  android:flipInterval="1000">
  <TextView         
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:gravity="center"
         android:text="111"/>
  <TextView         
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:gravity="center"
         android:text="222"/>
  <TextView         
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:gravity="center"
         android:text="333"/>  
   
 </ViewFlipper>
</LinearLayout>

위(test ver)와 같이 작성(TextView 위치에 슬라이딩할 내용을 넣어준다.)을 한후  

Project 내 res내에 폴더 하나를 생성 예를 들어 animator 폴더를 만들어 준 후

animator folder내에 xml 파일을 만들어 준다.

1. left_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%p"
        android:toXDelta="0%p"
        android:duration="300"/>
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="300"
        />
</set>

2. left_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="-100%p"
        android:duration="300"/>
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:duration="300"
        />
</set>

3. right_in.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="-100%p"
        android:toXDelta="0%p"
        android:duration="300"/>
    <alpha
        android:fromAlpha="0.0"
        android:toAlpha="1.0"
        android:duration="300"
        />
</set>

4. right_out.xml

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%p"
        android:toXDelta="100%p"
        android:duration="300"/>
    <alpha
        android:fromAlpha="1.0"
        android:toAlpha="0.0"
        android:duration="300"
        />
</set>

위에 4가지 파일을 다 만들없으면 다음 activity.java 를 만들어 주자

MainActivity.java

public class MainActivity extends Activity implements OnTouchListener {
 private  ViewFlipper flipper;
 float xAtDown;
 float xAtUp;
 int count = 0;
 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
 
  flipper=(ViewFlipper)findViewById(R.id.viewFlipper1);
  flipper.setOnTouchListener(this); <--check
  
 }
    
 
 public boolean onTouch(View v, MotionEvent event) {
  if( v!=flipper) return false;
  if(event.getAction() == MotionEvent.ACTION_DOWN){
   xAtDown=event.getX();  
  }
  else if(event.getAction() == MotionEvent.ACTION_UP){
   xAtUp = event.getX();
   if(xAtDown > xAtUp){
    flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.animator.left_in)); <-에러 
    
flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.animator.left_out));<-에러 
    count++;
    if(count < 3)
     flipper.showNext();
    else{
     Toast.makeText(this, "마지막 페이지 입니다.", Toast.LENGTH_SHORT).show();
     count--;
    }
   }
   else if(xAtDown < xAtUp){
    flipper.setInAnimation(AnimationUtils.loadAnimation(this, R.animator.right_in)); <-에러 
    flipper.setOutAnimation(AnimationUtils.loadAnimation(this, R.animator.right_out)); <-에러 
    count--;
    if(count >- 1)
     flipper.showPrevious();
    else{
     Toast.makeText(this, "첫번째 페이지 입니다.", Toast.LENGTH_SHORT).show();
     count++;
   }
  }
 }
  return true;
}
}

위에서 에러가 생기는 부분이 발생이 한다면

R.java 를 수정해 주자

R.java

public final class R {
    public static final class animator <--폴더명 {
        public static final int left_in <--파일명 =0x7f040000;
        public static final int left_out<--파일명 =0x7f040001;
        public static final int right_in<--파일명 =0x7f040002;
        public static final int right_out<--파일명 =0x7f040003;
    }

.......

}

원래는 자동생성이 되어야 정상이지만 나같은 경우에는 생성이 되지 않아 강제적으로 만들어줌 핑크색의 숫자만 다른 코드와 겹치지 않게 수정하여 놔두면 자동으로 바뀌어져 있음 ㅡㅡ;;

이러면 일단은 정상적으로 작동이됨 필요에 따라 여러가지를 넣어서 사용이 가능함 ^^

728x90

관련글 더보기

댓글 영역