Slide Image อย่างง่ายๆ ด้วย ViewPager!

สวัสดีครับ วันนี้เราจะมาหัดทำสไลด์รูปในแอนดรอย์กันนะครับ โดยเรามีเทคนิดวิธีการเขียนโค้ดแบบง่ายๆครับ พร้อมเทคนิคการทำ Indicator ด้วย RadioButton เป็นเทคนิคที่น่าลองทำครับลองกันเลย
เปิดไฟล์ layout/activity_main.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:id="@+id/activity_guide"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.geekcreator.lenovo.bg.GuideActivity">


    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></android.support.v4.view.ViewPager>

    <RadioGroup
        android:gravity="center"
        android:layout_marginBottom="@dimen/activity_horizontal_margin"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/img1_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/img2_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/img3_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/img4_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/img5_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/img6_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
        <RadioButton
            android:id="@+id/img7_radio"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </RadioGroup>

</RelativeLayout>

เราสามารถ เพิ่ม RadioButton ตามจำนวนรูปที่เราต้องการเลยครับ
เพิ่มไฟล์ java/AndroidImageAdapter.java

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class AndroidImageAdapter extends PagerAdapter {
    Context mContext;

    AndroidImageAdapter(Context context) {
        this.mContext = context;
    }

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

    private int[] sliderImagesId = new int[]{
            R.drawable.t1, R.drawable.t2, R.drawable.t3,
            R.drawable.t4, R.drawable.t5, R.drawable.t7,R.drawable.t8
    };

    @Override
    public boolean isViewFromObject(View v, Object obj) {
        return v == ((ImageView) obj);
    }

    @Override
    public Object instantiateItem(ViewGroup container, int i) {
        ImageView mImageView = new ImageView(mContext);
        mImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
        mImageView.setImageResource(sliderImagesId[i]);
        ((ViewPager) container).addView(mImageView, 0);
        return mImageView;
    }

    @Override
    public void destroyItem(ViewGroup container, int i, Object obj) {
        ((ViewPager) container).removeView((ImageView) obj);
    }
}

t1-t8 คือชื่อของไฟล์รูปที่อยู่ในโฟลเดอร์ drawable
เปิดไฟล์ java/MainActivity.java

public class  MainActivity extends AppCompatActivity  {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ViewPager mViewPager = (ViewPager) findViewById(R.id.pager);
        AndroidImageAdapter adapterView = new AndroidImageAdapter(this);
        mViewPager.setAdapter(adapterView);

        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                RadioButtonClicked(position);
                
            }

            @Override
            public void onPageSelected(int position) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        
    }

    protected void RadioButtonClicked(int position){
        RadioButton img = (RadioButton)findViewById(R.id.img1_radio);
        RadioButton img1 = (RadioButton)findViewById(R.id.img2_radio);
        RadioButton img2 = (RadioButton)findViewById(R.id.img3_radio);
        RadioButton img3 = (RadioButton)findViewById(R.id.img4_radio);
        RadioButton img4 = (RadioButton)findViewById(R.id.img5_radio);
        RadioButton img5 = (RadioButton)findViewById(R.id.img6_radio);
        RadioButton img6 = (RadioButton)findViewById(R.id.img7_radio);
        switch (position){
            case 0: img.setChecked(true);
                    break;
            case 1: img1.setChecked(true);
                    break;
            case 2: img2.setChecked(true);
                break;
            case 3: img3.setChecked(true);
                break;
            case 4: img4.setChecked(true);
                break;
            case 5: img5.setChecked(true);
                break;
            case 6: img6.setChecked(true);
                break;
        }

    }

}

สำหรับวิธีการทำ Image Slide ด้วยวิธีง่ายๆ ก็ขอจบไว้เพียงเท่านี้แหละหากมีขอสงสัยก็สามารถคอมเมนต์ได้ที่โพสต์ด้านล่างเลยครับ สำหรับวันนี้สวัสดีครับ ตัวอย่างของแอปพลิเคชัน