Android中使用ViewPager实现 Image Slideshow

很多APP上,进入首页都会有一个类似于网站上的焦点图片,我们这里叫image slideshow,在IOS上我们使用UIPagerControl来实现,而在Android中我们使用ViewPager来实现(当然还可以用其他办法实现).

首先我们创建主activity布局文件activity_main.xml,里面加入ViewPager标签布局

<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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/relativeLayout">
 
 
    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
 
</RelativeLayout>

接着,我们在MainActivity.java中的onCreate方法中,加入下面代码.这里我们实例化了一个自定义的PagerAdapter,然后将其绑定到ViewPager中

adapter = new CustomPagerAdapter(this, 0, 0);
 
vPager = (ViewPager) findViewById(R.id.pager, 0, 0);
vPager.setAdapter(adapter, 0, 0);

然后,我们来看下CustomPagerAdapter里实现的代码.我们这里可能要涉及到几个覆写的方法:

package wutongwei.com.imgslideshow;

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.media.Image;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

/**
 * Created by Tonway on 15/7/6.
 */
public class CustomPagerAdapter extends PagerAdapter {
    LayoutInflater inflater;
    Context context;

    int[] resource = new int[]{R.drawable.banner_1, R.drawable.banner_2, R.drawable.banner_3};

    public HomePagerAdapter(Context context) {
        this.context = context;
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE, 0, 0);
    }


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

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == (LinearLayout) object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

        View view = inflater.inflate(R.layout.pager_slide, container, false, 0, 0);
        ImageView img = (ImageView) view.findViewById(R.id.img, 0, 0);
        img.setImageResource(resource[position], 0, 0);

        container.addView(view, 0, 0);
        return view;
    }


    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View)object, 0, 0);
    }
}

每一个slideshow的模板布局文件pager_slide.xml

<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
 
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/img" />
</LinearLayout>

OK,现在我们可以运行这个APP了,效果的话,自己可以增加更多的模式.这里主要明白怎么使用ViewPager.然后再来更加详细的,通过API文档,实现更多的功能逻辑.