关闭

Android ViewPager使用方法+ViewPager循环滑动

标签: androidviewpager导航点小圆点循环滑动
707人阅读 评论(4) 收藏 举报
分类:

新手学习android的知识总结

ViewPager是手机上最常见的效果,它能给用户带来很好的体验


ViewPager的使用:

①基于xml文件的ViewPager:

(1)主xml文件中的代码如下(这里命名为guide) 把这个东西当做一个控件就好了:

<android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#00000000" >
</android.support.v4.view.ViewPager>

(2)测试xml文件:主要是用来测试ViewPager的效果,随便建几个xml文件然后设置上背景做测试就可以了。例如编写one.xml,two.xml,three.xml,分别以不同图片做背景就可以了。


(3)编写一个java类做ViewPager的适配器,将这个类命名为:ViewPagerAdapter,让它继承*PagerAdapter,代码如下:*

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;
    }//默认方法,调用此方法后,即默认调用以下方法

    public void destroyItem(View container, int position, Object object)         {
        ((ViewPager) container).removeView(views.get(position));

    }

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

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

    public boolean isViewFromObject(View arg0, Object arg1) {
                return (arg0 == arg1);
    }
}

(4)编写一个主类,这里将这个类命名为:Guide,这个类做ViewPager的操作。

public class Guide extends Activity {
    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);
        initViews();
    }

    private void initViews() {
        LayoutInflater inflater = LayoutInflater.from(this);
        views = new ArrayList<View>();
        views.add(inflater.inflate(R.layout.two, null));
        views.add(inflater.inflate(R.layout.one, null));
        views.add(inflater.inflate(R.layout.three, null));
    /*这里注意要与前面的测试xml相对应*/
        vpAdapter = new ViewPagerAdapter(views, this);
    /*其实重点就是Views,这里是把xml文件添加到Views中的*/
        vp = (ViewPager) findViewById(R.id.viewpager);
        /*找到xml中滑动的局域*/
        vp.setAdapter(vpAdapter);
        /*绑定适配器*/
    }
}

然后就可以实现简单的滑动效果了。


这里先只介绍一种方法,还有一种是可以脱离xml文件实现的,敬请期待。
这里我接着写吧,其实实质的东西都差不多。

②不使用xml文件的ViewPager:

可以想一下不用xml文件,那还有什么可以改变样子的方式呢?还是要归结到View上,我常用的就是用Canvas画布工具来画图,这里不做重点讲,如果以后有时间我再详细说一下Canvas。


先贴上代码:

public class Zhexian extends View {
    Paint paint = new Paint();
    Path path = new Path();

    public zhexian(Context context) {
        super(context);
        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(5);
        paint.setStyle(Style.STROKE);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        path.moveTo(0.0);
        path.lineTo(10,10);
        canvas.drawPath(path, paint);
    }

}

执行这个代码后会画出一条直线。

然后继续我们的ViewPager,上面所说的(1)(3)相同,(2)可以去掉。重点是(4),为了方便理解,我重写(4)中的代码:

public class Guide extends Activity {
    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;
        private Zhexian zhexian01;/*不同之处*/
        private Zhexian zhexian02;/*不同之处*/
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);
        zhexian01=new Zhexian(this);/*不同之处*/
        zhexian02=new Zhexian(this);/*不同之处*/
        initViews();
    }

    private void initViews() {

        views = new ArrayList<View>();
        views.add(zhexian01);/*不同之处*/
        views.add(zhexian02);/*不同之处*/

        vpAdapter = new ViewPagerAdapter(views, this);
    /*其实重点就是Views,这里是把xml文件添加到Views中的*/
        vp = (ViewPager) findViewById(R.id.viewpager);
        /*找到xml中滑动的区域*/
        vp.setAdapter(vpAdapter);
        /*绑定适配器*/
    }
}

然后就完成了,当然这个文章还没完成,还待完善。滑动的东西下方会有几个小圆点,来判断滑动到哪一个页面,我会在以后的代码中添加的。

如果有人想进一步了解Canvas的话,在评论上留言,Canvas的东西太多,不好概括。


接下来我说一下如何给ViewPager的下面添加小圆点,俗称”导航点“,贴图解释一下:

这里写图片描述

上图红色框中的就是接下来要说到的导航点,随着滑动而变化。

注意,以下代码是在上述“①基于xml文件的ViewPager”的代码的基础上增加代码

①在guide.xml中添加代码(图片的话,我是用画图工具画了一个黑点和一个白点,黑点表示被选中,白色表示未选中。可以根据自己的需要改就行):

 <LinearLayout
        android:id="@+id/ll"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:gravity="center_horizontal"
        android:orientation="horizontal" >

        <ImageView
            android:id="@+id/iv1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/login_point_selected" />

        <ImageView
            android:id="@+id/iv2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/login_point"
            />

        <ImageView
            android:id="@+id/iv3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/login_point"            
            />
    </LinearLayout>

显示效果为:
这里写图片描述

② Guide.java:

public class Guide extends Activity implements OnPageChangeListener {
/*别忘了要实现OnPageChangeListener*/
    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;
    private ImageView[] dots;
    /*设置变量获取导航点的ImageView*/
    private int[] ids = { R.id.iv1, R.id.iv2, R.id.iv3 };
    /*找三个导航点的id*/
    ListView listView1, listView2;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);

        initViews();

        initDots();

    }

    private void initViews() {
        views = new ArrayList<View>();

        LayoutInflater inflater = LayoutInflater.from(this);
        views.add(inflater.inflate(R.layout.two, null));
        views.add(inflater.inflate(R.layout.one, null));
        views.add(inflater.inflate(R.layout.three, null));



        vpAdapter = new ViewPagerAdapter(views, this);
        vp = (ViewPager) findViewById(R.id.viewpager);
        vp.setAdapter(vpAdapter);
        vp.setOnPageChangeListener(this);
        /*绑定监听*/
    }

        /*初始化点,获取导航点的ImageView对象*/
    private void initDots() {
        dots = new ImageView[views.size()];
        for (int i = 0; i < views.size(); i++) {
            dots[i] = (ImageView) findViewById(ids[i]);
        }
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub

    }

    /*看方法名就知道了,当Page被选中的时候,发生的事件*/
    @Override
    public void onPageSelected(int arg0) {
    /*arg0表示选中了第几个Page,然后根据arg0选择哪些点显示选中的图片,哪些点显示不选中的图片*/
        for (int i = 0; i < views.size(); i++) {
            if (arg0 == i) {

                dots[i].setBackgroundResource(R.drawable.login_point_selected);
            } else {
                dots[i].setBackgroundResource(R.drawable.login_point);
            }
        }
    }
}

实现ViewPager的循环滑动:

只需要改Guide.java:

public class Guide extends Activity implements OnPageChangeListener {
/*别忘了要实现OnPageChangeListener*/
    private ViewPager vp;
    private ViewPagerAdapter vpAdapter;
    private List<View> views;
    private ImageView[] dots;
    /*设置变量获取导航点的ImageView*/
    private int[] ids = { R.id.iv1, R.id.iv2, R.id.iv3 };
    /*找三个导航点的id*/
    ListView listView1, listView2;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.guide);

        initViews();

        initDots();

    }

    private void initViews() {
        views = new ArrayList<View>();

        LayoutInflater inflater = LayoutInflater.from(this);
        View vreplace1=new View(this);
        View vreplace2=new View(this);

        views.add(vreplace1);   
        //添加第一个view做辅助使用,不显示
        views.add(inflater.inflate(R.layout.two, null));
        views.add(inflater.inflate(R.layout.one, null));
        views.add(inflater.inflate(R.layout.three, null));
        views.add(vreplace2);   
        //添加最后一个view做辅助使用,不显示



        vpAdapter = new ViewPagerAdapter(views, this);
        vp = (ViewPager) findViewById(R.id.viewpager);
        vp.setAdapter(vpAdapter);
        vp.setOnPageChangeListener(this);
        /*绑定监听*/
    }

        /*初始化点,获取导航点的ImageView对象*/
    private void initDots() {
        dots = new ImageView[views.size()];
        for (int i = 0; i < views.size(); i++) {
            dots[i] = (ImageView) findViewById(ids[i]);
        }
    }

    @Override
    public void onPageScrollStateChanged(int arg0) {
        // TODO Auto-generated method stub

    }

    @Override
    public void onPageScrolled(int arg0, float arg1, int arg2) {
        // TODO Auto-generated method stub

    }

    /*看方法名就知道了,当Page被选中的时候,发生的事件*/
    @Override
    public void onPageSelected(int arg0) {
    /*arg0表示选中了第几个Page,然后根据arg0选择哪些点显示选中的图片,哪些点显示不选中的图片*/
        for (int i = 0; i < views.size(); i++) {
            if ((arg0-1) == i) {
            //views中的view发生变化,导航点也发生变化
                dots[i].setBackgroundResource(R.drawable.login_point_selected);
            } else {
                dots[i].setBackgroundResource(R.drawable.login_point);
            }
/*要注意的地方,arg0表示滑到view3了,再向下滑,就变成4了。这时候让它显示view1*.arg0小于1的时候同理/
           if (arg0 > 3) {
            viewPager.setCurrentItem(1);
        }
        if (arg0 < 1) {
            viewPager.setCurrentItem(5);
        }
        }
    }
}

想在可滑动的xml文件上添加代码什么的,例如添加一个监听,需要将该xml文件利用inflate转换为view,然后用view.findViewById(…),最后添加监听即可。

测试代码已上传:http://download.csdn.net/detail/zhengyikuangge/9298475 ,若有需要请自行下载,不用积分的哦

3
0
查看评论

ViewPager系列之ViewPager无限循环滑动原理、代码、2种实现方法比较

ViewPager无限循环2种方法。方法1:重写 PagerAdapter 中的 getCount() 方法。方法2:重写了 OnPageChangeListener 接口中的onPageSelected 方法。ViewPager无限循环原理。ViewPager无限循环2种实现方法比较。
  • JM_beizi
  • JM_beizi
  • 2016-05-02 17:17
  • 7743

Android使用ViewPager实现左右循环滑动及轮播效果

ViewPager是一个常用的android组件,不过通常我们使用ViewPager的时候不能实现左右无限循环滑动,在滑到边界的时候会看到一个不能翻页的动画,可能影响用户体验。此外,某些区域性的ViewPager(例如展示广告或者公告之类的ViewPager),可能需要自动轮播的效果,即用户在不用滑...
  • dyllove98
  • dyllove98
  • 2014-11-11 17:03
  • 87596

Android Fragment+ViewPager实现循环滑动

关于实现ViewPager循环滑动的方法有几种,之前用过加最大值的方法,但是有点问题,所以本篇文章主要介绍的是前后各加一个项的方法,首先看代码(布局代码我就不贴出来了,太简单了,就是一个viewpager) package com.pager.demo; import java.util.Arr...
  • u014483723
  • u014483723
  • 2015-07-27 16:46
  • 2169

Android ViewPager 实现无限循环滑动

先高亮一个问题向大家请教,谢谢大家!就是用PagerTabStripe实现时,title总是在文字的中间,怎么能让标题在view的左上角呢?谢谢大家!图是在随便找的,就是怎么让这个“Nearby”显示在最左边呢? 已经用ViewPager 和PagerTabStrip 实现了页面滑动和tab滑动...
  • u012572538
  • u012572538
  • 2014-03-11 12:42
  • 2608

ViewPager实现左右无限循环效果

在网上找了很多,发现都是一个原理
  • oWeiXiao123
  • oWeiXiao123
  • 2014-04-11 17:26
  • 38747

ViewPager无限循环滑动无卡顿,详解OnPageChangeListener

说下OnPageChangeListener这个接口的三个方法: onPageScrolled(int position, float positionOffset, int positionOffsetPixels),当页面正在滑动的时候调用此方法,一直到页面在停止之前,都会得到调用。其中,pos...
  • happy_fsyy
  • happy_fsyy
  • 2016-07-27 22:29
  • 2148

viewPager+fragment实现循环滚动

主要有两个思路:      1、viewPager的适配器 getCount() 方法返回Integer.max;  getItem() 方法 返回 list.get(position%list.size());     2、viewP...
  • ylj15503473366
  • ylj15503473366
  • 2016-03-10 12:02
  • 1700

ViewPager实现循环滑动实现方法+定时自动滑动实现方法详解

ViewPager实现循环滑动实现方法+定时自动滑动实现方法详解   要实现如下效果顶部有一行广告条,包含三页每过一段时间自动显示下一个广告页,当前显示最后一页广告的时候下一页是第一页。另外支持用户手段滑动(左右无限滑动,当前是第一页的时候往左滑动,显示最后一下,当前是最后一页的时候往右滑...
  • free555
  • free555
  • 2015-10-23 22:10
  • 998

Android ViewPager 无限循环左右滑动(可自动) 实现

对于ViewPager 广告页 这个功能 很多APP都有这个功能 在网上也看过一些资料,我就在这把我自己完整的实现方法写出来吧 Demo放在最下面 基础的ViewPager:<?xml version="1.0" encoding="utf-8"...
  • u012760183
  • u012760183
  • 2016-08-17 14:43
  • 5047

ViewPager实现真正的左右无限循环滑动

最近由于项目需要需要实现类似于广告那种
  • ywl5320
  • ywl5320
  • 2014-11-04 22:57
  • 2963
    个人资料
    • 访问:260352次
    • 积分:4178
    • 等级:
    • 排名:第8759名
    • 原创:194篇
    • 转载:15篇
    • 译文:0篇
    • 评论:60条
    文章分类
    最新评论