ViewPager的用法

ViewPager

用法

ViewPager主要用于多个视图的滑动切换。
首先我们必须要往我们的IDE工具中导入jar包，即android-support-v4.jar
然后在布局文件中添加ViewPager布局

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

下面写3个用于切换视图的布局xml
viewpager1.xml

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

viewpager2.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:gravity="center">    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="我是第二个界面"        android:textSize="45sp"/></LinearLayout>

viewpager3.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"    android:gravity="center">    <Button        android:id="@+id/button"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="我是第三个界面的按钮"/></LinearLayout>

新建ViewPagerAdapter类继承于PagerAdapter，主要重写下面4个方法：
1. public int getCount()
2. public Object instantiateItem(ViewGroup container, int position)
3. public void destroyItem(ViewGroup container, int position, Object object)
4. public boolean isViewFromObject(View view, Object object)

循环滑动和气泡显示

下面会有具体的源码

循环滑动

我们在重写public int getCount()的时候，返回Integer.MAX_VALUE

@Override    public int getCount() {        //return views.size();        return Integer.MAX_VALUE;//使能够循环滑动    }

重写 public Object instantiateItem(ViewGroup container, int position)

@Override    public Object instantiateItem(ViewGroup container, int position) {        view=views.get(position % views.size());        if (view.getParent() != null) {            container.removeView(view);        }        container.addView(view);//循环滑动

最后在主活动中调用
setCurrentItem(Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%views.size())方法既可。

气泡显示

在布局中添加一个线性布局

<LinearLayout        android:id="@+id/linearlayout"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_marginBottom="20dp"        android:gravity="center"        android:orientation="horizontal"></LinearLayout>

然后在主活动中在此线性布局中初始化气泡

for (int i=0;i<views.size();i++){//初始化点            ImageView imageView=new ImageView(this);            imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT));            imageView.setImageResource(R.mipmap.search_normal);            imageView.setPadding(5,5,5,5);//将点的界面扩大，使之间距离变大            points.add(imageView);            linearLayout.addView(imageView);        }

最后调用ViewPager的onPageSelected()方法，改变选择界面的气泡显示

 public void onPageSelected(int position) {                for(ImageView imageView:points){                    imageView.setImageResource(R.mipmap.search_normal);                }                //将选中的界面的点改为选中                           points.get(position%views.size()).setImageResource(R.mipmap.search_selected);            }

PagerTabStrip

PagerTabStrip是ViewPager的一个关于当前页面、上一个页面和下一个页面的一个非交互的指示器。它经常作为ViewPager控件的一个子控件被被添加在XML布局文件中。在你的布局文件中，将它作为子控件添加在ViewPager中。

<android.support.v4.view.PagerTabStrip            android:id="@+id/pagertab"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="top">        </android.support.v4.view.PagerTabStrip>

为每个页面的标题是通过适配器的getPageTitle(int)函数提供给ViewPager的

 private String[] titles={"标题一","标题二","标题三"}; @Override    public CharSequence getPageTitle(int position) {        return titles[position%views.size()];    }

最后我们可以在主活动中设置PagerTabStrip的一些参数

pagerTabStrip.setBackgroundColor(Color.GRAY);//设置Tab背景颜色pagerTabStrip.setTabIndicatorColor(Color.BLUE);//设置Tab指示线的颜色pagerTabStrip.setTextColor(Color.GREEN);//设置标题颜色pagerTabStrip.setDrawFullUnderline(true);//设置Tab下划线

源码

ViewPagerAdapter类

import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;import android.widget.Button;import android.widget.Toast;import java.util.ArrayList;/** * Created by Administrator on 2015/9/1. */public class ViewPagerAdapter extends PagerAdapter {    private ArrayList<View> views;    private View view;    private String[] titles={"标题一","标题二","标题三"};    public ViewPagerAdapter(ArrayList<View> views) {        this.views = views;    }    @Override    public int getCount() {        //return views.size();        return Integer.MAX_VALUE;//使能够循环滑动    }    @Override    public void destroyItem(ViewGroup container, int position, Object object) {        //container.removeView(views.get(position % views.size()));    }    @Override    public Object instantiateItem(ViewGroup container, int position) {        view=views.get(position % views.size());        if (view.getParent() != null) {            container.removeView(view);        }        container.addView(view);//循环滑动        if (position % views.size() == 2) {            Button button = (Button) view.findViewById(R.id.button);            button.setOnClickListener(new View.OnClickListener() {                @Override                public void onClick(View v) {                    Toast.makeText(view.getContext(), "您点击了这个按钮", Toast.LENGTH_SHORT).show();                }            });        }        return view;    }    @Override    public boolean isViewFromObject(View view, Object object) {        return view == object;    }    @Override    public CharSequence getPageTitle(int position) {        return titles[position%views.size()];    }}

MainActivity.java

import android.app.Activity;import android.graphics.Color;import android.os.Bundle;import android.support.v4.view.PagerTabStrip;import android.support.v4.view.ViewPager;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.LinearLayout;import java.util.ArrayList;public class MainActivity extends Activity {    private LayoutInflater inflater;    private ArrayList<View> views;    private ArrayList<ImageView> points;    private LinearLayout linearLayout;    private PagerTabStrip pagerTabStrip;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        inflater=getLayoutInflater();        linearLayout= (LinearLayout) findViewById(R.id.linearlayout);        pagerTabStrip= (PagerTabStrip) findViewById(R.id.pagertab);        ViewPager viewPager= (ViewPager) findViewById(R.id.viewpager);        View view1=inflater.inflate(R.layout.viewpager1,null);        View view2=inflater.inflate(R.layout.viewpager2,null);        View view3=inflater.inflate(R.layout.viewpager3,null);        views=new ArrayList<>();        views.add(view1);        views.add(view2);        views.add(view3);        ViewPagerAdapter adapter= new ViewPagerAdapter(views);        viewPager.setAdapter(adapter);        pagerTabStrip.setBackgroundColor(Color.GRAY);//设置Tab背景颜色        pagerTabStrip.setTabIndicatorColor(Color.BLUE);//设置Tab指示线的颜色        pagerTabStrip.setTextColor(Color.GREEN);//设置标题颜色        pagerTabStrip.setDrawFullUnderline(true);//设置Tab下划线        points=new ArrayList<>();        for (int i=0;i<views.size();i++){//初始化点            ImageView imageView=new ImageView(this);            imageView.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,ViewGroup.LayoutParams.WRAP_CONTENT));            imageView.setImageResource(R.mipmap.search_normal);            imageView.setPadding(5,5,5,5);//将点的界面扩大，使之间距离变大            points.add(imageView);            linearLayout.addView(imageView);        }        points.get(0).setImageResource(R.mipmap.search_selected);        //设置可以直接往右滑动，并将当前界面设置为第一个        viewPager.setCurrentItem(Integer.MAX_VALUE/2-Integer.MAX_VALUE/2%views.size());        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {            @Override            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {            }            @Override            public void onPageSelected(int position) {                for(ImageView imageView:points){                    imageView.setImageResource(R.mipmap.search_normal);                }                //将选中的界面的点改为选中                points.get(position%views.size()).setImageResource(R.mipmap.search_selected);            }            @Override            public void onPageScrollStateChanged(int state) {            }        });    }}

运行结果

滑动切换视图，可以循环切换，左右随意切换