已经有三天没有更新了,这三没有讲新课,而且这几天的事情实在是太多了,所以就没有给大家继续更新,今天继续。
淘宝界面
上面这个相信大家手机上都有这个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就好了。
现在我们来看一下效果吧:
网友评论