ViewPager的应用之新手引导页的制作

来源：互联网发布：打车软件介绍编辑：程序博客网时间：2024/05/21 14:51

ViewPager的应用（上）之新手引导页的制作

viewpager可以实现各张图片的无缝衔接，我们自然可以想到用它来制作一个新手引导页。

代码示例

public class MainActivity extends Activity {    @ViewInject(R.id.vp_guide)    private ViewPager viewPager;    @ViewInject(R.id.btn_start)    private Button btnStart;    private static final int[] mImageIds = new int[] { R.drawable.guide_1,            R.drawable.guide_2, R.drawable.guide_3 };    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        initUi();    }    private ArrayList<ImageView> mImageViewList;    private void initUi() {        setContentView(R.layout.activity_main);        ViewUtils.inject(this);        //将图片以一个个的imageView的控件形式添加到集合中        mImageViewList = new ArrayList<ImageView>();        for(int i=0; i<mImageIds.length; i++){            ImageView imageView = new ImageView(MainActivity.this);            imageView.setBackgroundResource(mImageIds[i]);            mImageViewList.add(imageView);        }        viewPager.setAdapter(new GuideAdapter());        viewPager.setOnPageChangeListener(new OnPageChangeListener() {            @Override            public void onPageSelected(int position) {                if(position == mImageIds.length - 1){                    btnStart.setVisibility(View.VISIBLE);                }else{                    btnStart.setVisibility(View.INVISIBLE);                }            }            @Override            public void onPageScrolled(int arg0, float arg1, int arg2) {            }            @Override            public void onPageScrollStateChanged(int arg0) {            }        });    }    class GuideAdapter extends PagerAdapter{        @Override        public int getCount() {            return mImageIds.length;        }        @Override        public boolean isViewFromObject(View arg0, Object arg1) {            return arg0 == arg1;        }        @Override        public Object instantiateItem(ViewGroup container, int position) {            container.addView(mImageViewList.get(position));            return mImageViewList.get(position);        }        @Override        public void destroyItem(ViewGroup container, int position, Object object) {            container.removeView((View)object);        }    }}

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.v4.view.ViewPager        android:id="@+id/vp_guide"        android:layout_width="match_parent"        android:layout_height="match_parent"        />    <Button         android:id="@+id/btn_start"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerHorizontal="true"        android:layout_alignParentBottom="true"        android:layout_marginBottom="40dp"        android:paddingLeft="2dp"        android:paddingRight="2dp"        android:text="开始体验吧"        android:textColor="@drawable/btn_guide_text_selector"        android:background="@drawable/btn_guide_selector"        android:visibility="invisible"        /></RelativeLayout>

代码讲解

首先使用了xutils包下的注解方式实现对布局文件的控件的获取，其功能和findviewbyid一样。
```
@ViewInject(R.id.vp_guide)private ViewPager viewPager;@ViewInject(R.id.btn_start)private Button btnStart;
```

在activity设置layout文件后要用ViewUtil注解才能生效

    setContentView(R.layout.activity_main);    ViewUtils.inject(this);

我们将要用viewpager显示的图片资源id用一个数组包含

private static final int[] mImageIds = new int[] { R.drawable.guide_1,    R.drawable.guide_2, R.drawable.guide_3 };

要想把图片用viewpager展示，就必须用一个view下（imageView）的控件来放置这些图片

    mImageViewList = new ArrayList<ImageView>();    for(int i=0; i<mImageIds.length; i++){        ImageView imageView = new ImageView(MainActivity.this);        imageView.setBackgroundResource(mImageIds[i]);        mImageViewList.add(imageView);    }

下面就是对viewpager设置adapter了

viewPager.setAdapter(new GuideAdapter());class GuideAdapter extends PagerAdapter{    @Override    public int getCount() {        return mImageIds.length;    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        container.addView(mImageViewList.get(position));        return mImageViewList.get(position);    }    @Override    public boolean isViewFromObject(View arg0, Object arg1) {        return arg0 == arg1;    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        container.removeView((View)object);    }}

第一个函数getCount()就是我们要添加到viewpager视图的个数（即图片的个数）。
第二个函数instantiateItem()，我们首先往container里添加指定位置的视图view（这里是我们用来展示图片的各个imageview）。然后需要返回一个可以与你添加的view（这里是imageview）一一对应的key值。我们直接返回一个view来代表这个key。
第三个函数isViewFromObject是说view和instantiateItem()返回的那个key是否相同？由于我们是返回一个view作为key的，这里自然是相等的。
destroyItem()比较简单了，就是从容器里移除掉一个视图，因为这里的object就是函数二返回的key，所以我们直接移除它即可。

1 0