Android中实现多行、水平滚动的分页的Gridview实例源码

功能要求:
(1)比如每页显示2X2,总共2XN,每个item显示图片+文字(点击有链接)。
如果单行水平滚动,可以用Horizontalscrollview实现。
如果是多行水平滚动,则结合Gridview(一般是垂直滚动的)和Horizontalscrollview实现。
(2)水平滚动翻页,下面有显示当前页的icon。

1.实现自定义的HorizontalScrollView(HorizontalScrollView.java):
因为要翻页时需要传当前页给调用者,所以fling函数中自己实现而不要调用父类的fling。


代码如下:

public class DrawerHScrollView extends HorizontalScrollView {
private static final String TAG = "DrawerHScrollView";

private IDrawerPresenter drawerPresenter = null;
private int currentPage = 0;
private int totalPages = 1;
private static Hashtable<Integer, Integer> positionLeftTopOfPages = new Hashtable();
public DrawerHScrollView(Context context) {
super(context);
}
public DrawerHScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public DrawerHScrollView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}

public void cleanup(){
currentPage = 0;
totalPages = 1;
drawerPresenter = null;
if(positionLeftTopOfPages != null){
positionLeftTopOfPages.clear();
}
}

public void setParameters(int totalPages, int currentPage, int scrollDisX) {
Log.d(TAG, "~~~~~setParameters totalPages:"+totalPages +",currentPage:"+ currentPage +",scrollDisX:"+scrollDisX);
this.totalPages = totalPages;
this.currentPage = currentPage;
positionLeftTopOfPages.clear();
for (int i = 0;i<totalPages;i++){
int posx = (scrollDisX) * i;
positionLeftTopOfPages.put(i, posx);
Log.d(TAG, "~~~~~setParameters i:"+i +",posx:"+posx);
}
smoothScrollTo(0, 0);
}

public void setPresenter(IDrawerPresenter drawerPresenter ) {
this.drawerPresenter = drawerPresenter;
}

@Override
public void fling(int velocityX) {
Log.v(TAG, "-->fling velocityX:"+velocityX);
boolean change_flag = false;
if (velocityX > 0 && (currentPage < totalPages - 1)){
currentPage++;
change_flag = true;
} else if (velocityX < 0 && (currentPage > 0)){
currentPage--;
change_flag = true;
}
if (change_flag){
int postionTo = (Integer)positionLeftTopOfPages.get(new Integer(currentPage)).intValue();
Log.v(TAG, "------smoothScrollTo posx:"+postionTo);
smoothScrollTo(postionTo, 0);
drawerPresenter.dispatchEvent(totalPages, currentPage);
}
//super.fling(velocityX);
}
}

2.布局文件Activity_main.xml:


代码如下:

<com.example.multilinegridview.DrawerHScrollView
android:id="@+id/hscrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:scrollbars="none"
android:layout_below="@id/layout_drawer_top"
android:layout_above="@id/layout_pagenumber"
android:background="#CCCCCC" >
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<GridView
android:id="@+id/gridView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</com.example.multilinegridview.DrawerHScrollView>

3.IDrawerPresenter接口(IDrawerPresenter.java):


代码如下:

public interface IDrawerPresenter {
IDrawerPresenter getInstance();
void dispatchEvent(int totalPages, int currentPage);
}

4.DrawerItem


代码如下:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/layout_item"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_gravity="center"
android:background="#FFFFFF">
<ImageView
android:id="@+id/ivIcon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="优惠券1"
android:textColor="#000000"
android:textStyle="bold"/>
</LinearLayout>

5.MainActivity.java
(1)实现IDrawerPresenter接口,在HorizontalScrollView里通过IDrawerPresenter接口来返回当前页,从而更新pageindicator。


代码如下:

@Override
public IDrawerPresenter getInstance() {
return this;
}
@Override
public void dispatchEvent(int totalPages, int currentPage) {
Log.v(TAG, "~~~~dispatchEvent currentPage:" + currentPage);
Message msg = Message.obtain();
msg.what = MSG_DRAWER_UPDATE_PAGE_LAYOUT;
msg.arg1 = totalPages;
msg.arg2 = currentPage;
handler.sendMessage(msg);
}

(2)PageItemImageView和page indicator的更新
PageItemImageView显示normal的page indicator,之后再将当前页的图片换成selected。


代码如下:

protected class PageItemImageView extends ImageView {
public PageItemImageView(Context context) {
super(context);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
R.drawable.icon_page_normal);
this.setImageBitmap(bitmap);
}
}
public void updateDrawerPageLayout(int total_pages, int sel_page) {
Log.e(TAG, "~~~updateBooksPageLayout total_pages:"+total_pages+",sel_page:"+sel_page);
layout_pagenumber.removeAllViews();
if (total_pages <= 0 || sel_page < 0 || sel_page >= total_pages){
Log.e(TAG, "total_pages or sel_page is outofrange.");
return;
}
for (int i = 0;i< total_pages;i++){
if (i != 0){
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
params.setMargins(5, 0, 0, 0);
layout_pagenumber.addView(new PageItemImageView(this), params);
} else {
layout_pagenumber.addView(new PageItemImageView(this));
}
}
PageItemImageView selItem = (PageItemImageView) layout_pagenumber.getChildAt(sel_page);
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.icon_page_selected);
selItem.setImageBitmap(bitmap);
}

(3)DrawerListAdapter


代码如下:

private class DrawerListAdapter extends BaseAdapter {
private final String TAG = "MyListAdapter";
private LayoutInflater mInflater;
private LinearLayout layout_item;
private TextView tvTitle;
private ImageView ivIcon;
private final Context context;
private int colWid;
private int colHei;
public DrawerListAdapter(Context context, int colWid, int colHei) {
this.context = context;
this.colWid = colWid;
this.colHei = colHei;
mInflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
}
public int getCount() {
return drawerItemList.size();
}
public Object getItem(int position) {
return drawerItemList.get(position);
}
public long getItemId(int position) {
return position;
}
public View getView(int position, View convertView, ViewGroup parent) {
DrawerItem item = drawerItemList.get(position);
if (convertView == null) {
convertView = mInflater.inflate(R.layout.drawer_item, null);
layout_item = (LinearLayout) convertView
.findViewById(R.id.layout_item);
ivIcon = (ImageView) convertView.findViewById(R.id.ivIcon);
tvTitle = (TextView) convertView.findViewById(R.id.tvTitle);
if (colHei != 0 && colWid != 0) {
LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
colWid, colHei - 30);
ivIcon.setLayoutParams(params);
}
convertView.setTag(layout_item);
} else {
layout_item = (LinearLayout) convertView.getTag();
}
ivIcon.setImageResource(R.drawable.ic_launcher);
tvTitle.setText(String.valueOf(position));
return convertView;
}
}

(4)DrawerItemClickListener:
实现OnItemClickListener。
(5) updateDrawerLayout
获得data的size后,可以算出列数来得到固定行。
intnumCols = (drawerItemList.size() - 1) / 2 + 1
再算出gridview的width。因每页可显示2列,最后一页可能右侧没有,为了翻页顺滑,可以给gridview增加一列空白。
intgridViewWid = numCols * colWid + (numCols + 1) * spaceing;
if(numCols % 2 == 1){
gridViewWid+= colWid + spaceing;
}


代码如下:

public void updateDrawerLayout() {
if ((drawerItemList == null) || (drawerItemList.size() == 0)) {
Log.d(TAG, "itemList is null or empty");
return;
}
if (!hasMeasured){
Log.d(TAG, "hasMeasured is false");
return;
}
int scrollWid = hscrollview.getWidth();
int scrollHei = hscrollview.getHeight();
if (scrollWid <= 0 || scrollHei <= 0){
Log.d(TAG, "scrollWid or scrollHei is less than 0");
return;
}

int spaceing = 10;
int colWid = (scrollWid - spaceing * 3) / 2;
int colHei = (scrollHei - spaceing * 3) / 2;
int numCols = (drawerItemList.size() - 1) / 2 + 1;
int gridViewWid = numCols * colWid + (numCols + 1) * spaceing;
// if numCols is odd (like 5), add blank space
if (numCols % 2 == 1){
gridViewWid += colWid + spaceing;
}

LayoutParams params = new LayoutParams(gridViewWid, scrollHei);
gridView.setLayoutParams(params);
gridView.setColumnWidth(colWid);
gridView.setHorizontalSpacing(spaceing);
gridView.setVerticalSpacing(spaceing);
gridView.setStretchMode(GridView.NO_STRETCH);
gridView.setNumColumns(numCols);
adapter = new DrawerListAdapter(this, colWid, colHei);
listener = new DrawerItemClickListener();
gridView.setAdapter(adapter);
gridView.setOnItemClickListener(listener);
int pageNum = (drawerItemList.size() - 1) / 4 + 1;
hscrollview.setParameters(pageNum, 0, scrollWid - spaceing);
updateDrawerPageLayout(pageNum, 0);
}

效果图:

(0)

相关推荐

  • Android实现简单的分页效果

    本文实例为大家分享了Android分页效果的具体代码,供大家参考,具体内容如下 1.实现分页最主要的就是封装分页代码,然后在按钮里实现相关的操作 /** * 分页工具 * * @Project App_Page * @Package com.android.dividepage * @author chenlin * @version 1.0 * @Date 2012年6月2日 * @Note TODO * @param <T> */ public class PageHelper<T&

  • Android实现ListView分页自动加载数据的方法

    Android应用开发中,采用ListView组件来展示数据是很常用的功能,当一个应用要展现很多的数据时,一般情况下都不会把所有的数据一次就展示出来,而是通过分页的形式来展示数据,个人觉得这样会有更好的用户体验.因此,很多应用都是采用分批次加载的形式来获取用户所需的数据.例如:微博客户端可能会在用户滑动至列表底端时自动加载下一页数据,也可能在底部放置一个"查看更多"按钮,用户点击后,加载下一页数据. 下面通过一个Demo来展示ListView功能如何实现:该Demo通过在ListVie

  • Android提高之SQLite分页读取实现方法

    一般来说,Android自身就包含了常用于嵌入式系统的SQLite,这样就免去了开发者自己移植安装的功夫.SQLite 支持多数SQL92标准,很多常用的SQL命令都能在SQLite上面使用,除此之外Android还提供了一系列自定义的方法去简化对SQLite数据库的操作.不过有跨平台需求的程序还是建议使用标准的SQL语句,毕竟这样容易在多个平台之间进行移植. 先来贴出本文程序运行的结果图: 本文实例程序主要讲解了SQLite的基本用法,如:创建数据库,使用SQL命令查询数据表.插入数据,关闭数

  • Android实现基于滑动的SQLite数据分页加载技术(附demo源码下载)

    本文实例讲述了Android实现基于滑动的SQLite数据分页加载技术.分享给大家供大家参考,具体如下: main.xml如下: <menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/action_settings" android:orderInCategory="100" android:showAs

  • Android App中使用ViewPager实现滑动分页的要点解析

    以前如果要做 Tab 分页的话,必须要用一个很难用的 TabActivity,而且做出来的效果很差,弹性也很小 忘了从什么时候开始,Google release 了 ViewPager 这好东西取代了以前难用的 Gallery 元件,加上从 Honeycomb 导入的 Fragment 之后终于能够简单做出好看又好用的 Layout 了! 这里我们采用PagerTabStrip ,做出来的效果如下 特色就是使用简单,出来的效果则是目前显示的分页 Tab 的文字会自动置中,然后分别在左右显示上一个

  • Android程序开发之Listview下拉刷新上拉(滑动分页)加载更多

    最近做的类似于微博的项目中,有个Android功能要使用到listview的向下拉刷新来刷新最新消息,向上拉刷新(滑动分页)来加载更多. 新浪微博就是使用这种方式的典型. 当用户从网络上读取微博的时候,如果一下子全部加载用户未读的微博这将耗费比较长的时间,造成不好的用户体验,同时一屏的内容也不足以显示如此多的内容.这时候,我们就需要用到另一个功能,那就是listview的分页了,其实这个分页可以做成客户端的分页,也可以做成服务器端的分页(点击加载时,从服务器对应的加载第N页就好了!!!).通过分

  • android实现listview分页的方法

    本文实例讲述了android实现listview分页的方法.分享给大家供大家参考.具体分析如下: 最近做了下listview的分页,跟WEB上的分页是一个意思,需要那几个分页参数,不同的是sqlite中分页的查询语句,简便的方法需要用Limit,Offset关键字,前者是查询每页展示的记录数,后者是越过多少记录数,说得明白点就是忽略前面多少行记录之后,取多少行记录 我分页采用了一个重要的类Page,通过封装Page类,做为参数传递进来,返回出去也是个Page对象 import java.util

  • Android之ListView分页加载数据功能实现代码

    什么是ListView分页加载数据功能呢?在现在的大数据时代,我们不可能把某些数据全部展示到界面,好比我们经常会看的QQ空间一样,当你看动态的时候,系统不可能会把所有好友的动态都展示在上面,你能看到的一般都是最新好友更新的动态,假如你要看非最新的好友动态,通常你都会手指向上滑动屏幕然后去查看,当界面下滑到一定数量的时候,就会看到一个"查看更多",然后突然停顿一下,系统会通过网络去给你刷新其他动态信息,这样的功能我们一般叫做数据下拉刷新功能,也就是我们的分页加载功能,具体的实现是怎样的呢

  • Android ListView分页功能实现方法

    通过本次小Demo我学到了: 1.ListView的小小的一个分页功能 2.加深了对自定义控件的理解 3.对ListView的优化 4.对BaseAdapter的使用 5.自定义Adapter 6.接口的回调 要实现下面的效果--当拖动ListView到底部的时候,显示一个ProgressBar和一个"正在加载..."的TextView.并且过两秒钟后,在下面加载出新的数据.项目的目录结构和程序要实现的效果如下:   首先是布局部分: 我为了实现此效果,首先在布局文件中新建了一个foo

  • Android滑动动态分页实现方法

    本文实例讲述了Android滑动动态分页实现方法.分享给大家供大家参考,具体如下: 实现 Android.widget.AbsListView.OnScrollListener 主要代码: private int lastItemIndex; @Override public void onScroll(AbsListView v, int firstVisibleItem,int visibleItemCount, int totalItemCount) { lastItemIndex = f

  • Android开发中滑动分页功能实例详解

    本文实例讲述了Android开发中滑动分页功能.分享给大家供大家参考,具体如下: android UI 往右滑动,滑动到最后一页就自动加载数据并显示 如图: Java代码: package cn.anycall.ju; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.app.Activity; import andro

随机推荐