Hướng dẫn sử dụng Android ImageSwitcher

Xem thêm các chuyên mục:

Nhóm thành viên của o7planning đã xây dựng một website tuyệt vời và miễn phí giúp mọi người học tiếng Anh, học từ vựng dễ dàng hơn. Hãy truy cập để học tiếng Anh ngay bây giờ:

1- Tổng quan về ImageSwitcher
2- Ví dụ với Android ImageSwitcher

1- Tổng quan về ImageSwitcher

Đây là hình ảnh một ứng dụng sử dụng ImageSwitcher:
  • TODO: Viết chém gió thêm.

2- Ví dụ với Android ImageSwitcher

Tạo project có tên AndroidImageSwitcher:
Bạn cần một vài ảnh tham gia vào trong ví dụ:
image1.png
image2.png
image3.png
Copy các ảnh trên vào thư mục drawable.
Giao diện ứng dụng:
main_actvity.xml 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:paddingBottom="@dimen/activity_vertical_margin"
   android:paddingLeft="@dimen/activity_horizontal_margin"
   android:paddingRight="@dimen/activity_horizontal_margin"
   android:paddingTop="@dimen/activity_vertical_margin"
   tools:context=".MainActivity">

   <ImageSwitcher
       android:layout_width="match_parent"
       android:layout_height="250dp"
       android:id="@+id/imageSwitcher"
       android:layout_alignParentTop="true"
       android:layout_centerHorizontal="true" />

   <Button
       style="?android:attr/buttonStyleSmall"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Previous"
       android:id="@+id/button_previous"
       android:layout_marginLeft="94dp"
       android:layout_marginStart="94dp"
       android:layout_alignParentBottom="true"
       android:layout_alignParentLeft="true"
       android:layout_alignParentStart="true" />

   <Button
       style="?android:attr/buttonStyleSmall"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Next"
       android:id="@+id/button_next"
       android:layout_alignTop="@+id/button_previous"
       android:layout_toRightOf="@+id/button_previous"
       android:layout_toEndOf="@+id/button_previous" />
   
</RelativeLayout>
MainActivity.java 
package org.o7planning.androidimageswitcher;

import android.app.ActionBar.LayoutParams;
import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.util.Log;
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.Toast;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity {

    private ImageSwitcher imageSwitcher;
    private Button buttonPrevious;
    private Button buttonNext;

    private final String[] imageNames={"image1", "image2", "image3"};
    private int currentIndex;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        buttonPrevious = (Button) findViewById(R.id.button_previous);
        buttonNext = (Button) findViewById(R.id.button_next);

        imageSwitcher = (ImageSwitcher) findViewById(R.id.imageSwitcher);

        // Hoạt hình khi chuyển sang ảnh khác.
        Animation out= AnimationUtils.loadAnimation(this, android.R.anim.fade_out);
        Animation in= AnimationUtils.loadAnimation(this, android.R.anim.fade_in);

        // Sét đặt hiệu ứng hoạt hình khi chuyển ảnh.
        imageSwitcher.setInAnimation(in);
        imageSwitcher.setOutAnimation(out);

        //
        imageSwitcher.setFactory(new ViewFactory() {

            // Trả về View để hiển thị ảnh.
            // (Thông thường sử dung ImageView).
            @Override
            public View makeView() {
                ImageView imageView = new ImageView(getApplicationContext());

                imageView.setBackgroundColor(Color.LTGRAY);
                imageView.setScaleType(ImageView.ScaleType.CENTER);

                ImageSwitcher.LayoutParams params= new ImageSwitcher.LayoutParams(
                        LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
                imageView.setLayoutParams(params);
                return imageView;
            }
        });

        this.currentIndex=0;
        this.showImage(this.currentIndex);

        buttonPrevious.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                previousImage();
            }
        });

        buttonNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                nextImage();
            }
        });
    }


    private void previousImage()  {
        if(currentIndex > 0) {
            currentIndex--;
        }else  {
            Toast.makeText(getApplicationContext(), "No Previous Image", Toast.LENGTH_SHORT).show();
            return;
        }
        this.showImage(currentIndex);
    }

    private void nextImage()  {
        if(currentIndex < this.imageNames.length-1) {
            currentIndex++;
        }else  {
            Toast.makeText(getApplicationContext(), "No Next Image", Toast.LENGTH_SHORT).show();
            return;
        }
        this.showImage(currentIndex);
    }


    private void showImage(int imgIndex)  {
        String imageName= this.imageNames[imgIndex];

        int resId= getDrawableResIdByName(imageName);
        if(resId!=  0) {
            this.imageSwitcher.setImageResource(resId);
        }
    }
 
    // Tìm ID của Image ứng với tên của ảnh (Trong thư mục mipmap).
    public int getDrawableResIdByName(String resName)  {
        String pkgName = this.getPackageName();
 
        // Trả về 0 nếu không tìm thấy.
        int resID = this.getResources().getIdentifier(resName , "drawable", pkgName);
        Log.i("MyLog", "Res Name: " + resName + "==> Res ID = " + resID);
        return resID;
    }

}
Chạy ứng dụng:

Xem thêm các chuyên mục: