Bài viết về VIEWFLIPPER bằng trượt ngón tay
Chào các bạn!!!
Tiếp tục mình xin hướng dẫn 1 bài cơ bản về Android. Bài viết về VIEWFLIPPER bằng trượt ngón tay. 1 bài viết rất cơ bản và đơn giản nhưng rất hữu ích đối với các bạn. Giờ chúng ta hãy cùng nhau tìm hiểu về nó:
1. Tạo project.
2. Tạo 3 layout đặt tên: layout_first.xml, layout_second.xml, layout_third.xml.
3. Trên 3 layout thiết kế giao diện tùy ý(chẳng hạn như mỗi layout kéo 1 hình ảnh khác nhau vào), còn layout Activity_main.xml ta kéo 1 ViewFlipper vào(ViewFlipper dùng để hiển thị các 3 layout còn lại chúng ta đã tạo trên).
4. Trong thư mục “res” tạo thư mục con tên “anim”.
5. Tạo file tên “go_next_in.xml” trong thư mục “anim” kiểu animation gốc là set và code như sau:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator = "@android:anim/decelerate_interpolator">
<translate android:fromXDelta="100%" android:toXDelta="0%"
android:duration="3000"/>
</set>
6. Tạo file tên “go_next_out.xml” trong thư mục “anim” kiểu animation gốc là set và code như sau:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<translate android:fromXDelta="0%" android:toXDelta="-100%"
android:duration="3000"/>
</set>
7. Tạo file tên “go_prev_in.xml” trong thư mục “anim” kiểu animation gốc là set và code như sau:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<translate android:fromXDelta="-100%" android:toXDelta="0%"
android:duration="3000"/>
</set>
8. Tạo file tên “go_prev_out.xml” trong thư mục “anim” kiểu animation gốc là set và code như sau:
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/decelerate_interpolator">
<translate android:fromXDelta="0%" android:toXDelta="100%"
android:duration="3000"/>
</set>
9. trong file java ta khởi tạo như sau:
ViewFlipper fv; float tuvitri, denvitri;
10. trong hàm onCreate viết code như sau:
fv = (ViewFlipper) findViewById(R.id.viewFlipper1);
LayoutInflater inflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
int layouts[] = new int[]
{
R.layout.layout_first,
R.layout.layout_second,
R.layout.layout_third
};
for(int layout: layouts)
fv.addView(inflater.inflate(layout,null));
LayoutInflater: một class dùng để convert control/widget từ xml sang instance để sử dụng trong code. Chiếc cầu nối giữa XML và source code của bạn. Tiếp theo ta tạo 1 mảng layouts chứa 3 layout đã thiết kế ở bước số 2. Cuối cùng chúng ta tạo ra vòng for để xuất các layout đó ra màn hình thông qua ViewFlipper
11. Override hàm ontouch rồi viết code như sau:
@Override
public boolean onTouchEvent(MotionEvent event)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
tuvitri = event.getX();
break;
case MotionEvent.ACTION_UP:
denvitri = event.getX();
if(tuvitri > denvitri)
{
fv.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.go_next_in));
fv.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.go_next_out));
fv.showNext();
}
else if(tuvitri < denvitri)
{
fv.setInAnimation(AnimationUtils.loadAnimation(this, R.anim.go_prev_in));
fv.setOutAnimation(AnimationUtils.loadAnimation(this, R.anim.go_prev_out));
fv.showPrevious();
}
default:
break;
}
return super.onTouchEvent(event);
}
trong hàm onTouchEvent tạo switch-case dùng để bắt các sự kiện khi chạm vào màn hình đến lúc khi không chạm vào nữa rồi lấy 2 tọa độ so sánh nếu tọa độ ban đầu lớn hơn tọa độ lúc sau thì cho layout di chuyển từ trái sang phải và ngược lại. Nếu tọa độ ban đầu lớn hơn tọa độ lúc sau thì bắt đầu gọi các file layout mà ta đã viết code ở trên(các code này chủ yếu sử lý cho các layout giao diện di chuyển như thế nào).
Vậy là xong rồi đó.