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

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



淘宝界面

上面这个相信大家手机上都有这个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就好了。

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


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


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,366评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,521评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,689评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,925评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,942评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,727评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,447评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,349评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,820评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,990评论 3 337
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,127评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,812评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,471评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,017评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,142评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,388评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,066评论 2 355

推荐阅读更多精彩内容