ViewFlipper trong Android
ViewFlipper chuyển đổi giữa 2 view hay nhiều view, do đó, nó cung cấp cách thức để chuyển đổi từ một view hiện tại sang view khác.
Trong Android, ViewFlipper là một phân lớp con của lớp ViewAnimator được sử dụng để chuyển đổi giữa các view. Đó là một phần tiện ích giúp chúng ta chuyển đổi giữa các view.
ViewFlipper code trong XML:
<ViewFlipper android:id="@+id/simpleViewFlipper" android:layout_width="match_parent" android:layout_height="wrap_content"> <!-- Add View's Here Which You Want to Flip -- > <!--We created two textview which will Flip--> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="First TextView" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="Second TextView" /> </ ViewFlipper > Các bước tạo ViewFlipper
Bước 1: Khởi tạo ViewFlipper bằng phương thức findViewById(), hoặc bạn có thể tạo động .
Bước 2: Thiết lập view để hiển thị ảnh bằng phương thức switcherid.setFactory()
Bước 3: Thiết lập ảnh động dạng đưa vào dần dùng phương thức switcherid.setInAnimation()
Bước 4: Thiết lập ảnh động dạng làm mờ dần dùng phương thức switcherid.setOutAnimation()
Các phương thức quan trọng của ViewFlipper
1. startFlipping(): Phương thức này được sử dụng để bắt đầu một bộ đếm thời gian để xoay vòng qua các view khác.
Ví dụ sau chúng ta bật bộ đếm thời gian
ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper simpleViewFlipper.startFlipping(); // start the flipping of views 2. stopFlipping(): Phương thức này được sử dụng để dừng bộ đếm thời gian có nghĩa là không có lật nữa.
Ví dụ sau chúng ta dừng bộ đếm thời gian
ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper simpleViewFlipper.stopFlipping(); // stop the flipping of views 3. setFlipInterval(int milliseconds): Phương thức này được sử dụng để đặt thời gian bằng mili giây trong khoảng thời gian chờ đợi trước khi lật sang view tiếp theo.
Ví dụ sau chúng ta thiết lập 1 giây cho khoảng thời gian chờ trước khi lật tới view tiếp theo.
ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper simpleViewFlipper.setFlipInterval(1000); //set 1 seconds for interval time 
4. setAutoStart(boolean autoStart): Phương thức này được sử dụng để tự động bắt đầu lật giữa các view. Phương pháp này tự động gọi phương thức startFlipping () để bắt đầu lật khi nó được gắn vào một window.
Ví dụ sau chúng ta thiết lập giá trị true để tự động bắt đầu lật các views
ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper simpleViewFlipper.setAutoStart(true); // set true value for auto start the flipping between views 5. isAutoStart(): Phương thức này được sử dụng để kiểm tra xem view có tự động lật hay không. Phương thức này trả về giá trị true hoặc false.Nếu trả về giá trị true nếu view tự động gọi phương thức startFlipping().
Ví dụ sau chúng ta kiểm tra xem view có tự động lật hay không
ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper Boolean isAutoStart = simpleViewFlipper.isAutoStart(); // checks whether the views are automatically start flipping or not. 6. isFlipping(): Phương thức này được sử dụng để kiểm tra xem các view có đang lật hay không.Phương thức này trả về giá trị true hoặc false. Nếu trả về true nếu các view đang lật, ngược lại thì không.
Ví dụ sau chúng ta kiểm tra xem các view hiện tại có đang lật hay không
ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper Boolean isFlipping= simpleViewFlipper.isFlipping(); // check whether the views are flipping or not 7. showNext(): Phương thức này được sử dụng để hiển thị view kế tiếp trong ViewFlipper.
Ví dụ sau chúng ta thiết lập sự kiện cho button để gọi phương thức showNext() để hiển thị view kế tiếp trong ViewFlipper
ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper Button btnNext=(Button) findViewById(R.id.buttonNext); // get the reference of Button // set Click event on next button btnNext.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub // show the next view of ViewFlipper simpleViewFlipper.showNext(); } }); 8. showPrevious(): Phương thức này được sử dụng để hiển thị view trước trong ViewFlipper.
Ví dụ sau chúng ta thiết lập sự kiện cho button để gọi phương thức showPrevious() để hiển thị view trước trong ViewFlipper
ViewFlipper simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper Button btnPrevious=(Button) findViewById(R.id.buttonPrevious); // get the reference of Button // set Click event on next button btnPrevious.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub // show the next view of ViewFlipper simpleViewFlippper.showPrevious(); } }); 9. loadAnimation(Context context, int id): Phương thức này được sử dụng khi chúng ta cần tạo ra một đối tượng view động.
Ví dụ sau chúng ta tạo ra một đối tượng lớp Animation và nạp một view động bằng cách sử dụng lớp AnimationUtils
// Declare in and out animations and loading them using AnimationUtils class Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left); Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right); 10. setInAnimation(Animation inAnimation): Phương thức này thường được sử dụng để thiết lập một view động xuất hiện ở giữa màn hình.
Ví dụ sau chúng ta tạo ra một đối tượng lớp Animation và nạp một view động bằng cách sử dụng lớp AnimationUtils, sau đó thiết lập Animation lên ViewFlipper.
ViewFlipper simpleViewFlipper =(ViewFlipper)findViewById(R.id.simpleViewFlipper); // initiate a ViewFlipper Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); // load an animation simpleViewFlipper.setInAnimation(in); // set in Animation for ViewFlipper 11. setOutAnimation(Animation outAnimation): Phương thức đối ngược với phương thức setInAnimation().
Ví dụ sau chúng ta tạo ra một đối tượng lớp Animation và nạp một view động bằng cách sử dụng lớp AnimationUtils, sau đó thiết lập view mờ dần lên ViewFlipper.
ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper); // get reference of ViewFlipper Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); // load an animation simpleViewFlipper.setOutAnimation(out); // set out Animation for ViewSwitcher 12. addView(View child): Phương thức này được sử dụng để thêm một view tại thời điểm chạy trong ViewFlipper.
Ví dụ sau chúng ta tạo một view mới ImageView rồi sau đó thêm nó vào ViewFlipper
ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper);// get reference of ViewFlipper ImageView imageView = new ImageView(this);// create a ImageView imageView.setImageResource(R.drawable.image);// set resource image in ImageView simpleViewSwitcher.addView(imageView);// add the ImageView in ViewFlipper Một số thuộc tính thường dùng của ViewFlipper
1. android:id: Là thuộc tính duy nhất của ViewFlipper.
< ViewFlipper android:id="@+id/simpleViewFlipper" android:layout_width="match_parent" android:layout_height="wrap_content" > <!-- Add View's Here -- > </ ViewFlipper > Dựa vào Id ta sẽ lấy được control theo đúng Id này, xem code bên dưới để biết cách lấy control theo Id
ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper);// get reference of ViewFlipper 2. android:autoStart: Thuộc tính này được sử dụng bắt đầu lật các view. Chúng ta cũng có thể gọi chức năng trong java class bằng phương thức setAutoStart().
Ví dụ sau chúng ta thiết lập giá trị true cho thuộc tính autoStart
<ViewFlipper android:id="@+id/simpleViewFlipper" android:layout_width="match_parent" android:layout_height="wrap_content" android:autoStart="true"> <!—set auto start property to true--> <!-- Add View's Here -- > </ViewFlipper> 3. android:flipInterval: Thuộc tính này được sử dụng để đặt thời gian bằng mili giây trong khoảng thời gian chờ đợi trước khi lật sang view tiếp theo.
Ví dụ sau chúng ta thiết lập 3 giây cho khoảng thời gian chờ trước khi lật tới view tiếp theo.
<ViewFlipper android:id="@+id/ simpleViewFlipper" android:layout_width="match_parent" android:layout_height="wrap_content" android:flipInterval="3000"> <!-- set interval time for flipping the views --> <!--Add View's Here--> </ViewFlipper> 4. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của ViewFlipper với nội dung nó chứa: left, right, top or bottom. Cũng ví dụ trên bây giờ chúng ta xác định padding=10dp từ mọi phía cho .
<ViewFlipper android:id="@+id/simpleViewFlipper" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp"> <!-- set 10 dp padding from all the sides of ViewFlipper --> <!-- Add View's Here -- > </ViewFlipper> 5. android:background: Thuộc tính này thiết lập màu nền ViewFlipper
Code sau chúng ta thiết lập màu nền, màu đỏ cho ViewFlipper
<ViewFlipper android:id="@+id/simpleViewFlipper" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#f00"> <!-- set red color in the background of ViewFlipper --> <!-- Add View's Here -- > </ViewFlipper> Thiết lập màu nền trong java class
ViewFlipper simpleViewFlipper=(ViewFlipper)findViewById(R.id. simpleViewFlipper); // get reference of ViewFlipper simpleViewFlipper.setBackgroundColor(Color.RED);// set red color in the background of ImageFlipper. Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có một ViewFlipper. Trong ViewFlipper gồm có 3 view: view thứ 1 chứa ImageView, view thứ 2 chứa một Layout gồm có 2 TextView, view thứ 3 chứa một Layout gồm có 2 Button. Tiến hành tạo project, vào thư mục res /layout -> activity_main.xml thiết kế giao diện sau:
Bước 1: Tạo một project tên là ViewFlipper: File->New->Android Application Project điền các thông tin ->Next ->Finish
Bước 2: Mở res -> layout -> xml (hoặc) activity_main.xml và thêm code trong Linear Layout.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <!-- ViewSwitcher with three views first is ImageView, second is a layout in which we have two TextView's and third is a layout in which we have two Button's --> <ViewFlipper android:id="@+id/simpleViewFlipper" android:layout_width="match_parent" android:layout_height="wrap_content"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/cat" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="First TextView" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="Second TextView" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical"> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="First Button" /> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="20dp" android:text="Second Button" /> </LinearLayout> </ViewFlipper> <Button android:id="@+id/buttonNext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:layout_marginTop="150dp" android:background="#005" android:text="NEXT" android:textColor="#fff" android:textStyle="bold" /> </LinearLayout> Bước 3: Mở app -> src ->MainActivity.java
Trong bước này chúng ta khởi tạo ViewFlipper và Button. Trước tiên, chúng ta load và thiết lập các thanh trượt bên trái và bên phải và cuối cùng thiết lập sự kiện cho Button Khi người sử dụng click vào button "NEXT" chuyển đổi giữa 2 View
package hiepsiit.com.viewflipper; import android.app.Activity; import android.os.Bundle; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.ViewFlipper; public class MainActivity extends Activity { private ViewFlipper simpleViewFlipper; Button btnNext; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // get The references of Button and ViewFlipper btnNext = (Button) findViewById(R.id.buttonNext); simpleViewFlipper = (ViewFlipper) findViewById(R.id.simpleViewFlipper); // get the reference of ViewFlipper // Declare in and out animations and load them using AnimationUtils class Animation in = AnimationUtils.loadAnimation(this, android.R.anim.slide_in_left); Animation out = AnimationUtils.loadAnimation(this, android.R.anim.slide_out_right); // set the animation type to ViewFlipper simpleViewFlipper.setInAnimation(in); simpleViewFlipper.setOutAnimation(out); // ClickListener for NEXT button // When clicked on Button ViewFlipper will switch between views // The current view will go out and next view will come in with specified animation btnNext.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub // show the next view of ViewFlipper simpleViewFlipper.showNext(); } }); } } Ứng dụng này được phát triển bởi adt bundle, android 4.2 sử dụng minimum sdk 11 and target sdk 21.
Kết quả khi chạy ứng dụng:
Cập nhật công nghệ từ Youtube tại link: https://www.youtube.com/channel/UCOxeYcvZPGf-mGLYSl_1LuA/videos
Để tham gia khóa học công nghệ truy cập link: http://thuvien.hocviendaotao.com
Mọi hỗ trợ về công nghệ email: dinhanhtuan68@gmail.com
