ViewPager+GridView

最新推荐文章于 2017-12-15 15:19:16 发布

原创最新推荐文章于 2017-12-15 15:19:16 发布 · 476 阅读

CC 4.0 BY-SA版权

该博客介绍了如何结合ViewPager和GridView在Android中实现团购商品的展示。首先，创建XML资源文件存储商品名称和图片；然后，初始化数据，将数据分别放入两个GridView的集合中；接着，创建HomeIconInfo实体类存储图标信息，并为每个GridView设置适配器及点击事件；最后，通过ViewPager展示这两个GridView页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用ViewPager和GridView实现团购商品

1.创建一个XML文件,在文件中声明两个array,用来装名字和图片.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--一个Array就是一个数组,name就是数组名,item就是一个元素,里面包裹元素位置,从上到下,就从0角标不但增大-->
    <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>

2.在MainActivity中创建一个初始化数据的方法

/**
 * 初始化GridView的数据,这些图片,文本数据(可以改成字符串),放到我们的Activity里
 * 会导致代码量太大,不好阅读,所以我们把它放到resources.xml文件里
 */
private void initData() {
    //通过Activity的静态方法getResources,获取resources.xml文件里的字符串资源数组.
    //提示:注意什么类型的数组,就用对用的方法实现
    String[] stringArray = getResources().getStringArray(R.array.home_bar_labels);
    //获取图片资源数组,方法是obtainTypeArray
    TypedArray typedArray = getResources().obtainTypedArray(R.array.home_bar_icon);
    //因为一个GridView,显示两行,一行四个,所以一个GridView,有16个数据,分别装到不同的集合里;
    for (int i = 0; i < stringArray.length; i++) {
        if (i < 8) {
            //把数据装在第一个集合里,给第一个GridView用
            HomeIconInfo homeIconInfo = new HomeIconInfo(stringArray[i], typedArray.getResourceId(i, 0));
            pagerOneData.add(homeIconInfo);
        } else {
            //把数据装在第二个集合里,给第二个GridView用
            HomeIconInfo homeIconInfo = new HomeIconInfo(stringArray[i], typedArray.getResourceId(i, 0));
            pagerTwoData.add(homeIconInfo);
        }
    }

3.创建一个实体类,一个装载主页商品分类资源的容器,一个是图片属性,一个是文字属性

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;
    }
}

4.准备向GridView中添加数据

//定义两个GridView要用装数据的集合对象
private List<HomeIconInfo> pagerOneData = new ArrayList();
private List<HomeIconInfo> pagerTwoData = new ArrayList();

//在OnCreate中写
//第一个GridView的页面
//把有GridView的布资源转换为View对象
View pageOne =  getLayoutInflater().inflate(R.layout.home_gridview, null);
//从装有GridView的View对象里查找GridView对象
GridView gridView01 = (GridView) pageOne.findViewById(R.id.gridView);
//为GridView设置适配器
gridView01.setAdapter(new GridViewAdapter(pagerOneData,this));
//设置点击事件
gridView01.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Toast.makeText(MainActivity.this, ""+pagerOneData.get(i).getIconName(), Toast.LENGTH_SHORT).show();
    }
});

//第二个GridView的页面
View pageTwo = getLayoutInflater().inflate(R.layout.home_gridview, null);
GridView gridView02 = (GridView) pageTwo.findViewById(R.id.gridView);
gridView02.setAdapter(new GridViewAdapter(pagerTwoData,this));
gridView02.setOnItemClickListener(new AdapterView.OnItemClickListener() {
    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
        Toast.makeText(MainActivity.this, ""+pagerTwoData.get(i).getIconName(), Toast.LENGTH_SHORT).show();
    }
});

压缩的布局 home_gridview:

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

GridView适配器类:

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

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

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

    @Override
    public Object getItem(int i) {
        return null;
    }

    @Override
    public long getItemId(int i) {
        return 0;
    }

    @Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        //把一个item的xml布局转化为view资源
        View inflate = LayoutInflater.from(context).inflate(R.layout.grid_item, null);
        //初始化ImageView对象,设置图片资源
        ImageView imgShow = (ImageView) inflate.findViewById(R.id.imgShow);
        imgShow.setImageResource(itemData.get(i).getIconID());
        //初始化TextView对象,设置文本资源
        TextView txtShow = (TextView) inflate.findViewById(R.id.txtShow);
        txtShow.setText(itemData.get(i).getIconName());
        return inflate;
    }
}

5,再定义一个集合,向ViewPager中添加数据

//ViewPager要用的集合,装GridView两个控件
private List<View> views = new ArrayList<>();

//在onCreate中写
//把设置好数据的控件放到集合里,给ViewPager进行加载
views.add(pageOne);
views.add(pageTwo);
//对ViewPager进行初始化
ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
//给ViewPager设置适配器,ViewPager的适配器还写成单独一个
viewPager.setAdapter(new MyPagerAdapter(views));

ViewPager适配器类:

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

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

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

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

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

效果图: