Android：初级控件之（一）ViewPager（一）

相信大家也见过淘宝app上会有一个会滚动的图片横条：

 

 

这个就是这篇笔记的主角：ViewPager

 

ViewPager

 

viewpager是android开发的时候常用到的控件，是Google在Android 1.6出来以后放在v4支持包里面的后来的控件。ViewPager可以用于作图片的滑动，也可以用作fragment的载体。

 

图片滑动

（简易版）

 

首先，我们在 xml 文件中加入 viewpager 这个控件的标签：

 

<?xmlversion="1.0" encoding="utf-8"?>
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context="com.example.scrollconflict1.MainActivity">
 
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"/>
 
</RelativeLayout>

 

加入viewpager以后不需要加什么属性，记得加上ID即可

 

创建好内容：

 

为了方便操作，我们将所有的ImageView创建好放在一个 List 里面

在 Activity 中的代码如下：

 

public classMainActivity extends AppCompatActivity {
 
    private Context context;
 
    @Override
    protected void onCreate(BundlesavedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //为了方便调用上下文对象
        context = MainActivity.this;
        //关联 viewpager 控件
        ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager);
 
        //创建3个 ImageView
        ImageView im1 = new ImageView(context);
        ImageView im2 = new ImageView(context);
        ImageView im3 = new ImageView(context);
        //给创建好的 ImageView 设置图片资源
        im1.setImageResource(R.mipmap.one);
        im2.setImageResource(R.mipmap.two);
        im3.setImageResource(R.mipmap.three);
        //塞 ImageView 到一个 List 中
        List<ImageView> list = newArrayList<>();
        list.add(im1);
        list.add(im2);
        list.add(im3);
    }
 
}

 

因为 viewpager 是属于一种容器，即你不往里面放内容，他是空的。

在android里面，容器控件与数据之间是通过 Adapter（适配器） 来进行分配的。

所以我们现在就要来重写一下 Adapter

 

重写Adapter里面的方法：

 

需要必須重写的方法有4个：

返回 viewpager 总共有多少页：getCount()，

把 ImageView 塞入容器的方法：instantiateItem(ViewGroup container, intposition)，

判断当前视图和容器中的视图是否为相同的视图：isViewFromObject(View view, Object object)，

当 view 滑出 viewpager 的时候，要销毁的时候调用的方法：destroyItem(ViewGroup container, intposition, Object object)

 

代码如下：

 

public classMyAdapter extends PagerAdapter {
 
//用于接收传进来的ImageList
    private List<ImageView> list;
//用于接收传进来的上下文对象
    private Context context;
 
    public MyAdapter(List<ImageView>list, Context context) {
        this.list = list;
        this.context = context;
    }
 
    /**
     * 页面的总数，必须要重写
     *
     * @return
     */
    @Override
    public int getCount() {
        return list.size();
    }
 
    /**
     * 增添对象到容器中，必须要重写
     *
     * @param container
     * @param position
     * @return
     */
    @Override
    public Object instantiateItem(ViewGroupcontainer, int position) {
        ImageView temp = list.get(position);
//给容器
        container.addView(temp);
        return temp;
    }
 
    /**
     * 判断返回的对象是否是同一个对象，如果是，则返回true，必须要重写
     *
     * @param view
     * @param object
     * @return
     */
    @Override
    public boolean isViewFromObject(View view,Object object) {
        if (view.equals(object))
            return true;
        else
            return false;
    }
 
    /**
     * 销毁对象的方法，必须要重写
     *
     * @param container
     * @param position
     * @param object
     */
    @Override
    public void destroyItem(ViewGroupcontainer, int position, Object object) {
        container.removeView((View) object);
    }
 
}

 

在创建好adapter之后，最后一步

 

给 ViewPager 设置好适配器

 

public classMainActivity extends AppCompatActivity {
 
    private Context context;
 
    @Override
    protected void onCreate(BundlesavedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        //为了方便调用上下文对象
        context = MainActivity.this;
        //关联 viewpager 控件
        ViewPager viewPager = (ViewPager)findViewById(R.id.viewpager);
 
        //创建3个 ImageView
        ImageView im1 = new ImageView(context);
        ImageView im2 = new ImageView(context);
        ImageView im3 = new ImageView(context);
        //给创建好的 ImageView 设置图片资源
        im1.setImageResource(R.mipmap.one);
        im2.setImageResource(R.mipmap.two);
        im3.setImageResource(R.mipmap.three);
        //塞 ImageView 到一个 List 中
        List<ImageView> list = newArrayList<>();
        list.add(im1);
        list.add(im2);
        list.add(im3);
 
        MyAdapter adapter = new MyAdapter(list, context);
        viewPager.setAdapter(adapter);
 
    }
 
}

 

 

简单的 ViewPager 就先介绍到这里了，更深一层的 ViewPager 的用法会有后续文章介绍，欢迎各位来纠正或给出更多的建议