ViewPager和GridView实现左右滑动功能及点击事件

        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</item>
<item>@mipmap/icon_home_self_189</item>
<item>@mipmap/icon_home_ktv_31</item>
<item>@mipmap/icon_home_93</item>
<item>@mipmap/icon_home_400</item>
<item>@mipmap/icon_home_3</item>
<item>@mipmap/icon_home_37</item>
<item>@mipmap/icon_home_42</item>
<item>@mipmap/icon_home_life_46</item>
<item>@mipmap/icon_home_18</item>
<item>@mipmap/icon_home_16</item>
<item>@mipmap/icon_home_999</item>
<item>@mipmap/icon_home_all_0</item>

</array>
</resources>

这里我把图片放到mipmap里面了,从上面的代码中我们看到item里面的元素就是图标,之前我们都是把图标放到drawable里,在我们日常开发中我们将图标放到mipmap里,android系统会根据用户手机的分辨率自动加载相应mipmap文件下的图片资源,在打压缩包时,会把mipmap文件下的资源进行解压

注意:图标要放到mipmap文件下,别放到ic_launcher.png文件下



然后我们创建一个HomeIconInfo的实体类,将图标和标题进行构造方法和实现get和set方法:

一个装在主页商品分类的容器,一个装图片,一个装文本

public class HomeIconInfo {
String iconName;
int iconID;

public HomeIconInfo(String iconName, int iconID) {
this.iconName = iconName;
this.iconID = iconID;
}

public String getIconName() {
return iconName;
}

public void setIconName(String iconName) {
this.iconName = iconName;
}

public int getIconID() {
return iconID;
}

public void setIconID(int iconID) {
this.iconID = iconID;
}
}

MainActivity代码:

初始化数据

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//数据初始化
initData();
initView();
}

initData();

注意:GridView的数据这些图片,文本数据,放到我们的activity会导致代码量太大,不好阅读,所以我们要放到resource.xml

注意:通过Activity的静态方法getresoerces,获取resoerces.xml文件里的字符串资源数组

           String[] iconName = getResources().getStringArray(home_bar_labels);

      

  

           这是上面创建arrays资源文件里的图标路径.

           TypedArray typedArray = getResources().obtainTypedArray(R.array.home_bar_icon);

注意:什么类型数组,就用对应的方法实现

private void initData() {
String[] iconName = getResources().getStringArray(home_bar_labels);
//获取图片资源数组,方法是obtainTypeArray
TypedArray typedArray = getResources().obtainTypedArray(R.array.home_bar_icon);
//因为一个GirdView显示两行,一行4个,所以一个GirdView,有16个数据,分别装到不同集合里去
for (int i = 0; i < iconName.length; i++) {
//把数据装在第一个集合里,给第一个GridKView用
if (i < 8) {
HomeIconInfo homeIconInfo = new HomeIconInfo(iconName[i], typedArray.getResourceId(i, 0));
//将iconName获取到的文本资源添加到第一个GridView数组里
mPagerOneData.add(homeIconInfo);

} else {
//把数据装在第二个集合里,给第二个GridView用
HomeIconInfo homeIconInfo = new HomeIconInfo(iconName[i], typedArray.getResourceId(i, 0));
//将iconName获取到的文本资源添加到第二个GridView数组里
mPagerTwoData.add(homeIconInfo);
}
}
}

initView();

初始化GridView和ViewPager进行初始化,

第一个GridView的页面

home_gridview布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--定义为一行显示4个条目,因为GridView是放在ViewPager里的,所以即便填充父窗体,大小也被ViewPager给限制住了-->
<GridView
android:id="@+id/gridView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:numColumns="4">

</GridView>
</LinearLayout>

注意:View PagerOne = getLayoutInflater().inflate(R.layout.home_gridview,
null);来加载GridView布局

private void initView() {
//把有GridView布局资源转换为View对象
View PagerOne = getLayoutInflater().inflate(R.layout.home_gridview, null);
//从装有GridView的View对象里查找GridView对象
GridView gridView01 = (GridView) PagerOne.findViewById(R.id.gridView);
//为GridView设置适配器
gridView01.setAdapter(new MyGridViewAdapter(mPagerOneData, this));
//设置GridView的点击事件
gridView01.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
Toast.makeText(MainActivity.this, "你点击的是第" + position + "个", Toast.LENGTH_SHORT).show();
}
});

/**
* 第二个GridView的页面
*/
View pagerTwo = getLayoutInflater().inflate(R.layout.home_gridview, null);
GridView gridView02 = (GridView) pagerTwo.findViewById(R.id.gridView);
gridView02.setAdapter(new MyGridViewAdapter(mPagerTwoData, this));
gridView02.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
Toast.makeText(MainActivity.this, "你点击的是:" + position + "个", Toast.LENGTH_SHORT).show();
}
});
//把设置好数据的框架放到集合里,给viewpager进行加载
mViews.add(PagerOne);
mViews.add(pagerTwo);
//对viewPager初始化
ViewPager viewpager = (ViewPager) findViewById(R.id.viewpager);
viewpager.setAdapter(new MyPagerAdapter(mViews));
}

创建一个MyPagerAdapter继承PagerAdapter实现4种方法:



 

public class MyPagerAdapter extends PagerAdapter {

//存放外界传来的集合数据
private List<View> mViews = new ArrayList<>();

//构造方法,进行容器数据的初始化,必须把外界的数据传进来,让ViewPager进行加载显示
//提示:有些参数没有数据,但是代码中用到了,第一个想到的构造方法,传数据
public MyPagerAdapter(List<View> views) {
mViews = views;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
//从容器里拿数据
View view = mViews.get(position);
//把控件对象放入ViewPager的容器里,进行显示
container.addView(view);
//把控件显示出来,方便销毁
return view;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
//把不用的View对象销毁,防止内存泄漏
container.removeView(mViews.get(position));
}

@Override
public int getCount() {
return mViews.size();
}

@Override
public boolean isViewFromObject(View view, Object object) {
return view == object;
}
}

最后创建一个MyGridViewAdapter继承BaseAdapter实现4中方法;



gird_item:布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--每个item上面是图片,下面是文本垂直排列-->
<ImageView
android:id="@+id/iv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>

<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"/>
</LinearLayout>

 View inflater = LayoutInflater.from(mContext).inflate(R.layout.gird_item, null);这个是加载子布局:

public class MyGridViewAdapter extends BaseAdapter {
//装数据的容器,没有数据,通过构造方法把外界的数据加载到这里
private List<HomeIconInfo> itemData = new ArrayList<HomeIconInfo>();
private Context mContext;

public MyGridViewAdapter(List<HomeIconInfo> itemData, Context context) {
this.itemData = itemData;
mContext = context;
}

//根据容器的大小,显示多少个item
@Override
public int getCount() {
return itemData.size();
}

@Override
public View getView(int i, View view, ViewGroup viewGroup) {
//把一个item的xml布局转换为一个View资源
View inflater = LayoutInflater.from(mContext).inflate(R.layout.gird_item, null);
//初始化ImageView对象,设置图片资源
ImageView imageView = (ImageView) inflater.findViewById(R.id.iv);
imageView.setImageResource(itemData.get(i).getIconID());
//初始化TextView对象,设置文本资源
TextView textView = (TextView) inflater.findViewById(R.id.tv);
textView.setText(itemData.get(i).getIconName());
return inflater;
}
@Override
public Object getItem(int position) {
return position;
}

@Override
public long getItemId(int position) {

return position;
}

}