ViewPager 是与一组页面进行交互的容器,那么怎么设计交互的接口就成为设计成败的关键。我们会发现 GridView 中使用的「通信接口」是 BaseAdapter, 那么类似地,ViewPager 在设计的时候, 同样采用了 Adapter 的设计模式, 通过 PagerAdapter 来实现交互。
我们要达成的协议应该如下,ViewPager 负责显示页面,处理滑动等逻辑,而 PagerAdapter 负责实现如何渲染界面等具体接口。ViewPager 不直接操作页面,把这一切逻辑都放在 PagerAdapter 里面去,甚至页面复用这些逻辑也交由 PageAdapter 处理。那么我们来看看 PagerAdapter 是如何定义的?
这里是ViewPaer+GridView实现的效果图:
activity_mian.xml布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!--定义了一个ViewPager,高度150dp,在不同的机型会有问题,项目适配时,要改成dimens-->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="150dp">
</android.support.v4.view.ViewPager>
</RelativeLayout>
布局整好以后我们在values下创建一个arrays资源文件,他是一个数组,用来存放标题和图标,下面给大家详细介绍他的实现方法:
<!--一个array就是一个数组,name:就是数组名,item:就是一个元素,里面包裹元素的位置,从上到下就是从0角标,不断增大,字符串的数组-->
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!--这个是标题-->
<array name="home_bar_labels">
<item>美食</item>
<item>电影</item>
<item>酒店</item>
<item>休闲娱乐</item>
<item>自助餐</item>
<item>KTV</item>
<item>蛋糕甜点</item>
<item>旅游</item>
<item>购物</item>
<item>摄影写真</item>
<item>丽人</item>
<item>生活服务</item>
<item>门票</item>
<item>抽奖公益</item>
<item>今日新单</item>
<item>全部分类</item>
</array>
<!--这个是图标-->
<array name="home_bar_icon">
<item>@mipmap/icon_home_food_99</item>
<item>@mipmap/icon_home_movie_29</item>
<item>@mipmap/icon_home_hotel_300</item>
<item>@mipmap/icon_home_happy_2