ImageSwitcher trong Android
ImageSwitcher widget thường sử dụng làm hình động từ nhiều hình ảnh khác nhau. Để sử dụng chuyển đổi hình ảnh, chúng ta cần phải khai báo thành phần ImageSwitcher trong tệp .xml. ImageSwitcher được thêm vào từ phiên bản 16 trở lên.
ImageSwitcher code trong XML:
<ImageSwitcher android:id="@+id/simpleImageSwitcher" android:layout_width="match_parent" android:layout_height="wrap_content"/> Các bước tạo ImageSwitcher
Bước 1: Khởi tạo ImageSwitcher 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 ImageSwitcher
Sau đây là các phương thức quan trọng thường được sử dụng để quản lý ImageSwitcher
1. setFactory(ViewFactory factory): Phương thức này dùng tạo mới một View cho ImageSwitcher. Bằng cách dùng phương thức này chúng ta tạo mới một View mới và thay thế View cũ.
Ví dụ sau sử dụng phương thức setFactory để tạo View mới
ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // get reference of ImageSwitcher // Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked imageSwitcher.setFactory(new ViewSwitcher.ViewFactory() { public View makeView() { // TODO Auto-generated method stub // Create a new ImageView and set it's properties ImageView imageView = new ImageView(getApplicationContext()); imageView.setScaleType(ImageView.ScaleType.FIT_CENTER); imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT)); return imageView; } }); 2. setImageDrawable(Drawable drawable): Phương thức này sử dụng để thiết lập một image trong ImageSwitcher. Tham số được truyền là tên Image được lấy từ thư mục Drawable.
Ví dụ sau thiết lập image cho ImageSwitcher sử dụng phương thức setImageDrawable
ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // initiate a ImageSwitcher simpleImageSwitcher.setImageDrawable(getResources().getDrawable(R.drawable.ic_launcher)); // set drawable image in ImageSwitcher 
3. setImageResource(int resid): Phương thức này cũng được sử dụng để thiết lập image cho ImageSwitcher. Image được truyền dưới dạng là id số nguyên.
ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // initiate a ImageSwitcher simpleImageSwitcher.setImageResource(R.drawable.ic_launcher); // set image resource in ImageSwitcher
4. setImageURI(Uri uri): Phương thức này cũng được sử dụng để thiết lập image cho ImageSwitcher. Image được truyền dưới dạng là id số nguyên URI.
Ví dụ sau chúng ta thiết lập image cho ImageSwitcher từ thư mục raw sử dụng Uri.
Trước khi sử dụng code sau chúng ta tạo một thư mục tên raw trong res và lưu một hình image1 trong thư mục raw
ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // get reference of ImageSwitcher simpleImageSwitcher.setImageURI(Uri.parse("android.resource://" + getPackageName() + "/" + R.raw.image1)); // set Image in ImageSwitcher from raw folder using Uri 5. 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 hình ảnh động.
Ví dụ sau chúng ta tạo ra một đối tượng lớp Animation và nạp một hình ảnh động bằng cách sử dụng lớp AnimationUtils
// load an animation by 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); 6. setInAnimation(Animation inAnimation): Phương thức này thường được sử dụng để thiết lập một hình ảnh độ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 hình ảnh động bằng cách sử dụng lớp AnimationUtils, sau đó thiết lập Animation lên ImageSwitcher
ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // initiate a ImageSwitcher Animation in = AnimationUtils.loadAnimation(this,android.R.anim.slide_in_left); // load an animation simpleImageSwitcher.setInAnimation(in); // set in Animation for ImageSwitcher 
7. 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 hình ảnh động bằng cách sử dụng lớp AnimationUtils, sau đó thiết lập hình ảnh mờ dần lên ImageSwitcher.
ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // get reference of ImageSwitcher Animation out = AnimationUtils.loadAnimation(this,android.R.anim.slide_out_right); // load an animation simpleImageSwitcher.setOutAnimation(out); // set out Animation for ImageSwitcher 
Một số thuộc tính thường dùng của ImageSwitcher
1. android:id: Là thuộc tính duy nhất của ImageSwitcher.
<ImageSwitcher android:id="@+id/simpleImageSwitcher" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <!-- id of ImageSwitcher that is used to uniquely identify it --> 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:
ImageSwitcher simpleImageSwitcher=(ImageSwitcher)findViewById(R.id. simpleImageSwitcher); // initiate a ImageSwitcher 2. android:padding: Thuộc tính này xác định khoảng cách từ đường viền của ImageSwitcher 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=40dp từ mọi phía cho ImageSwitcher.
<ImageSwitcher android:id="@+id/imageSwitcher" android:layout_width="match_parent" android:layout_height="200dp" android:layout_gravity="center_horizontal" android:padding="40dp" /> <!-- set 40 dp padding from all the sides of TextSwitcher --> 3. android:background: Thuộc tính này thiết lập màu nền ImageSwitcher
Code sau chúng ta thiết lập màu nền, màu đỏ cho ImageSwitcher
<ImageSwitcher android:id="@+id/imageSwitcher" android:layout_width="match_parent" android:layout_height="200dp" android:layout_gravity="center_horizontal" android:background="#000" /> <!-- set black color in the background of TextSwitcher --> Thiết lập màu nền trong java class
ImageSwitcher imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher); // get the reference of ImageSwitcher. imageSwitcher.setBackgroundColor(Color.BLACK); // set black color in the background of ImageSwitcher. 
Ví dụ: Trong ví dụ này chúng ta sẽ làm ứng dụng gồm có một ImageSwitcher, một Button.Thiết lập sự kiện cho Button, khi người sử dụng click vào Button sẽ chuyển qua hình khác. 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à ImageSwitcher: 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, chúng ta sẽ tạo các đối tượng ImageSwitcher và Button 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"> <ImageSwitcher android:id="@+id/simpleImageSwitcher" android:layout_width="match_parent" android:layout_height="200dp" android:layout_gravity="center_horizontal" android:layout_marginTop="50dp" /> <Button android:id="@+id/buttonNext" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="150dp" android:layout_gravity="center" android:background="#050" android:textColor="#fff" android:textStyle="bold" android:text="NEXT" /> </LinearLayout> Bước 3: Mở app -> src ->MainActivity.java
Trong bước này chúng ta khởi tạo ImageSwitcher và Button. Chúng ta cũng khai báo một mảng id để chứa các image, đồng thơi tạo mộ ImageView động bằng phương thức setFactory và sau đó, load và thiết lập các thanh trượt bên trái và bên phải cùa hình động và cuối cùng thiết image vào trong ImageSwitcher bằng phương thức setImageResource. Khi người sử dụng click vào button "NEXT" ImageSwitcher sẽ chuyển từ image hiện tại sang image kế tiếp.
package com.example.imageswitcher; 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.ImageSwitcher; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.ViewSwitcher; public class MainActivity extends Activity { private ImageSwitcher simpleImageSwitcher; Button btnNext; // Array of Image IDs to Show In ImageSwitcher int imageIds[] = {R.drawable.image1, R.drawable.images2, R.drawable.image3, R.drawable.images4, R.drawable.images5}; int count = imageIds.length; // to keep current Index of ImageID array int currentIndex = -1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // get The references of Button and ImageSwitcher btnNext = (Button) findViewById(R.id.buttonNext); simpleImageSwitcher = (ImageSwitcher) findViewById(R.id.simpleImageSwitcher); // Set the ViewFactory of the ImageSwitcher that will create ImageView object when asked simpleImageSwitcher.setFactory(new ViewSwitcher.ViewFactory() { public View makeView() { // TODO Auto-generated method stub // Create a new ImageView and set it's properties ImageView imageView = new ImageView(getApplicationContext()); // set Scale type of ImageView to Fit Center imageView.setScaleType(ImageView.ScaleType.FIT_CENTER); // set the Height And Width of ImageView To FIll PARENT imageView.setLayoutParams(new ImageSwitcher.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT)); return imageView; } }); // 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 ImageSwitcher simpleImageSwitcher.setInAnimation(in); simpleImageSwitcher.setOutAnimation(out); // ClickListener for NEXT button // When clicked on Button ImageSwitcher will switch between Images // The current Image will go OUT and next Image will come in with specified animation btnNext.setOnClickListener(new View.OnClickListener() { public void onClick(View v) { // TODO Auto-generated method stub currentIndex++; // Check If index reaches maximum then reset it if (currentIndex == count) currentIndex = 0; simpleImageSwitcher.setImageResource(imageIds[currentIndex]); // set the image in ImageSwitcher } }); } } Ứ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 và kết quả khi click vào "NEXT":
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
