Android ViewPager嵌套GridView实现滑动网格布局

﹏ヽ暗。殇╰゛Y 2022-09-12 09:54 313阅读 0赞

### Android ViewPager嵌套GridView实现滑动网格布局 ###

*   *  一、效果图：
     *  二、代码：
     *   *  1、布局文件
         *  2、Item对应的Bean文件
         *  3、ViewPager的Adapter
         *  4、GridView的Adapter
         *  5、Activity显示代码
         *   *  下载链接：
 *  共勉：野蛮生长才能到实现更高的高度。

看了网上 ViewPager嵌套GridView实现滑动网格布局的示例，  
有的太旧了，有的代码逻辑不清晰，有的运行不了，  
网上的要给RecyclerView的一个旧例子跑不起来，可能是RecyclerView不是很熟吧。

这里提供一个简单示例。

## 一、效果图： ##

![在这里插入图片描述][2493247024e24417918756e69451b288.gif_pic_center]

最后一两秒的界面，是显示Item图片按下效果，  
ListView和GridView默认是无法实现的，需要写代码适配，这个另外有介绍。

## 二、代码： ##

### 1、布局文件 ###

### 2、Item对应的Bean文件 ###

/**
     * 表格列表Bean
     */
    public class CutBean {
        private String tag;//标签，用于点击后获取对应位置
        private String title; //标题的资源id
        private int pictureId; //图片id
        private int picturePreId; //图片id
    
        public CutBean(String tag, String title, int pictureId) {
            this.tag = tag;
            this.title = title;
            this.pictureId = pictureId;
        }
    
        public CutBean(String tag, String title, int pictureId, int picturePreId) {
            this.tag = tag;
            this.title = title;
            this.pictureId = pictureId;
            this.picturePreId = picturePreId;
        }
    
        public String getTitle() {
            return title;
        }
    
        public void setTitle(String titleId) {
            this.title = titleId;
        }
    
        public int getPictureId() {
            return pictureId;
        }
    
        public void setPictureId(int pictureId) {
            this.pictureId = pictureId;
        }
    
        public String getTag() {
            return tag;
        }
    
        public void setTag(String tag) {
            this.tag = tag;
        }
    
        public int getPicturePreId() {
            return picturePreId;
        }
    
        public void setPicturePreId(int picturePreId) {
            this.picturePreId = picturePreId;
        }
    }

### 3、ViewPager的Adapter ###

package com.liwenzhi.viewpagerandrecycleview.adapter;
    
    import java.util.List;
    import java.util.Map;
    
    import android.content.Context;
    import android.view.View;
    import android.widget.GridView;
    
    import androidx.viewpager.widget.PagerAdapter;
    import androidx.viewpager.widget.ViewPager;
    
    
    /**
     * 实现ViewPager页卡切换的适配器
     */
    public class MyViewPagerAdapter extends PagerAdapter {
        private List<GridView> array;
        private Map<Integer, GridView> map; //每页的GridView对象
    
    
        /**
         * 供外部调用（new）的方法
         *
         * @param context 上下文
         * @param array   添加的序列对象
         */
        public MyViewPagerAdapter(Context context, List<GridView> array) {
            this.array = array;
        }
    
        public MyViewPagerAdapter(Context context, Map<Integer, GridView> map) {
            this.map = map;
        }
    
        @Override
        public int getCount() {
            return map.size();
        }
    
        @Override
        public boolean isViewFromObject(View arg0, Object arg1) {
            return arg0 == arg1;
        }
    
        @Override
        public Object instantiateItem(View arg0, int arg1) {
            ((ViewPager) arg0).addView(map.get(arg1));
            return map.get(arg1);
        }
    
        @Override
        public void destroyItem(View arg0, int arg1, Object arg2) {
            ((ViewPager) arg0).removeView((View) arg2);
        }
    
    
    }

### 4、GridView的Adapter ###

package com.liwenzhi.viewpagerandrecycleview.adapter;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    
    import android.content.Context;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.MotionEvent;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.AdapterView;
    import android.widget.AdapterView.OnItemClickListener;
    import android.widget.BaseAdapter;
    import android.widget.ImageView;
    import android.widget.TextView;
    
    import com.liwenzhi.viewpagerandrecycleview.R;
    
    /**
     * 用于GridView装载数据的适配器
     */
    public class AppGridViewAdapter extends BaseAdapter implements OnItemClickListener {//
        String TAG = "AppGridViewAdapter";
        private List<CutBean> mList;// 定义一个list对象
        private Context mContext;// 上下文
        public static final int APP_PAGE_SIZE = 8;// 每一页装载数据的大小
        private int page;
    
        /**
         * 构造方法
         *
         * @param context 上下文
         * @param list    所有APP的集合
         * @param page    当前页
         */
        public AppGridViewAdapter(Context context, List<CutBean> list, int page) {
            mContext = context;
            this.page = page;
            mList = new ArrayList<CutBean>();
            // 根据当前页计算装载的应用，每页只装载8个
            int i = page * APP_PAGE_SIZE;// 当前页的其实位置
            int iEnd = i + APP_PAGE_SIZE;// 所有数据的结束位置
            while ((i < list.size()) && (i < iEnd)) {
                mList.add(list.get(i));
                i++;
            }
        }
    
        public int getCount() {
            return mList.size();
        }
    
        public Object getItem(int position) {
            return mList.get(position);
        }
    
        public long getItemId(int position) {
            return position;
        }
    
        public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView == null) {
                convertView = LayoutInflater.from(mContext).inflate(
                        R.layout.app_item, parent, false);
                holder = new ViewHolder(convertView);
                // 在缓冲的View对象中添加holder标签
                convertView.setTag(holder);
            } else {
                holder = (ViewHolder) convertView.getTag();
            }
            CutBean cutInfo = mList.get(position);
            holder.setData(cutInfo);
            return convertView;
        }
    
        // 表格点击回调
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            String tag = mList.get(position).getTag();
    
            Log.i(TAG, "onItemClick  position = " + position + ",tag = " + tag);
            // 一般不在adapter处理
            //外部处理
            if (mTagCallListener != null) {
                mTagCallListener.onClickTagView(tag);
            }
        }
    
    
        /**
         * 获取当前页面值
         */
        public int getPage() {
            return page;
        }
    
        /**
         * 设置当前页面值
         */
        public void setPage(int page) {
            this.page = page;
            notifyDataSetChanged();
        }
    
        IClickTagCallBack mTagCallListener;
    
        public void setItemClickTagCallListener(IClickTagCallBack tagCallListener) {
            mTagCallListener = tagCallListener;
        }
    
        public interface IClickTagCallBack {
            void onClickTagView(String tag);
        }
    
    
        // ViewHolder的使用,也是相当于缓冲的功能
        static class ViewHolder {
            TextView name;
            ImageView iv;
    
            // 传入的是一个布局重用的View对象
            public ViewHolder(View convertView) {
                // 冲缓冲中提取数据
                iv = (ImageView) convertView.findViewById(R.id.ivAppIcon);
                name = (TextView) convertView.findViewById(R.id.tvAppName);
            }
    
            // set方法，方便数据的显示，直接显示在屏幕中
            public void setData(CutBean bean) {
                iv.setImageResource(bean.getPictureId());
                name.setText(bean.getTitle());
            }
        }
    
    }

### 5、Activity显示代码 ###

package com.liwenzhi.viewpagerandrecycleview.activity;
    
    import java.util.ArrayList;
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    import android.app.Activity;
    import android.content.Intent;
    import android.os.Bundle;
    import android.util.Log;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.AdapterView;
    import android.widget.GridView;
    import android.widget.LinearLayout;
    import android.widget.Toast;
    
    import androidx.viewpager.widget.ViewPager;
    
    import com.liwenzhi.viewpagerandrecycleview.R;
    import com.liwenzhi.viewpagerandrecycleview.adapter.AppGridViewAdapter;
    import com.liwenzhi.viewpagerandrecycleview.adapter.CutBean;
    import com.liwenzhi.viewpagerandrecycleview.adapter.MyViewPagerAdapter;
    import com.liwenzhi.viewpagerandrecycleview.control.PageControl;
    
    
    /**
     * 实现横向滑动的GridView
     */
    public class MainActivity extends Activity {
        String TAG = "MainActivity";
        private static final float APP_PAGE_SIZE = 8.0f;
        private MyViewPagerAdapter adapter;
        private ViewPager viewPager;
        LayoutInflater inflater;
        private PageControl pageControl;
        private Map<Integer, GridView> map;
        List<CutBean> mCutBeanList = new ArrayList<>();
        int PageCount;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            Log.i(TAG, "onCreate");
            inflater = getLayoutInflater();
            initData();
            initViews();
            initEvent();
        }
    
        private void initData() {
            mCutBeanList.add(new CutBean("1", "插入1", R.mipmap.number1));
            mCutBeanList.add(new CutBean("2", "插入2", R.mipmap.number2));
            mCutBeanList.add(new CutBean("3", "插入3", R.mipmap.number3));
            mCutBeanList.add(new CutBean("4", "插入4", R.mipmap.number4));
            mCutBeanList.add(new CutBean("5", "插入5", R.mipmap.number5));
            mCutBeanList.add(new CutBean("6", "插入6", R.mipmap.number6));
            mCutBeanList.add(new CutBean("7", "插入7", R.mipmap.number7));
            mCutBeanList.add(new CutBean("8", "插入8", R.mipmap.number8));
            mCutBeanList.add(new CutBean("9", "插入9", R.mipmap.number9));
            mCutBeanList.add(new CutBean("10", "插入10", R.mipmap.number10));
            mCutBeanList.add(new CutBean("11", "插入11", R.mipmap.number11));
            mCutBeanList.add(new CutBean("12", "插入12", R.mipmap.number12));
    
            // 计算页数
            PageCount = (int) Math.ceil(mCutBeanList.size() / APP_PAGE_SIZE);
        }
    
        private void initEvent() {
            viewPager.setOnPageChangeListener(new MyPageChangeListener());
        }
    
        /**
         * 获取系统所有的应用程序，并根据APP_PAGE_SIZE生成相应的GridView页面
         */
        public void initViews() {
            //每一个创建一个GridView，放到HashMap中，左右滑动显示的时候取出对话的GridView即可
            map = new HashMap<Integer, GridView>();
            for (int i = 0; i < PageCount; i++) {
                Log.i(TAG, "initViews i = " + i);
                GridView appPage = new GridView(this);
                AppGridViewAdapter adapter = new AppGridViewAdapter(this, mCutBeanList, i);
                adapter.setItemClickTagCallListener(mItemTagCallBack);
                appPage.setNumColumns(4);//多少列，即每行多少个
                appPage.setAdapter(adapter);
                appPage.setOnItemClickListener(adapter);
                map.put(i, appPage);
    
            }
    
            ViewGroup main = (ViewGroup) inflater.inflate(R.layout.activity_main, null);
            // group是R.layou.main中的负责包裹小圆点的LinearLayout.
            ViewGroup group = (ViewGroup) main.findViewById(R.id.viewGroup);
            pageControl = new PageControl(this, (LinearLayout) group, PageCount);
            setContentView(main);
    
            viewPager = (ViewPager) findViewById(R.id.myviewpager);
            adapter = new MyViewPagerAdapter(this, map);
            viewPager.setAdapter(adapter);
    
        }
    
        //滑动事件回调
        class MyPageChangeListener implements ViewPager.OnPageChangeListener {
    
            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
    
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }
    
            //滑动之后页面游标值改变
            @Override
            public void onPageSelected(int position) {
                Log.i(TAG, "onPageSelected position = " + position);
                pageControl.selectPage(position);
            }
    
        }
    
        /**
         * 条目事件的回调
         */
        AppGridViewAdapter.IClickTagCallBack mItemTagCallBack = new AppGridViewAdapter.IClickTagCallBack() {
            @Override
            public void onClickTagView(String tag) {
                Toast.makeText(MainActivity.this, "点击tag:" + tag, Toast.LENGTH_LONG).show();
                //在自己的对应TAG处理具体事务
                switch (tag) {
                    case "1":
                        break;
                    ///...
                }
            }
        };
    
        //跳转到另外一个GridView界面
        public void jumpToActivity2(View view) {
            startActivity(new Intent(this, Activity2.class));
        }
    
    }

代码就介绍到这里，需要具体代码可以进行下载。

#### 下载链接： ####

[https://download.csdn.net/download/wenzhi20102321/24341981][https_download.csdn.net_download_wenzhi20102321_24341981]

# 共勉：野蛮生长才能到实现更高的高度。 #

[2493247024e24417918756e69451b288.gif_pic_center]: /images/20220828/438c89113ae041fd9fc23df88be9412e.png
[https_download.csdn.net_download_wenzhi20102321_24341981]: https://download.csdn.net/download/wenzhi20102321/24341981