안드로이드 뷰플리퍼(View Flipper) 사용하여 화면 슬라이드 구현하기



MainActivity.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
public class MainActivity extends AppCompatActivity implements ViewFlipperAction.ViewFlipperCallback {
 
    //뷰플리퍼
    ViewFlipper flipper;
    //인덱스
    List<ImageView> indexes;
 
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //UI
        flipper = (ViewFlipper)findViewById(R.id.flipper);
        ImageView index0 = (ImageView)findViewById(R.id.imgIndex0);
        ImageView index1 = (ImageView)findViewById(R.id.imgIndex1);
        ImageView index2 = (ImageView)findViewById(R.id.imgIndex2);
 
        //인덱스리스트
        indexes = new ArrayList<>();
        indexes.add(index0);
        indexes.add(index1);
        indexes.add(index2);
 
        //xml을 inflate 하여 flipper view에 추가하기
        //inflate
        LayoutInflater inflater = (LayoutInflater)getSystemService(LAYOUT_INFLATER_SERVICE);
        View view1 = inflater.inflate(R.layout.viewflipper1, flipper, false);
        View view2 = inflater.inflate(R.layout.viewflipper2, flipper, false);
        View view3 = inflater.inflate(R.layout.viewflipper3, flipper, false);
        //inflate 한 view 추가
        flipper.addView(view1);
        flipper.addView(view2);
        flipper.addView(view3);
 
        //리스너설정 - 좌우 터치시 화면넘어가기
        flipper.setOnTouchListener(new ViewFlipperAction(this, flipper));
    }
 
    //인덱스 업데이트
    @Override
    public void onFlipperActionCallback(int position) {
        Log.d("ddd", ""+position);
        for(int i=0; i<indexes.size(); i++){
            ImageView index = indexes.get(i);
            //현재화면의 인덱스 위치면 녹색
            if(i == position){
                index.setImageResource(R.drawable.green);
            }
            //그외
            else{
                index.setImageResource(R.drawable.white);
            }
        }
    }
}
 
cs



activity_main.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <LinearLayout
        android:gravity="center"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/imgIndex0"
            android:src="@drawable/white"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/imgIndex1"
            android:src="@drawable/white"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <ImageView
            android:id="@+id/imgIndex2"
            android:src="@drawable/white"
            android:padding="10dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/buttonLayout"
        android:orientation="horizontal"
        android:layout_gravity="center_horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ViewFlipper
            android:id="@+id/flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
 
</LinearLayout>
 
cs



ViewFlipperAction.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
public class ViewFlipperAction implements View.OnTouchListener {
 
    Context context;
 
    //전체화면개수
    int countIndexes;
    //현재화면인덱스
    int currentIndex;
    //터치시작 x좌표
    float downX;
    //터치끝 x좌표
    float upX;
    ViewFlipper flipper;
 
    //
    ViewFlipperCallback indexCallback;
 
 
    //인터페이스 - 탭 클릭시 이미지 변경하기 위한 인터페이스
    //여러 액티비티가 fragment를 호출하여도 동일한 인터페이스를 구현하도록 한다
    public static interface ViewFlipperCallback{
        public void onFlipperActionCallback(int position);
    }
 
    public ViewFlipperAction(Context context, ViewFlipper flipper){
        this.context = context;
        this.flipper = flipper;
 
        if(context instanceof ViewFlipperCallback){
            indexCallback = (ViewFlipperCallback)context;
        }
 
        currentIndex = 0;
        downX = 0;
        upX = 0;
        countIndexes = flipper.getChildCount();
 
        //인덱스 업데이트
        indexCallback.onFlipperActionCallback(currentIndex);
    }
 
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        //터치시작
        if(event.getAction()==MotionEvent.ACTION_DOWN){
            downX = event.getX();
        }
        //터치종료
        else if(event.getAction()==MotionEvent.ACTION_UP){
            upX = event.getX();
 
            //왼쪽 -> 오른쪽
            if(upX < downX){
                //애니메이션
                flipper.setInAnimation(AnimationUtils.loadAnimation(context, R.anim.push_left_in));
                flipper.setOutAnimation(AnimationUtils.loadAnimation(context, R.anim.push_left_out));
 
                //인덱스체크 - 마지막화면이면 동작없음
                if(currentIndex < (countIndexes-1)){
                    flipper.showNext();
 
                    currentIndex++;
                    //인덱스 업데이트
                    indexCallback.onFlipperActionCallback(currentIndex);
                }
            }
            //오른쪽 -> 왼쪽
            else if(upX > downX){
                //애니메이션 설정
                flipper.setInAnimation(AnimationUtils.loadAnimation(context, R.anim.push_right_in));
                flipper.setOutAnimation(AnimationUtils.loadAnimation(context, R.anim.push_right_out));
 
                //인덱스체크 - 첫번째화면이면 동작없음
                if(currentIndex > 0){
                    flipper.showPrevious();
 
                    currentIndex--;
                    //인덱스 업데이트
                    indexCallback.onFlipperActionCallback(currentIndex);
                }
            }
        }
 
        return true;
    }
}
 
cs



screenview.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <!-- indicator : 몇번째 화면인지 나타냄 -->
    <FrameLayout
        android:background="#00f"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <LinearLayout
            android:gravity="center"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ImageView
                android:src="@drawable/white"
                android:padding="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@drawable/white"
                android:padding="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <ImageView
                android:src="@drawable/white"
                android:padding="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </FrameLayout>
 
    <LinearLayout
        android:id="@+id/buttonLayout"
        android:orientation="horizontal"
        android:layout_gravity="center_horizontal"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">
        <ViewFlipper
            android:id="@+id/flipper"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </LinearLayout>
 
</FrameLayout>
cs



viewflipper1.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#f00"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:text="첫번째 View Filpper"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</LinearLayout>
cs



viewflipper2.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#0f0"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:text="두번째 View Filpper"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</LinearLayout>
cs



viewflipper3.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:background="#00f"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <TextView
        android:text="세번째 View Filpper"
        android:textSize="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
 
</LinearLayout>
cs



anim폴더 > push_left_in.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<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>
cs



anim폴더 > push_left_out.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<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>
cs



anim.폴더 > push_right_in.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<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>
cs



anim폴더 > push_right_out.xml

1
2
3
4
5
6
7
<?xml version="1.0" encoding="utf-8"?>
<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>
cs



결과

  


저작자표시

'IT > - 프로그래밍' 카테고리의 다른 글

안드로이드 앱버전코드, 앱버전명 가져오기  (0) 2016.08.23
안드로이드 앱바(Appbar)에 툴바(Toolbar) , 탭(Tab)추가하기  (2) 2016.08.22
반응형웹 미디어쿼리 예제  (0) 2016.08.21
반응형웹 멀티미디어 요소에 가변너비 적용하기  (0) 2016.08.21
반응형웹 em, rem, vw, vh, vmin, vmax  (0) 2016.08.21

+ Recent posts

티스토리툴바