Android自定义控件下拉刷新实例代码

实现效果:

图片素材:

--> 首先, 写先下拉刷新时的刷新布局 pull_to_refresh.xml:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<resources>    <string name= "app_name" >PullToRefreshTest</string>    <string name= "pull_to_refresh" >下拉可以刷新</string>    <string name= "release_to_refresh" >释放立即刷新</string>    <string name= "refreshing" >正在刷新...</string>    <string name= "not_updated_yet" >暂未更新过</string>    <string name= "updated_at" >上次更新于%1$s前</string>    <string name= "updated_just_now" >刚刚更新</string>    <string name= "time_error" >时间有问题</string> </resources> <?xml version= "1.0" encoding= "utf-8" ?> <RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android"    android:id= "@+id/pull_to_refresh_head"    android:layout_width= "match_parent"    android:layout_height= "60dp" >    <LinearLayout      android:layout_width= "200dp"      android:layout_height= "60dp"      android:layout_centerInParent= "true"      android:orientation= "horizontal" >      <RelativeLayout        android:layout_width= "0dp"        android:layout_height= "60dp"        android:layout_weight= "3" >        <ImageView          android:id= "@+id/arrow"          android:layout_width= "wrap_content"          android:layout_height= "wrap_content"          android:layout_centerInParent= "true"          android:src= "@mipmap/indicator_arrow" />        <ProgressBar          android:id= "@+id/progress_bar"          android:layout_width= "30dp"          android:layout_height= "30dp"          android:layout_centerInParent= "true"          android:visibility= "gone" />      </RelativeLayout>      <LinearLayout        android:layout_width= "0dp"        android:layout_height= "60dp"        android:layout_weight= "12"        android:orientation= "vertical" >        <TextView          android:id= "@+id/description"          android:layout_width= "match_parent"          android:layout_height= "0dp"          android:layout_weight= "1"          android:gravity= "center_horizontal|bottom"          android:text= "@string/pull_to_refresh" />        <TextView          android:id= "@+id/updated_at"          android:layout_width= "match_parent"          android:layout_height= "0dp"          android:layout_weight= "1"          android:gravity= "center_horizontal|top"          android:text= "@string/updated_at" />      </LinearLayout>    </LinearLayout> </RelativeLayout>

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370

strings pull_to_refresh --> 然后, 也是主要的, 自定义下拉刷新的 View (包含下拉刷新所有操作) RefreshView.java: package com.dragon.android.tofreshlayout; import android.content.Context; import android.content.SharedPreferences; import android.os.AsyncTask; import android.os.SystemClock; import android.preference.PreferenceManager; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.ViewConfiguration; import android.view.animation.RotateAnimation; import android.widget.ImageView; import android.widget.LinearLayout; import android.widget.ListView; import android.widget.ProgressBar; import android.widget.TextView; public class RefreshView extends LinearLayout implements View.OnTouchListener { private static final String TAG = RefreshView. class .getSimpleName(); public enum PULL_STATUS { STATUS_PULL_TO_REFRESH( 0 ), // 下拉状态 STATUS_RELEASE_TO_REFRESH( 1 ), // 释放立即刷新状态 STATUS_REFRESHING( 2 ), // 正在刷新状态 STATUS_REFRESH_FINISHED( 3 ); // 刷新完成或未刷新状态 private int status; // 状态 PULL_STATUS( int value) { this .status = value; } public int getValue() { return this .status; } } // 下拉头部回滚的速度 public static final int SCROLL_SPEED = - 20 ; // 一分钟的毫秒值，用于判断上次的更新时间 public static final long ONE_MINUTE = 60 * 1000 ; // 一小时的毫秒值，用于判断上次的更新时间 public static final long ONE_HOUR = 60 * ONE_MINUTE; // 一天的毫秒值，用于判断上次的更新时间 public static final long ONE_DAY = 24 * ONE_HOUR; // 一月的毫秒值，用于判断上次的更新时间 public static final long ONE_MONTH = 30 * ONE_DAY; // 一年的毫秒值，用于判断上次的更新时间 public static final long ONE_YEAR = 12 * ONE_MONTH; // 上次更新时间的字符串常量，用于作为 SharedPreferences 的键值 private static final String UPDATED_AT = "updated_at" ; // 下拉刷新的回调接口 private PullToRefreshListener mListener; private SharedPreferences preferences; // 用于存储上次更新时间 private View header; // 下拉头的View private ListView listView; // 需要去下拉刷新的ListView private ProgressBar progressBar; // 刷新时显示的进度条 private ImageView arrow; // 指示下拉和释放的箭头 private TextView description; // 指示下拉和释放的文字描述 private TextView updateAt; // 上次更新时间的文字描述 private MarginLayoutParams headerLayoutParams; // 下拉头的布局参数 private long lastUpdateTime; // 上次更新时间的毫秒值 // 为了防止不同界面的下拉刷新在上次更新时间上互相有冲突，使用id来做区分 private int mId = - 1 ; private int hideHeaderHeight; // 下拉头的高度 /** * 当前处理什么状态，可选值有 STATUS_PULL_TO_REFRESH, STATUS_RELEASE_TO_REFRESH, STATUS_REFRESHING 和 STATUS_REFRESH_FINISHED */ private PULL_STATUS currentStatus = PULL_STATUS.STATUS_REFRESH_FINISHED; // 记录上一次的状态是什么，避免进行重复操作 private PULL_STATUS lastStatus = currentStatus; private float yDown; // 手指按下时的屏幕纵坐标 private int touchSlop; // 在被判定为滚动之前用户手指可以移动的最大值。 private boolean loadOnce; // 是否已加载过一次layout，这里onLayout中的初始化只需加载一次 private boolean ableToPull; // 当前是否可以下拉，只有ListView滚动到头的时候才允许下拉 /** * 下拉刷新控件的构造函数，会在运行时动态添加一个下拉头的布局 */ public RefreshView(Context context, AttributeSet attrs) { super (context, attrs); preferences = PreferenceManager.getDefaultSharedPreferences(context); header = LayoutInflater.from(context).inflate(R.layout.pull_to_refresh, null , true ); progressBar = (ProgressBar) header.findViewById(R.id.progress_bar); arrow = (ImageView) header.findViewById(R.id.arrow); description = (TextView) header.findViewById(R.id.description); updateAt = (TextView) header.findViewById(R.id.updated_at); touchSlop = ViewConfiguration.get(context).getScaledTouchSlop(); refreshUpdatedAtValue(); setOrientation(VERTICAL); addView(header, 0 ); //Log.d(TAG, "RefreshView Constructor() getChildAt(0): " + getChildAt(0)); //Log.d(TAG, "RefreshView Constructor() getChildAt(0): " + getChildAt(1)); // listView = (ListView) getChildAt(1); // listView.setOnTouchListener(this); } /** * 进行一些关键性的初始化操作，比如：将下拉头向上偏移进行隐藏，给 ListView 注册 touch 事件 */ @Override protected void onLayout( boolean changed, int l, int t, int r, int b) { super .onLayout(changed, l, t, r, b); if (changed && !loadOnce) { hideHeaderHeight = -header.getHeight(); headerLayoutParams = (MarginLayoutParams) header.getLayoutParams(); headerLayoutParams.topMargin = hideHeaderHeight; listView = (ListView) getChildAt( 1 ); //Log.d(TAG, "onLayout() getChildAt(0): " + getChildAt(0)); //Log.d(TAG, "onLayout() listView: " + listView); listView.setOnTouchListener( this ); loadOnce = true ; } } /** * 当 ListView 被触摸时调用，其中处理了各种下拉刷新的具体逻辑 */ @Override public boolean onTouch(View v, MotionEvent event) { setCanAbleToPull(event); // 判断是否可以下拉 if (ableToPull) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: yDown = event.getRawY(); break ; case MotionEvent.ACTION_MOVE: // 获取移动中的 Y 轴的位置 float yMove = event.getRawY(); // 获取从按下到移动过程中移动的距离 int distance = ( int ) (yMove - yDown); // 如果手指是上滑状态，并且下拉头是完全隐藏的，就屏蔽下拉事件 if (distance <= 0 && headerLayoutParams.topMargin <= hideHeaderHeight) { return false ; } if (distance < touchSlop) { return false ; } // 判断是否已经在刷新状态 if (currentStatus != PULL_STATUS.STATUS_REFRESHING) { // 判断设置的 topMargin 是否 > 0, 默认初始设置为 -header.getHeight() if (headerLayoutParams.topMargin > 0 ) { currentStatus = PULL_STATUS.STATUS_RELEASE_TO_REFRESH; } else { // 否则状态为下拉中的状态 currentStatus = PULL_STATUS.STATUS_PULL_TO_REFRESH; } // 通过偏移下拉头的 topMargin 值，来实现下拉效果 headerLayoutParams.topMargin = (distance / 2 ) + hideHeaderHeight; header.setLayoutParams(headerLayoutParams); } break ; case MotionEvent.ACTION_UP: default : if (currentStatus == PULL_STATUS.STATUS_RELEASE_TO_REFRESH) { // 松手时如果是释放立即刷新状态，就去调用正在刷新的任务 new RefreshingTask().execute(); } else if (currentStatus == PULL_STATUS.STATUS_PULL_TO_REFRESH) { // 松手时如果是下拉状态，就去调用隐藏下拉头的任务 new HideHeaderTask().execute(); } break ; } // 时刻记得更新下拉头中的信息 if (currentStatus == PULL_STATUS.STATUS_PULL_TO_REFRESH || currentStatus == PULL_STATUS.STATUS_RELEASE_TO_REFRESH) { updateHeaderView(); // 当前正处于下拉或释放状态，要让 ListView 失去焦点，否则被点击的那一项会一直处于选中状态 listView.setPressed( false ); listView.setFocusable( false ); listView.setFocusableInTouchMode( false ); lastStatus = currentStatus; // 当前正处于下拉或释放状态，通过返回 true 屏蔽掉 ListView 的滚动事件 return true ; } } return false ; } /** * 给下拉刷新控件注册一个监听器 * * @param listener 监听器的实现 * @param id 为了防止不同界面的下拉刷新在上次更新时间上互相有冲突，不同界面在注册下拉刷新监听器时一定要传入不同的 id */ public void setOnRefreshListener(PullToRefreshListener listener, int id) { mListener = listener; mId = id; } /** * 当所有的刷新逻辑完成后，记录调用一下，否则你的 ListView 将一直处于正在刷新状态 */ public void finishRefreshing() { currentStatus = PULL_STATUS.STATUS_REFRESH_FINISHED; preferences.edit().putLong(UPDATED_AT + mId, System.currentTimeMillis()).commit(); new HideHeaderTask().execute(); } /** * 根据当前 ListView 的滚动状态来设定 {@link #ableToPull} * 的值，每次都需要在 onTouch 中第一个执行，这样可以判断出当前应该是滚动 ListView，还是应该进行下拉 */ private void setCanAbleToPull(MotionEvent event) { View firstChild = listView.getChildAt( 0 ); if (firstChild != null ) { // 获取 ListView 中第一个Item的位置 int firstVisiblePos = listView.getFirstVisiblePosition(); // 判断第一个子控件的 Top 是否和第一个 Item 位置相等 if (firstVisiblePos == 0 && firstChild.getTop() == 0 ) { if (!ableToPull) { // getRawY() 获得的是相对屏幕 Y 方向的位置 yDown = event.getRawY(); } // 如果首个元素的上边缘，距离父布局值为 0，就说明 ListView 滚动到了最顶部，此时应该允许下拉刷新 ableToPull = true ; } else { if (headerLayoutParams.topMargin != hideHeaderHeight) { headerLayoutParams.topMargin = hideHeaderHeight; header.setLayoutParams(headerLayoutParams); } ableToPull = false ; } } else { // 如果 ListView 中没有元素，也应该允许下拉刷新 ableToPull = true ; } } /** * 更新下拉头中的信息 */ private void updateHeaderView() { if (lastStatus != currentStatus) { if (currentStatus == PULL_STATUS.STATUS_PULL_TO_REFRESH) { description.setText(getResources().getString(R.string.pull_to_refresh)); arrow.setVisibility(View.VISIBLE); progressBar.setVisibility(View.GONE); rotateArrow(); } else if (currentStatus == PULL_STATUS.STATUS_RELEASE_TO_REFRESH) { description.setText(getResources().getString(R.string.release_to_refresh)); arrow.setVisibility(View.VISIBLE); progressBar.setVisibility(View.GONE); rotateArrow(); } else if (currentStatus == PULL_STATUS.STATUS_REFRESHING) { description.setText(getResources().getString(R.string.refreshing)); progressBar.setVisibility(View.VISIBLE); arrow.clearAnimation(); arrow.setVisibility(View.GONE); } refreshUpdatedAtValue(); } } /** * 根据当前的状态来旋转箭头 */ private void rotateArrow() { float pivotX = arrow.getWidth() / 2f; float pivotY = arrow.getHeight() / 2f; float fromDegrees = 0f; float toDegrees = 0f; if (currentStatus == PULL_STATUS.STATUS_PULL_TO_REFRESH) { fromDegrees = 180f; toDegrees = 360f; } else if (currentStatus == PULL_STATUS.STATUS_RELEASE_TO_REFRESH) { fromDegrees = 0f; toDegrees = 180f; } RotateAnimation animation = new RotateAnimation(fromDegrees, toDegrees, pivotX, pivotY); animation.setDuration( 100 ); animation.setFillAfter( true ); arrow.startAnimation(animation); } /** * 刷新下拉头中上次更新时间的文字描述 */ private void refreshUpdatedAtValue() { lastUpdateTime = preferences.getLong(UPDATED_AT + mId, - 1 ); long currentTime = System.currentTimeMillis(); long timePassed = currentTime - lastUpdateTime; long timeIntoFormat; String updateAtValue; if (lastUpdateTime == - 1 ) { updateAtValue = getResources().getString(R.string.not_updated_yet); } else if (timePassed < 0 ) { updateAtValue = getResources().getString(R.string.time_error); } else if (timePassed < ONE_MINUTE) { updateAtValue = getResources().getString(R.string.updated_just_now); } else if (timePassed < ONE_HOUR) { timeIntoFormat = timePassed / ONE_MINUTE; String value = timeIntoFormat + "分钟" ; updateAtValue = String.format(getResources().getString(R.string.updated_at), value); } else if (timePassed < ONE_DAY) { timeIntoFormat = timePassed / ONE_HOUR; String value = timeIntoFormat + "小时" ; updateAtValue = String.format(getResources().getString(R.string.updated_at), value); } else if (timePassed < ONE_MONTH) { timeIntoFormat = timePassed / ONE_DAY; String value = timeIntoFormat + "天" ; updateAtValue = String.format(getResources().getString(R.string.updated_at), value); } else if (timePassed < ONE_YEAR) { timeIntoFormat = timePassed / ONE_MONTH; String value = timeIntoFormat + "个月" ; updateAtValue = String.format(getResources().getString(R.string.updated_at), value); } else { timeIntoFormat = timePassed / ONE_YEAR; String value = timeIntoFormat + "年" ; updateAtValue = String.format(getResources().getString(R.string.updated_at), value); } updateAt.setText(updateAtValue); } /** * 正在刷新的任务，在此任务中会去回调注册进来的下拉刷新监听器 */ class RefreshingTask extends AsyncTask<Void, Integer, Void> { @Override protected Void doInBackground(Void... params) { int topMargin = headerLayoutParams.topMargin; while ( true ) { topMargin = topMargin + SCROLL_SPEED; if (topMargin <= 0 ) { topMargin = 0 ; break ; } publishProgress(topMargin); SystemClock.sleep( 10 ); } currentStatus = PULL_STATUS.STATUS_REFRESHING; publishProgress( 0 ); if (mListener != null ) { mListener.onRefresh(); } return null ; } @Override protected void onProgressUpdate(Integer... topMargin) { updateHeaderView(); headerLayoutParams.topMargin = topMargin[ 0 ]; header.setLayoutParams(headerLayoutParams); } } /** * 隐藏下拉头的任务，当未进行下拉刷新或下拉刷新完成后，此任务将会使下拉头重新隐藏 */ class HideHeaderTask extends AsyncTask<Void, Integer, Integer> { @Override protected Integer doInBackground(Void... params) { int topMargin = headerLayoutParams.topMargin; while ( true ) { topMargin = topMargin + SCROLL_SPEED; if (topMargin <= hideHeaderHeight) { topMargin = hideHeaderHeight; break ; } publishProgress(topMargin); SystemClock.sleep( 10 ); } return topMargin; } @Override protected void onProgressUpdate(Integer ... topMargin) { headerLayoutParams.topMargin = topMargin[ 0 ]; header.setLayoutParams(headerLayoutParams); } @Override protected void onPostExecute(Integer topMargin) { headerLayoutParams.topMargin = topMargin; header.setLayoutParams(headerLayoutParams); currentStatus = PULL_STATUS.STATUS_REFRESH_FINISHED; } } /** * 下拉刷新的监听器，使用下拉刷新的地方应该注册此监听器来获取刷新回调 */ public interface PullToRefreshListener { // 刷新时会去回调此方法，在方法内编写具体的刷新逻辑。注意此方法是在子线程中调用的， 可以不必另开线程来进行耗时操作 void onRefresh(); } }

--> 第三步, 写主布局:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<?xml version= "1.0" encoding= "utf-8" ?> <RelativeLayout xmlns:android= "http://schemas.android.com/apk/res/android"    xmlns:tools= "http://schemas.android.com/tools"    android:layout_width= "match_parent"    android:layout_height= "match_parent"    tools:context= ".MainActivity" >    <com.dragon.android.tofreshlayout.RefreshView      android:id= "@+id/refreshable_view"      android:layout_width= "match_parent"      android:layout_height= "match_parent" >      <ListView        android:id= "@+id/list_view"        android:layout_width= "match_parent"        android:layout_height= "match_parent" >      </ListView>    </com.dragon.android.tofreshlayout.RefreshView> </RelativeLayout>

--> 最后, Java 代码添加 ListView 的数据:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

package com.dragon.android.tofreshlayout; import android.os.Bundle; import android.os.SystemClock; import android.support.v7.app.AppCompatActivity; import android.webkit.WebView; import android.widget.ArrayAdapter; import android.widget.ListView; public class MainActivity extends AppCompatActivity {    RefreshView refreshableView;    ListView listView;    ArrayAdapter<String> adapter;    private WebView webView;    private static int NUM = 30 ;    String[] items = new String[NUM];    @Override    protected void onCreate(Bundle savedInstanceState) {      super .onCreate(savedInstanceState);      setContentView(R.layout.activity_main);      getSupportActionBar().hide();      for ( int i = 0 ; i < items.length; i++) {        items[i] = "列表项" + i;      }      refreshableView = (RefreshView) findViewById(R.id.refreshable_view);      listView = (ListView) findViewById(R.id.list_view);      adapter = new ArrayAdapter<>( this , android.R.layout.simple_list_item_1, items);      listView.setAdapter(adapter);      refreshableView.setOnRefreshListener( new RefreshView.PullToRefreshListener() {        @Override        public void onRefresh() {          SystemClock.sleep( 3000 );          refreshableView.finishRefreshing();        }      }, 0 );    } }

程序 Demo: 链接：http://pan.baidu.com/s/1ge6Llw3 密码：skna