ViewPager + GridView实现GridView分页

article/2025/9/23 0:11:29

概述

通过ViewPager实现GridView的分页

实现

ViewPager通过设置PagerAdapter实现分页。每一页的布局是一个GridView。GridView通过设置自己adapter渲染GridView。

ViewPager:分页器。
GridViewPageAdapter:继承自PagerAdapter。ViewPager的适配器。
GridView:网格布局
GridViewAdapter、:GridView的适配器。继承自通过用型adapter,CommonAdapter

这里写图片描述

GridView的adapter,GridViewAdapter的布局文件,grid_view_item

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"><data class=".GridItemBinding"><import type="android.view.View"></import></data><RelativeLayout
        android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center"android:minHeight="80dp"><ImageView
            android:id="@+id/item_img"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerHorizontal="true"/><TextView
            android:id="@+id/item_name"android:layout_centerHorizontal="true"android:layout_marginTop="6dp"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/item_img"android:gravity="center"android:textColor="#5b5a5a"android:textSize="12sp"android:text="Item"/></RelativeLayout>
</layout>

GridView的adapter,GridViewAdapter

package com.syz.example.adapter;import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;import com.syz.example.R;import java.util.List;/*** Created by SYZ on 16/10/28.*/public class GridViewAdapter extends CommonAdapter{public GridViewAdapter(List<String> data){super(data);}@Overridepublic int getItemViewResId() {return R.layout.grid_view_item;}@Overridepublic View getItemView(int position, View convertView, ViewHolder viewHolder) {TextView itemName = viewHolder.getView(R.id.item_name);itemName.setText((CharSequence) getData().get(position));ImageView icon = viewHolder.getView(R.id.item_img);if (position%7 ==0){icon.setImageResource(R.drawable.grid_1);} else if(position%7 ==1){icon.setImageResource(R.drawable.grid_2);} else if (position%7 ==2){icon.setImageResource(R.drawable.grid_3);} else if (position%7 ==3){icon.setImageResource(R.drawable.grid_4);} else if (position%7 ==4){icon.setImageResource(R.drawable.grid_5);} else if (position%7 ==5){icon.setImageResource(R.drawable.grid_6);} else {icon.setImageResource(R.drawable.grid_7);}return convertView;}
}

ViewPager的PagerAdapter,GridViewPageAdapter

package com.syz.example.adapter;import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;import java.util.List;/*** Created by SYZ on 16/10/28.*/public class GridViewPageAdapter extends PagerAdapter {private List<View> views;public GridViewPageAdapter(List<View> views){this.views = views;}public void setViews(List<View> views){this.views = views;notifyDataSetChanged();}@Overridepublic int getCount() {return views == null?0:views.size();}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView((View) object);}@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(views.get(position), 0);return views.get(position);}@Overridepublic boolean isViewFromObject(View view, Object object) {return view.equals(object);}
}

GridPagerActivity的布局文件,activity_grid_pager_view.xml

<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"><data class=".GridPagerBinding"><import type="android.view.View" /></data><RelativeLayout
        android:id="@+id/activity_grid_view"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.syz.example.gridview.GridPagerActivity"><android.support.v4.view.ViewPager
            android:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="250dp"android:layout_marginTop="10dp"/><RadioGroup
            android:id="@+id/work_indicator"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_weight="0"android:gravity="center"android:layout_below="@id/viewpager"android:orientation="horizontal"android:paddingBottom="5dp"android:paddingTop="5dp"></RadioGroup></RelativeLayout>
</layout>

GridPagerActivity

package com.syz.example.gridview;import android.databinding.DataBindingUtil;
import android.graphics.Bitmap;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AdapterView;
import android.widget.GridView;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;import com.syz.example.App;
import com.syz.example.GridPagerBinding;
import com.syz.example.R;
import com.syz.example.adapter.GridViewAdapter;
import com.syz.example.adapter.GridViewPageAdapter;import java.util.ArrayList;
import java.util.List;public class GridPagerActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener,AdapterView.OnItemClickListener{private GridPagerBinding binding;private GridViewPageAdapter pageAdapter;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);binding = DataBindingUtil.setContentView(this, R.layout.activity_grid_pager_view);initView();}private void initView() {initData();initPageGridView();}private List<String> list = new ArrayList<String>();private void initData() {list.add("百度");list.add("新浪");list.add("优酷");list.add("乐视");list.add("搜狐");list.add("淘宝");list.add("天猫");list.add("京东");list.add("当当");list.add("腾讯");list.add("阿里");list.add("阿里");list.add("阿里");list.add("阿里");list.add("阿里");list.add("阿里");list.add("阿里");list.add("阿里");list.add("阿里");}private static final int ITEM_COUNT_OF_PAGE = 12;private void initPageGridView() {List<View> gridViews = new ArrayList<View>();int count = list.size() / ITEM_COUNT_OF_PAGE;if (list.size() % ITEM_COUNT_OF_PAGE != 0){count++;}List<String> pageItem;for (int i = 0; i < count; i++) {GridView gridView = (GridView) LayoutInflater.from(this).inflate(R.layout.activity_grid_pager,null);if(i==count-1){pageItem = list.subList(i*ITEM_COUNT_OF_PAGE,list.size());GridViewAdapter adapter = new GridViewAdapter(pageItem);gridView.setAdapter(adapter);}else {pageItem = list.subList(i*ITEM_COUNT_OF_PAGE,(i+1)*ITEM_COUNT_OF_PAGE);GridViewAdapter adapter = new GridViewAdapter(pageItem);gridView.setAdapter(adapter);}gridViews.add(gridView);gridView.setOnItemClickListener(this);// 添加指示器addNavigation(i);//每一页添加一个RadioButton,默认选中第一个}pageAdapter = new GridViewPageAdapter(gridViews);binding.viewpager.setAdapter(pageAdapter);binding.viewpager.addOnPageChangeListener(this);}/*** 添加指示器* 每一页添加一个RadioButton,默认选中第一个* @param index*/private void addNavigation(final int index) {RadioButton rb = new RadioButton(App.getContext());rb.setButtonDrawable(new BitmapDrawable(getResources(), (Bitmap) null));rb.setBackgroundResource(R.drawable.work_indicator_item_bg);RadioGroup.LayoutParams params = new RadioGroup.LayoutParams(16, 16);params.setMargins(10, 10, 10, 10);params.gravity = Gravity.CENTER;binding.workIndicator.addView(rb, params);if (index == 0) {rb.setChecked(true);}// 点击效果rb.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View arg0) {binding.viewpager.setCurrentItem(index);}});}/*** 展示导航** @param index*/private void show(int index) {RadioButton rb = (RadioButton) binding.workIndicator.getChildAt(index);rb.setChecked(true);}@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}@Overridepublic void onPageSelected(int position) {show(position);}@Overridepublic void onPageScrollStateChanged(int state) {}@Overridepublic void onItemClick(AdapterView<?> parent, View view, int position, long id) {Toast.makeText(this, "I am the item "+position, Toast.LENGTH_SHORT).show();}
}

最后是程序的运行效果截图:
这里写图片描述
这里写图片描述


http://chatgpt.dhexx.cn/article/KfGnI5TM.shtml

相关文章

非常实用的GridView.PagerTemplate 属性

获取或设置 GridView 控件中页导航行的自定义内容。 命名空间:System.Web.UI.WebControls程序集:System.Web&#xff08;在 system.web.dll 中&#xff09; 语法&#xff1a;C# [TemplateContainerAttribute( typeof (GridViewRow))] public virtual ITemplate PagerTempla…

ViewPager的PagerAdapter中的notifyDataSetChanged更新数据总结

最近在工作中遇到了一个问题&#xff0c;就是在viewpager中调用pageradapter.notifydatasetchanged方法&#xff0c;好像没有任何效果&#xff0c;相应的view也没有更新数据&#xff0c;根据官方API是这样解释的&#xff1a;大概是说明Adapter会自动管辖ViewPager每一页(Item)的…

GridView1_PageIndexChanging 分页

//这里点击页面会报错所以要写这个 然后从新刷新一下 可以调一下属性什么的 this.GridView1.PageIndex e.NewPageIndex;jiazai(); c#后台写弹窗 跳转 Response.Write("<script>alert(修改成功);window.location.hrefhttp://localhost:65390/%E6%88%BF%E5%B1…

ViewPager控件之PagerAdapter适配器

一、ViewPager的基本用法 1、简介 ViewPager可以实现多个界面的左右滑动。ViewPager最典型的应用场景主要包 括引导页导航&#xff0c;轮转广告和页面菜单。 ViewPager最早出自4.0版本,为了兼容低版本安卓设备&#xff0c;谷歌官方给我们提供了 一个的软件包android.support.v4…

ViewPager onPageChangeListener总结

android ViewPager滑动事件讲解 今天在做项目的时候&#xff0c;由于要处理viewPager页面滑动的事件&#xff0c;所以对其进行了一个小小的研究&#xff1a; 首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageChangeListener这个接口需要实现三个方法&am…

ViewPager onPageChangeListener总结

android ViewPager滑动事件讲解 今天在做项目的时候&#xff0c;由于要处理viewPager页面滑动的事件&#xff0c;所以对其进行了一个小小的研究&#xff1a; 首先ViewPager在处理滑动事件的时候要用到OnPageChangeListener OnPageChangeListener这个接口需要实现三个方法&#…

iscsi命令

iscsi客户端命令 iscsiadm 1.发现target设备 iscsiadm -m discovery -t sendtargets -p 10.12.22.61 疑问&#xff1a;10.12.22.60&#xff1a;3260&#xff0c;1 1表示什么意思(表示portal group tag,参考补充资料1)&#xff0c;此外&#xff0c;为什么连同ip为60的信息…

iSCSI 协议

iSCSI 协议 iSCSI协议结构 如同任何一个协议一样&#xff0c;iSCSI也有一个清晰的层次结构&#xff0c;根据OSI模型&#xff0c;iSCSI的协议栈自顶向下一共可以分为五层&#xff0c;如图所示&#xff1a; SCSI层&#xff1a;根据应用发出的请求建立SCSI CDB(命令描述块)&…

Linux与ISCSI

ISCSI&#xff08;Internet Small Computer System Interface&#xff09;:Internet 小型计算机系统接口&#xff0c;是一个基于 TCP/IP 的协 议&#xff0c;主要用于通过 IP 网络仿真 SCSI&#xff0c;从而为远程块存储设备提供数据传输和管理。说白了&#xff0c;就是通过 网…

ISCSI服务

Internet Small Computer System Interface:Internet 小型计算机系统接口&#xff0c;是一个基于 TCP/IP 的协 议&#xff0c;主要用于通过 IP 网络仿真 SCSI&#xff0c;从而为远程块存储设备提供数据传输和管理。说白了&#xff0c;就是通过 网络由专门的服务器提供存储管理&…

iSCSI 网络磁盘共享

17.1 iSCSI技术介绍 iSCSI技术实现了物理硬盘设备与TCP/TP网络传输协议的相互结合&#xff0c;使得用户可以通过互联网方便的获取到远程机房提供的共享存储资源 硬盘是计算机硬件设备中重要的组成部分之一&#xff0c;存储设备的IO读写速度快慢也直接影响着服务器整体性能的高…

ISCSI的部署与安装

iSCSI&#xff08;Internet Small Computer System Interface&#xff0c;Internet小型计算机系统接口&#xff09;是一种由IBM公司研究开发的IP SAN技术。 该技术是将现有SCSI接口与以太网络(Ethernet)技术结合&#xff0c;基于 TCP/IP的协议连接iSCSI服务端&#xff08;Targe…

SCSI协议与iSCSI协议

文章目录 1.SCSI协议2.iSCSI协议3.IO--SCSI错误处理机制 1.SCSI协议 SCSI的起源 SCSI出现的原因主要是因为原来的IDE接口的硬盘转速太慢&#xff0c;传输速率太低&#xff0c;因此高速的SCSI硬盘出现。其实SCSI并不是专为硬盘设计的&#xff0c;实际上它是一种总线型接口。由…

ISCSI详解(三)——ISCSI原理和架构

今天继续给大家介绍Linux运维相关知识&#xff0c;本文主要内容是ISCSI基础知识。 一、ISCSI架构 ISCSI的架构主要有以下两种&#xff1a; 1、控制器架构 在控制器架构下&#xff0c;ISCSI使用专门的数据传输芯片&#xff0c;专门的RAID数据校验芯片、高性能的cache缓存以及专…

iscsi服务器搭建

iscsi搭建 ISCSI服务介绍服务器配置&#xff08;IP:192.168.155.28&#xff09;客户端配置Linux&#xff08;IP:192.168.155.30&#xff09;Windows配置&#xff08;192.168.155.200&#xff09; ISCSI服务介绍 全称&#xff1a;Internet Small Computer System Interface——…

Windows iSCSI

iSCSI 题目一、安装iSCSI并创建存储位置二、配置iSCSI三、DC1连接iSCSI四、创建盘提示:若需要问题欢迎私聊‘ 题目 iSCSI 磁盘存储在D:\ISCSIDATA 中; iSCSI 磁盘提供给DC1 使用,磁盘容量500 G,启用chap 验证; DC1 上连接成功后,把磁盘格式化为NTFS 格式并挂载到卷标D …

【基于CentOS 7 的iscsi服务】

目录 一、概述 1.简述 2.作用 3. iscsi 4.相关名称 二、使用步骤 - 构建iscsi服务 1.使用targetcli工具进入到iscsi服务器端管理界面 2.实现步骤 2.1 服务器端 2.2 客户端 2.2.1 安装软件 2.2.2 在认证文件中生成iqn编号 2.2.3 开启客户端服务 2.2.4 查找可用的i…

ISCSI服务器搭建与配置

ISCSI服务简介 ISCSI简介&#xff1a; iSCSI( Internet Small Computer System Interface 互联网小型计算机系统接口) 技术是一种新存储技术&#xff0c;该技术是将现有的SCSI接口与以太网技术相结合&#xff0c;使服务器可与使用IP网络的存储装置互相交换资料。 iscsi 结构…

SCSI/ISCSI协议

SCSI即小型计算机接口&#xff08;Small Computer System Interface&#xff09;&#xff0c;指的是一个庞大协议体系&#xff0c;到目前为止经历了SCSI-1/SCSI-2/SCSI-3变迁。 SCSI协议定义了一套不同设备&#xff08;磁盘&#xff0c;磁带&#xff0c;处理器&#xff0c;光设…

iSCSI协议简介

本文综合了几篇参考文献的内容&#xff0c;做了删减与重组&#xff0c;但严格来说&#xff0c;不算原创。 笔者笔记如下&#xff1a; iSCSI initiator和target的核心功能都在内核中&#xff0c;无须人工干预&#xff1b;而要人工干预的大约是这么几件事&#xff1a; 1. 建立…