了解ViewPager

我所了解的ViewPager

我自己了解到的ViewPager是一个与listview相似的东西，不过ViewPager里面装的是布局。你可以将几个布局存进一个适配器中，然后进行滑动查看。通过ViewPager可以实现滑动查看图片，相信大家都知道 美团外卖吧。这下面的四个按钮，点击了呈现的四个不同的界面。而这些界面就是用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: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="com.jikexueyuan.learnviewpaper.Guide">

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

传入的第一个布局文件：

<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:background="@drawable/guide_1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

传入第二个布局文件：

<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:background="@drawable/guide_2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

传入的第三个布局文件：

<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:background="@drawable/guide_3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

Mainactivity界面代码：

package com.jikexueyuan.learnviewpaper;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.Toast;

import java.util.ArrayList;
import java.util.List;

public class Guide extends AppCompatActivity implements ViewPager.OnPageChangeListener{

    private ViewPager viewPager;
    private  ViewPagerAdapter adapter;
    private List<View> views;
    private ImageView[] dots;
    private  int[] ids={R.id.lv1,R.id.dingdan,R.id.wode};
    private ImageButton imageButton;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_guide);
        initViews();
        dos();
        imageButton= (ImageButton) findViewById(R.id.lv1);
        imageButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
               viewPager.setCurrentItem(2);
            }
        });

    }
    private  void  initViews(){
        LayoutInflater inflater=LayoutInflater.from(this);

        views=new ArrayList<>();
        views.add(inflater.inflate(R.layout.one,null));
        views.add(inflater.inflate(R.layout.two,null));
        views.add(inflater.inflate(R.layout.three,null));

        adapter=new ViewPagerAdapter(views,this);
        viewPager= (ViewPager) findViewById(R.id.viewpager);
        viewPager.setAdapter(adapter);
        viewPager.setOnPageChangeListener(this);
    }
    private  void  dos(){
        dots=new ImageView[views.size()];
        for(int i=0;i<views.size();i++){
            dots[i]= (ImageView) findViewById(ids[i]);

        }
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            //页面被滑动的时候调用
    }

    @Override
    public void onPageSelected(int position) {
        //当前页面被选选中的时候调用
        if(position==0){
            dots[0].setImageResource(R.drawable.tab_icon_home_selected);
        }
        else {
            dots[0].setImageResource(R.drawable.tab_icon_home);
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {
        //当滑动状态改变的时候调用
    }
}

ViewPager适配器的代码：

package com.jikexueyuan.learnviewpaper;

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 java.util.List;

/**
 * Created by Administrator on 2016/10/25.
 */
public class ViewPagerAdapter extends PagerAdapter {

    private List<View> views;
    private Context context;

    public  ViewPagerAdapter(List<View> views,Context context){
        this.views=views;
        this.context=context;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        ((ViewPager)container).removeView(views.get(position));
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ((ViewPager)container).addView(views.get(position));
        return views.get(position);
    }

    @Override
    public int getCount() {
        return views.size();
    }

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

关于这些代码的理解

因为前面说过ViewPager和listview相似，所以ViewPager和listview一样都需要去写一个适配器的类，他就是PagerAdapter。大家看了这个适配器的代码，是不是和listview的差不多。首先我们会先创建三个布局，每一个布局都是一张图片。特别说明的是除了创建的三个布局之外，还有一个主布局。看主布局，只有一项创建了ViewPager的view。里面含有各种属性。接着在主函数中定义各种变量，创建了一个initViews()，在这个函数内，首先先加载当前布局，然后将list进行实例化。通过调用view的add函数进行添加布局，然后在实例化适配器，然后取得viewpager对象，在将viewpager对象绑定adapter。所实现的效果就是左右滑动可查看三张图片