Lập trình Android - AdapterViewFlipper

AdapterViewFlipper trong Android

Trong Android, AdapterViewFlipper được sử dụng để lật giữa các view giống như ViewFlipper Do đó, nó cung cấp cách thức để chuyển đổi từ một view hiện tại sang view khác.

ViewFlipper và AdapterViewFlipper đều là các lớp con của ViewAnimator. Sự khác biệt duy nhất là ViewFlipper. Trong ViewFlipper chúng ta thường khai báo các view trước. Còn AdapterViewFlipper chúng ta thường sử dụng Adapter để điền dữ liệu cho nó.


AdapterViewFlipper code trong XML:

<AdapterViewFlipper
android:id="@+id/simpleAdapterViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<!--   Add View’s Here -->
</AdapterViewFlipper >

Các phương thức quan trọng của AdapterViewFlipper

1. setAdapter(Adapter adapter): Phương thức được sử dụng cung cấp dữ liệu cho AdapterViewFlipper

Ví dụ sau chúng ta thiết lập adapter cho AdapterViewFlipper

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.setAdapter(adapter); // set adapter for AdapterViewFlipper. Here adapter is object of custom adapter

2. startFlipping(): Phương thứcnà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 

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFliper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.startFlipping(); // start the flipping of views

3. 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 

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.stopFlipping(); // stop the flipping of views

4. 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 4 giây cho khoảng thời gian chờ trước khi lật tới view tiếp theo.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.setFlipInterval(4000); // set 4 seconds for interval time

5. 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

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
simpleAdapterViewFlipper.setAutoStart(true); // set true value for auto start the flipping between views

6. 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

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewSwitcher); // get the reference of AdapterViewFlipper
Boolean isAutoStart = simpleAdapterViewFlipper.isAutoStart();  // checks whether the views are automatically start flipping or not.

7. 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

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewSwitcher); // get the reference of AdapterViewFlipper
Boolean isFlipping= simpleAdapterViewFlipper.isFlipping();  // check whether the views are flipping or not

9. showNext(): Phương thức này được sử dụng để hiển thị view kế tiếp trong AdapterViewFlipper

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 AdapterViewFlipper.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper

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
simpleAdapterViewFlipper.showNext();
}
});

10. showPrevious():  Phương thức này được sử dụng để hiển thị view trước trong AdapterViewFlipper.

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 AdapterViewFlipper.

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper

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
simpleAdapterViewFlippper.showPrevious();
}
});

Một số thuộc tính thường dùng của AdapterViewFlipper

1. android:id: Là thuộc tính duy nhất của AdapterViewFlipper.

<AdapterViewFlipper
android:id="@+id/simpleAdapterViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
</AdapterViewFlipper >

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

AdapterViewFlipper simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper

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

<AdapterViewFlipper
android:id="@+id/simpleAdapterViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:autoStart="true" > <!-- set Auto Start to true -->
<!--   Add View’s Here -->
</AdapterViewFlipper >

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.

<AdapterViewFlipper
android:id="@+id/simpleAdapterViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:flipInterval="3000> <!--  set interval time for flipping the views -->
<!--   Add View’s Here -->
</AdapterViewFlipper >

4. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của AdapterViewFlipper 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 .

<AdapterViewFlipper
android:id="@+id/simpleAdapterViewFlipper"
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 -- >

</AdapterViewFlipper >

5. android:background: Thuộc tính này thiết lập màu nền AdapterViewFlipper

Code sau chúng ta thiết lập màu nền, màu xanh cho AdapterViewFlipper

<AdapterViewFlipper
android:id="@+id/simpleViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#00f"> <!-- set blue color in the background of ViewFlipper -->

<!--   Add View’s Here -- >

</AdapterViewFlipper >

Thiết lập màu nền trong java class

dapterViewFlipper simpleAdapterViewFlipper=(AdapterViewFlipper)findViewById(R.id. simpleAdapterViewFlipper); // get reference of AdapterViewFlipper
simpleAdapterViewFlipper.setBackgroundColor(Color.BLUE);// set blue 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 AdapterViewFlipper và sau đó thiết lập các view vào trong AdapterViewFlipper. Trước tiên, chúng ta tạo 2 mảng, 1 mảng cho image, 1 mảng cho tên image. Tiếp theo, chúng ta thiết lập Adapter để điền dữ liệu cho các view. Cuối cùng, thiết lập thời gian chờ giữa các view. 

Bước 1: Tạo một project tên là AdapterViewFlipperFile->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:background="#fff"
android:orientation="vertical">

<AdapterViewFlipper
android:id="@+id/simpleAdapterViewFlipper"
android:layout_width="match_parent"
android:layout_height="wrap_content">

</AdapterViewFlipper>

</LinearLayout>

Bước 3: Bây giờ tạo một tập tin layout xml với tên  list_item.xml. 

Trong bước này chúng ta thêm một ImageView và một TextView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#fff"
android:gravity="center"
android:orientation="vertical">

<ImageView
android:id="@+id/fruitImage"
android:layout_width="wrap_content"
android:layout_height="150dp"
android:layout_gravity="center" />

<TextView
android:id="@+id/fruitName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_marginTop="2dp"
android:textColor="#000" />
</LinearLayout>

Bước 4: Tạo một class với tên CustomAdapter.java và sau đó thêm code trong bước này. Trong bước này chúng ta thiết lập dữ liệu trong view.

package hiepsiit.com.viewflipper;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class CustomAdapter extends BaseAdapter {
	Context context;
	int[] fruitImages;
	String[] fruitNames;
	LayoutInflater inflter;

	public CustomAdapter(Context applicationContext, String[] fruitNames, int[] fruitImages) {
	this.context = applicationContext;
	this.fruitImages = fruitImages;
	this.fruitNames = fruitNames;
	inflter = (LayoutInflater.from(applicationContext));

	}

	@Override
	public int getCount() {
	return fruitNames.length;
	}

	@Override
	public Object getItem(int position) {
	return null;
	}

	@Override
	public long getItemId(int position) {
	return 0;
	}

	@Override
	public View getView(int position, View view, ViewGroup parent) {
	view = inflter.inflate(R.layout.list_item, null);
	TextView fruitName = (TextView) view.findViewById(R.id.fruitName);
	ImageView fruitImage = (ImageView) view.findViewById(R.id.fruitImage);
	fruitName.setText(fruitNames[position]);
	fruitImage.setImageResource(fruitImages[position]);
	return view;
	}
}

Bước 5: Open   src -> package -> MainActivity.java

Trong bước này chúng ta khởi tạo AdapterViewFlipper. Tiếp theo, chúng ta tạo 2 mảng, 1 mảng cho image, 1 mảng cho tên image. Tiếp theo, chúng ta thiết lập Adapter để điền dữ liệu cho các view. Cuối cùng, thiết lập thời gian chờ giữa các view. 

package hiepsiit.com.viewflipper;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.AdapterViewFlipper;

public class MainActivity extends Activity {
	private AdapterViewFlipper simpleAdapterViewFlipper;
	int[] fruitImages = {R.drawable.apple, R.drawable.pineapple, R.drawable.litchi, R.drawable.mango, R.drawable.banana};     // array of images
	String[] fruitNames = {"Apple", "Pine Apple", "Litchi", "Mango", "Banana"};

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		simpleAdapterViewFlipper = (AdapterViewFlipper) findViewById(R.id.simpleAdapterViewFlipper); // get the reference of AdapterViewFlipper
		// Custom Adapter for setting the data in Views
		CustomAdapter customAdapter = new CustomAdapter(getApplicationContext(), fruitNames, fruitImages);
		simpleAdapterViewFlipper.setAdapter(customAdapter); // set adapter for AdapterViewFlipper
		// set interval time for flipping between views
		simpleAdapterViewFlipper.setFlipInterval(3000);
		// set auto start for flipping between views
		simpleAdapterViewFlipper.setAutoStart(true);
	}

	
}

Download ví dụ

Ứng dụng này được phát triển bởi adt bundleandroid 4.2 sử dụng minimum sdk 11  and target sdk 21.


Kết quả khi chạy ứng dụng: