现在的位置: 首页 > 综合 > 正文

listview上的各种操作

2013年10月04日 ⁄ 综合 ⁄ 共 4175字 ⁄ 字号 小 中 大 ⁄ 评论关闭

关于listview的操作五花八门，有下拉刷新，分级显示，分页列表，逐页加载等，以后会陆续和大家分享这些技术，今天讲下下拉加载这个功能的实现。

最初的下拉加载应该是ios上的效果，现在很多应用如新浪微博等都加入了这个操作。即下拉listview刷新列表，这无疑是一个非常友好的操作。今天就和大家分享下这个操作的实现。

先看下运行效果：

11.jpg

22.jpg






代码参考国外朋友Johan Nilsson的实现，http://johannilsson.com/2011/03/ ... refresh-update.html。

主要原理为监听触摸和滑动操作，在listview头部加载一个视图。那要做的其实很简单：1.写好加载到listview头部的view 2.重写listview，实现onTouchEvent方法和onScroll方法，监听滑动状态。计算headview全部显示出来即可实行加载动作，加载完成即刷新列表。重新隐藏headview。

首先写下headview的xml代码：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     android:layout_width="fill_parent"
  3.     android:layout_height="fill_parent"
  4.     android:paddingTop="10dip"
  5.     android:paddingBottom="15dip"
  6.     android:gravity="center"
  7.         android:id="@+id/pull_to_refresh_header"
  8.     >
  9.     <ProgressBar 
  10.         android:id="@+id/pull_to_refresh_progress"
  11.         android:indeterminate="true"
  12.         android:layout_width="wrap_content"
  13.         android:layout_height="wrap_content"
  14.         android:layout_marginLeft="30dip"
  15.         android:layout_marginRight="20dip"
  16.         android:layout_marginTop="10dip"
  17.         android:visibility="gone"
  18.         android:layout_centerVertical="true"
  19.         style="?android:attr/progressBarStyleSmall"
  20.         />
  21.     <ImageView
  22.         android:id="@+id/pull_to_refresh_image"
  23.         android:layout_width="wrap_content"
  24.         android:layout_height="wrap_content"
  25.         android:layout_marginLeft="30dip"
  26.         android:layout_marginRight="20dip"
  27.         android:visibility="gone"
  28.         android:layout_gravity="center"
  29.         android:gravity="center"
  30.         android:src="@drawable/ic_pulltorefresh_arrow"
  31.         />
  32.     <TextView
  33.         android:id="@+id/pull_to_refresh_text"
  34.         android:textAppearance="?android:attr/textAppearanceMedium"
  35.         android:textStyle="bold"
  36.         android:paddingTop="5dip"
  37.         android:layout_width="fill_parent"
  38.         android:layout_height="wrap_content"
  39.         android:layout_gravity="center"
  40.         android:gravity="center"
  41.         />
  42.     <TextView
  43.         android:id="@+id/pull_to_refresh_updated_at"
  44.         android:layout_below="@+id/pull_to_refresh_text"
  45.         android:visibility="gone"
  46.         android:textAppearance="?android:attr/textAppearanceSmall"
  47.         android:layout_width="fill_parent"
  48.         android:layout_height="wrap_content"
  49.         android:layout_gravity="center"
  50.         android:gravity="center"
  51.         />
  52. </RelativeLayout>

复制代码

代码比较简单，即headview包括一个进度条一个箭头和两段文字（一个显示加载状态，另一个显示最后刷新时间，本例就不设置了）。

而后重写listview，代码如下：

  1. package com.notice.pullrefresh;


  4. import android.content.Context;
  5. import android.util.AttributeSet;
  6. import android.view.LayoutInflater;
  7. import android.view.MotionEvent;
  8. import android.view.View;
  9. import android.view.ViewGroup;
  10. import android.view.animation.LinearInterpolator;
  11. import android.view.animation.RotateAnimation;
  12. import android.widget.AbsListView;
  13. import android.widget.AbsListView.OnScrollListener;
  14. import android.widget.ImageView;
  15. import android.widget.ListAdapter;
  16. import android.widget.ListView;
  17. import android.widget.ProgressBar;
  18. import android.widget.RelativeLayout;
  19. import android.widget.TextView;



  23. public class PullToRefreshListView extends ListView implements OnScrollListener {

  25.         // 状态
  26.     private static final int TAP_TO_REFRESH = 1;
  27.     private static final int PULL_TO_REFRESH = 2;
  28.     private static final int RELEASE_TO_REFRESH = 3;
  29.     private static final int REFRESHING = 4;


  32.     private OnRefreshListener mOnRefreshListener;


  35.     // 监听对listview的滑动动作
  36.     private OnScrollListener mOnScrollListener;
  37.     private LayoutInflater mInflater;

  39.     //顶部刷新时出现的控件
  40.     private RelativeLayout mRefreshView;
  41.     private TextView mRefreshViewText;
  42.     private ImageView mRefreshViewImage;
  43.     private ProgressBar mRefreshViewProgress;
  44.     private TextView mRefreshViewLastUpdated;

  46.         // 当前滑动状态
  47.     private int mCurrentScrollState;
  48.         // 当前刷新状态
  49.     private int mRefreshState;
  50.     
  51.         // 箭头动画效果
  52.     private RotateAnimation mFlipAnimation;
  53.     private RotateAnimation mReverseFlipAnimation;

  55.     private int mRefreshViewHeight;
  56.     private int mRefreshOriginalTopPadding;
  57.     private int mLastMotionY;

  59.         private boolean mBounceHack;

  61.     public PullToRefreshListView(Context context) {
  62.         super(context);
  63.         init(context);
  64.     }

  66.     public PullToRefreshListView(Context context, AttributeSet attrs) {
  67.         super(context, attrs);
  68.         init(context);
  69.     }

  71.     public PullToRefreshListView(Context context, AttributeSet attrs, int defStyle) {
  72.         super(context, attrs, defStyle);
  73.         init(context);
  74.     }

  76.     /**
  77.      * 初始化控件和箭头动画（这里直接在代码中初始化动画而不是通过xml）
  78.      */
返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞