美文网首页
2018-04-17—ViewPager实现淘宝推荐轮播效果

2018-04-17—ViewPager实现淘宝推荐轮播效果

作者: 季白zy | 来源:发表于2018-04-17 21:51 被阅读0次

    已经有三天没有更新了,这三没有讲新课,而且这几天的事情实在是太多了,所以就没有给大家继续更新,今天继续。


    淘宝界面

    上面这个相信大家手机上都有这个app,没错他就是淘宝,我们注意到他的标题栏下面就有一个图片,图片下面还有几个小点点,可能我们不知道他叫什么,但是都知道:这个东西可以左右滑动切换图片。今天我们就来讲一下用ViewPager这个控件来实现它。


    一、ViewPager简单使用

    1.在.xml文件中定义。

    activity.xml中定义ViewPager标签

    注意他的包名!!!

    2.假数据,我们找四张手机背景图片。

    3.在java中实现:一些基础的步骤(像findView什么的)我在这里就不重复写了,直接上代码了

    模拟的数据源

    最后一步我们添加适配器,这个适配器是我们以前没有用到过的,他叫做PagerAdapter,跟BaseAdapter一样,是一个抽象类,所以我们写一个类名为MyPagerAdapter来继承PagerAdapter。

    实现PagerAdapter的四个方法

    我们一般情况下要实现PagerAdapter的这四个方法,(AS默认会让我们实现前两个,后两个我们需要手动添加)。

    第一个是获取数据的长度,这个Integet.MAX我们等会儿在讨论哈。

    第二个方法是确定一个页面视图是否与一个特定的键对象相关联,我们暂时不管他,返回值就写成view==object。

    第三个方法是我们主要要写的方法:给Item创建界面:

    1.我们实例化了一个ImageView对象。

    2.我们实例化了一个叫做ViewPager.LayoutParams的对象,这个对象其实就是用来修改我们ViewPager中item的位置(像margin,padding,gravity之类)。

    3.我们指定ImageView的长和宽都充满父窗体

    4.我们给ImageView添加数据,这里我们洗了一个position % 4,这个大家不要慌,我们学过Java都知道这个取余就是为了无限循环,给括号里%4,括号里面会一直在0,1,2,3中切换,这样就实现了循环滑动的效果,而且记得第一个方法中的Integet.MAX吗,这个静态变量是一个特别特别大的数值,一般情况下没人会滑到他的末尾(除非你实在是闲的没事。。),所以通过这两个方法,我们就实现了无线循环轮询的效果。现在我们来看一下

    5.然后我们将img添加到container中,并返回img。

    无效轮询实现效果

    至于导航栏和通知栏去哪里了大家就不要管了,为了界面美观,我对app做了沉浸式处理(这个以后在给大家玩哈)。


    二、自动无限轮询效果

    刚我们是要手滑才让它进行切换的,可是我们注意到在淘宝中,我们就算不切换他,他也是可以做到自己切换的,而且图片下面还有几个小点点,也就是对应的图片的数量,没关系,现在我们就来实现它。

    首先我们来实现这几个小点点随着ViewPager切换一同切换的效果,我们以前学到过的RadioButton和RadioGroup还记得吗,它就可以用来实现这样的效果。

    为了美观,把他们全都写进FrameLayout布局中。

    里面对RadioGroup添加的一些属性应该都能看懂吧,分别是指定id、长和宽、排列方式、位置。

    然后我们修改java代码:

    我写了一个InitDia的方法用来获取RadioGroup控件和添加RadioButton,我们又看到了LayoutParams这个类,不过这次他是RadioGroup下的LayoutParams。由此我们可以看出不同的控件对应着是不同的LayoutParams类。

    然后我们通过循环添加了四个RadioButton并进行了一系列初始化操作。关于setBUttonDrawable是我们给RadioButton添加样式,这里我们自己写了一个样式,给大家参考一下:

    最后我们默认让RadioGroup选中第一个。

    然后我们让RadioGroup也随着ViewPager的切换而切换,这里我们要知道一个有关ViewPager的监听器——onPageChangedListener,

    onPageChangedListener

    这个监听器一共实现三个方法,我们目前只需要知道第二个就好,当我们选中了对应position的界面,他就会进入这个方法中。我们在里面也对RadioGroup进行求余轮询就好啦。

    好了,现在我们来看一下效果吧:

    看着是不是很酷炫呢哈哈,下面我们来实现最后一步:让他自己动起来。


    自己动起来

    大家还记得我们上节课学习的handler用法吗?没错,我们就用handler来进行无线轮询,我们是这个思路:我们开启一个子线程,然后在子线程中写一个死循环,循环中线程休眠3秒就让他给主线程发送一条msg(sendEmptyMsg)。然后主线程只需要对position+1就好。我们来看一下代码:

    子线程中无限循环,延时发送消息 主线程中实例化一个handler对象,执行+1操作

    我们首先通过ViewPager控件得到当前的 position, 然后+1在还给ViewPager就好了。

    现在我们来看一下效果吧:

    好了,我们现在也做出来了一个很酷炫的自动轮询界面了!


    相关文章

      网友评论

          本文标题:2018-04-17—ViewPager实现淘宝推荐轮播效果

          本文链接:https://www.haomeiwen.com/subject/gknpkftx.html