Xamarin Android 打造属于自己的博客园APP（3）
打造通用下拉刷新上拉加载更多组件
android开发中最常用的就是列表组件，如ListView，recycleView，用到它们感觉就会涉及到数据更新，分页加载。
最开始的时候，刷新组件我是在技术群里头找了一个被人绑定好的库，是绑定的github上一个星星很多的java原生组件。但是demo很简单，对于当时小白的我懵逼了，不晓得咋个用，而且一直觉得banding的库总感觉有问题，就想着直接找一个java的库翻译成C#版本的。功夫不负苦心人，在csdn上找到了一篇 http://blog.csdn.net/zhongkejingwang/article/details/38868463
写的很详细，翻译起来也省了不少力，也很感谢原作者。
突然想起一句话，叫做我们不生产代码，只是代码的搬运工！
这里贴上我翻译好的其中几个很重要的组件的代码:
1.PullToRefreshLayout
using System; using System.Threading.Tasks; using Android.Content; using Android.OS; using Android.Util; using Android.Views; using Android.Views.Animations; using Android.Widget; using CNBlog.Droid.Utils; namespace CNBlog.Droid.PullableView { public class PullToRefreshLayout : RelativeLayout { // 初始状态 private const int initStatus = 0; // 释放刷新 private const int releaseToRefresh = 1; // 正在刷新 private const int refreshing = 2; // 释放加载 private const int releaseToLoad = 3; // 正在加载 private const int loading = 4; // 操作完毕 private const int complete = 5; // 当前状态 private int currentStatus = 0; // 刷新回调接口 private OnRefreshListener mListener; // 刷新成功 private const int succeed = 0; // 刷新失败 private const int failed = 1; // 按下Y坐标，上一个事件点Y坐标 private float downY, lastY; // 下拉的距离。注意：pullDownY和pullUpY不可能同时不为0 private float pullDownY = 0; // 上拉的距离 private float pullUpY = 0; // 释放刷新的距离 private float refreshDist = 200; // 释放加载的距离 private float loadmoreDist = 200; private UIScheduling uScheduling; // 回滚速度 private float moveSpeed = 8; // 第一次执行布局 private bool isLayout = false; // 在刷新过程中滑动操作 private bool isTouch = false; // 手指滑动距离与下拉头的滑动距离比，中间会随正切函数变化 private float radio = 2; // 下拉箭头的转180°动画 private RotateAnimation rotateAnimation; // 均匀旋转动画 private RotateAnimation refreshingAnimation; // 下拉头 private View refreshView; // 下拉的箭头 public View pullView; // 正在刷新的图标 private View refreshingView; // 刷新结果图标 private View refreshStateImageView; // 刷新结果：成功或失败 private TextView refreshStateTextView; // 上拉头 private View loadmoreView; // 上拉的箭头 public View pullUpView; // 正在加载的图标 private View loadingView; // 加载结果图标 private View loadStateImageView; // 加载结果：成功或失败 private TextView loadStateTextView; //请求加载错误View private View errorView; // 实现了Pullable接口的View private View pullableView; // 过滤多点触碰 private int mEvents; // 这两个变量用来控制pull的方向，如果不加控制，当情况满足可上拉又可下拉时没法下拉 private bool canPullDown = true; private bool canPullUp = true; private Context mContext; private Handler updateUIHandler; public void setOnRefreshListener(OnRefreshListener listener) { mListener = listener; } public PullToRefreshLayout(Context context) : base(context) { initView(context); } public PullToRefreshLayout(Context context, IAttributeSet attrs) : base(context, attrs) { initView(context); } public PullToRefreshLayout(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs, defStyle) { initView(context); } private void initView(Context context) { mContext = context; updateUIHandler = new Handler((Message msg) => { // 回弹速度随下拉距离moveDeltaY增大而增大 moveSpeed = (float)(8 + 5 * Math.Tan(Math.PI / 2 / MeasuredHeight * (pullDownY + Math.Abs(pullUpY)))); if (!isTouch) { // 正在刷新，且没有往上推的话则悬停，显示"正在刷新..." if (currentStatus == refreshing && pullDownY <= refreshDist) { pullDownY = refreshDist; uScheduling.Cancel(); } else if (currentStatus == loading && -pullUpY <= loadmoreDist) { pullUpY = -loadmoreDist; uScheduling.Cancel(); } } if (pullDownY > 0) pullDownY -= moveSpeed; else if (pullUpY < 0) pullUpY += moveSpeed; if (pullDownY < 0) { // 已完成回弹 pullDownY = 0; pullView.ClearAnimation(); // 隐藏下拉头时有可能还在刷新，只有当前状态不是正在刷新时才改变状态 if (currentStatus != refreshing && currentStatus != loading) changeStatus(initStatus); uScheduling.Cancel(); RequestLayout(); } if (pullUpY > 0) { // 已完成回弹 pullUpY = 0; pullUpView.ClearAnimation(); // 隐藏上拉头时有可能还在刷新，只有当前状态不是正在刷新时才改变状态 if (currentStatus != refreshing && currentStatus != loading) changeStatus(initStatus); uScheduling.Cancel(); RequestLayout(); } // 刷新布局,会自动调用onLayout RequestLayout(); // 没有拖拉或者回弹完成 if (pullDownY + Math.Abs(pullUpY) == 0) { uScheduling.Cancel(); } }); uScheduling = new UIScheduling(updateUIHandler); rotateAnimation = (RotateAnimation)AnimationUtils.LoadAnimation( context, Resource.Animator.reverse_anim); refreshingAnimation = (RotateAnimation)AnimationUtils.LoadAnimation( context, Resource.Animator.rotating); // 添加匀速转动动画 LinearInterpolator lir = new LinearInterpolator(); rotateAnimation.Interpolator = lir; refreshingAnimation.Interpolator = lir; } private void initView() { // 初始化下拉布局 pullView = refreshView.FindViewById<View>(Resource.Id.pull_icon); refreshStateTextView = refreshView.FindViewById<TextView>(Resource.Id.state_tv); refreshingView = refreshView.FindViewById<View>(Resource.Id.refreshing_icon); refreshStateImageView = refreshView.FindViewById<View>(Resource.Id.state_iv); // 初始化上拉布局 pullUpView = loadmoreView.FindViewById<View>(Resource.Id.pullup_icon); loadStateTextView = loadmoreView.FindViewById<TextView>(Resource.Id.loadstate_tv); loadingView = loadmoreView.FindViewById<View>(Resource.Id.loading_icon); loadStateImageView = loadmoreView.FindViewById<View>(Resource.Id.loadstate_iv); } /// <summary> /// 完成刷新操作，显示刷新结果。注意：刷新完成后一定要调用这个方法 /// </summary> /// <param name="refreshResult">succeed代表成功, failed代表失败</param> public void refreshFinish(int refreshResult) { refreshingView.ClearAnimation(); refreshingView.Visibility = ViewStates.Gone; switch (refreshResult) { case 0: // 刷新成功 refreshStateImageView.Visibility = ViewStates.Visible; refreshStateTextView.Text = "刷新成功"; refreshStateImageView.SetBackgroundResource(Resource.Mipmap.refresh_succeed); break; case 1: default: // 刷新失败 refreshStateImageView.Visibility = ViewStates.Visible; refreshStateTextView.Text = "刷新失败"; refreshStateImageView.SetBackgroundResource(Resource.Mipmap.refresh_failed); break; } if (pullDownY > 0) { // 刷新结果停留1秒 new Handler((Message msg) => { changeStatus(complete); hide(); }).SendEmptyMessageDelayed(0, 1000); } else { changeStatus(complete); hide(); } } /// <summary> /// 加载完毕，显示加载结果。注意：刷新完成后一定要调用这个方法 /// </summary> /// <param name="refreshResult">succeed代表成功, failed代表失败</param> public void loadmoreFinish(int refreshResult) { loadingView.ClearAnimation(); loadingView.Visibility = ViewStates.Gone; switch (refreshResult) { case 0: // 加载成功 loadStateImageView.Visibility = ViewStates.Visible; loadStateTextView.Text = "加载成功"; loadStateImageView.SetBackgroundResource(Resource.Mipmap.load_succeed); break; case 1: default: // 加载失败 loadStateImageView.Visibility = ViewStates.Visible; loadStateTextView.Text = "加载失败"; loadStateImageView.SetBackgroundResource(Resource.Mipmap.load_failed); pullableView.Visibility = ViewStates.Gone; break; } if (pullUpY < 0) { // 刷新结果停留1秒 new Handler((Message msg) => { changeStatus(complete); hide(); }).SendEmptyMessageDelayed(0, 1000); } else { changeStatus(complete); hide(); } } /// <summary> /// 改变界面布局状态 /// </summary> /// <param name="status"></param> private void changeStatus(int status) { currentStatus = status; Log.Debug("status:", status.ToString()); switch (currentStatus) { case 0: // 下拉布局初始状态 refreshStateImageView.Visibility = ViewStates.Gone; refreshStateTextView.Text = Context.GetString(Resource.String.pull_to_refresh); pullView.ClearAnimation(); pullView.Visibility = ViewStates.Visible; // 上拉布局初始状态 loadStateImageView.Visibility = ViewStates.Gone; loadStateTextView.Text = Context.GetString(Resource.String.pullup_to_load); pullUpView.ClearAnimation(); pullUpView.Visibility = ViewStates.Visible; break; case 1: // 释放刷新状态 refreshStateTextView.Text = Context.GetString(Resource.String.release_to_refresh); pullView.StartAnimation(rotateAnimation); break; case 2: // 正在刷新状态 pullView.ClearAnimation(); refreshingView.Visibility = ViewStates.Visible; pullView.Visibility = ViewStates.Invisible; refreshingView.StartAnimation(refreshingAnimation); refreshStateTextView.Text = Context.GetString(Resource.String.refreshing); break; case 3: // 释放加载状态 loadStateTextView.Text = Context.GetString(Resource.String.release_to_load); pullUpView.StartAnimation(rotateAnimation); break; case 4: // 正在加载状态 pullUpView.ClearAnimation(); loadingView.Visibility = ViewStates.Visible; pullUpView.Visibility = ViewStates.Invisible; loadingView.StartAnimation(refreshingAnimation); loadStateTextView.Text = Context.GetString(Resource.String.loading); break; case 5: // 刷新或加载完毕，啥都不做 break; } } /// <summary> /// 不限制上拉或下拉 /// </summary> private void releasePull() { canPullDown = true; canPullUp = true; } /// <summary> /// 由父控件决定是否分发事件，防止事件冲突 /// </summary> /// <param name="e"></param> /// <returns></returns> public override bool DispatchTouchEvent(MotionEvent e) { switch (e.ActionMasked) { case MotionEventActions.Down: downY = e.GetY(); lastY = downY; uScheduling.Cancel(); mEvents = 0; releasePull(); break; case MotionEventActions.PointerDown: case MotionEventActions.PointerUp: // 过滤多点触碰 mEvents = -1; break; case MotionEventActions.Move: if (mEvents == 0) { if (pullDownY > 0 || (((Pullable)pullableView).canPullDown() && canPullDown && currentStatus != loading)) { // 可以下拉，正在加载时不能下拉 // 对实际滑动距离做缩小，造成用力拉的感觉 pullDownY = pullDownY + (e.GetY() - lastY) / radio; if (pullDownY < 0) { pullDownY = 0; canPullDown = false; canPullUp = true; } if (pullDownY > this.MeasuredHeight) pullDownY = this.MeasuredHeight; if (currentStatus == refreshing) { // 正在刷新的时候触摸移动 isTouch = true; } } else if (pullUpY < 0 || (((Pullable)pullableView).canPullUp() && canPullUp && currentStatus != refreshing)) { // 可以上拉，正在刷新时不能上拉 pullUpY = pullUpY + (e.GetY() - lastY) / radio; if (pullUpY > 0) { pullUpY = 0; canPullDown = true; canPullUp = false; } if (pullUpY < -this.MeasuredHeight) pullUpY = -this.MeasuredHeight; if (currentStatus == loading) { // 正在加载的时候触摸移动 isTouch = true; } } else releasePull(); } else mEvents = 0; lastY = e.GetY(); // 根据下拉距离改变比例 radio = (float)(2 + 2 * Math.Tan(Math.PI / 2 / this.MeasuredHeight * (pullDownY + Math.Abs(pullUpY)))); if (pullDownY > 0 || pullUpY < 0) RequestLayout(); if (pullDownY > 0) { if (pullDownY <= refreshDist && (currentStatus == releaseToRefresh || currentStatus == complete)) { // 如果下拉距离没达到刷新的距离且当前状态是释放刷新，改变状态为下拉刷新 changeStatus(initStatus); } if (pullDownY >= refreshDist && currentStatus == initStatus) { // 如果下拉距离达到刷新的距离且当前状态是初始状态刷新，改变状态为释放刷新 changeStatus(releaseToRefresh); } } else if (pullUpY < 0) { // 下面是判断上拉加载的，同上，注意pullUpY是负值 if (-pullUpY <= loadmoreDist && (currentStatus == releaseToLoad || currentStatus == complete) && mListener.CanLoadMore() ) { changeStatus(initStatus); } // 上拉操作 if (-pullUpY >= loadmoreDist && currentStatus == initStatus && mListener.CanLoadMore() ) { changeStatus(releaseToLoad); } } // 因为刷新和加载操作不能同时进行，所以pullDownY和pullUpY不会同时不为0，因此这里用(pullDownY + // Math.Abs(pullUpY))就可以不对当前状态作区分了 if ((pullDownY + Math.Abs(pullUpY)) > 8) { // 防止下拉过程中误触发长按事件和点击事件 e.Action = MotionEventActions.Cancel; } break; case MotionEventActions.Up: if (pullDownY > refreshDist || -pullUpY > loadmoreDist) // 正在刷新时往下拉（正在加载时往上拉），释放后下拉头（上拉头）不隐藏 { isTouch = false; } if (currentStatus == releaseToRefresh) { changeStatus(refreshing); // 刷新操作 if (mListener != null) mListener.onRefresh(this); } else if (currentStatus == releaseToLoad) { changeStatus(loading); // 加载操作 if (mListener != null) mListener.onLoadMore(this); } hide(); break; default: break; } base.DispatchTouchEvent(e); return true; } protected override void OnLayout(bool changed, int l, int t, int r, int b) { if (!isLayout) { // 这里是第一次进来的时候做一些初始化 refreshView = GetChildAt(0); pullableView = GetChildAt(1); loadmoreView = GetChildAt(2); isLayout = true; initView(); refreshDist = ((ViewGroup)refreshView).GetChildAt(0) .MeasuredHeight; loadmoreDist = ((ViewGroup)loadmoreView).GetChildAt(0) .MeasuredHeight; } // 改变子控件的布局，这里直接用(pullDownY + pullUpY)作为偏移量，这样就可以不对当前状态作区分 refreshView.Layout(0, (int)(pullDownY + pullUpY) - refreshView.MeasuredHeight, refreshView.MeasuredWidth, (int)(pullDownY + pullUpY)); pullableView.Layout(0, (int)(pullDownY + pullUpY), pullableView.MeasuredWidth, (int)(pullDownY + pullUpY) + pullableView.MeasuredHeight); loadmoreView.Layout(0, (int)(pullDownY + pullUpY) + pullableView.MeasuredHeight, loadmoreView.MeasuredWidth, (int)(pullDownY + pullUpY) + pullableView.MeasuredHeight + loadmoreView.MeasuredHeight); } /// <summary> /// 隐藏刷新UI界面 /// </summary> private void hide() { uScheduling.Schedule(5); } public async Task AutoRefresh() { while (pullDownY < 4 / 3 * refreshDist) { pullDownY += moveSpeed; if (pullDownY > refreshDist) changeStatus(releaseToRefresh); RequestLayout(); await Task.Delay(20); } changeStatus(refreshing); if(mListener!=null) mListener.onRefresh(this); hide(); } } }
2.PullableListView
然后接下来就是一个自定义实现的ListView
using System; using Android.Content; using Android.Util; using Android.Views; using Android.Widget; namespace CNBlog.Droid.PullableView { public class PullableListView :ListView,Pullable { private View errorLayout; public PullableListView(Context context) :base(context) { } public PullableListView(Context context, IAttributeSet attrs) :base(context,attrs) { } public PullableListView(Context context, IAttributeSet attrs, int defStyle) : base(context, attrs,defStyle) { } public bool canPullDown() { if (Count == 0) { // 没有item的时候也可以下拉刷新 return true; } else if (FirstVisiblePosition == 0 && GetChildAt(0).Top >= 0) { // 滑到ListView的顶部了 return true; } else return false; } public bool canPullUp() { if (Count == 0) { // 没有item的时候也可以上拉加载 return true; } else if (LastVisiblePosition == (Count - 1)) { // 滑到底部了 if (GetChildAt(LastVisiblePosition - FirstVisiblePosition) != null && GetChildAt( LastVisiblePosition - FirstVisiblePosition).Bottom <= MeasuredHeight) return true; } return false; } public void SetErrorLayout() { if (errorLayout == null) errorLayout = LayoutInflater.From(Context).Inflate(Resource.Layout.error_page, null); RemoveHeaderView(errorLayout); AddHeaderView(errorLayout,null,false); SetHeaderDividersEnabled(false); } } }
3.Pullable
namespace CNBlog.Droid.PullableView { /// <summary> /// 如需扩展其它View，实现该接口即可 /// </summary> public interface Pullable { /// <summary> /// 判断是否可以下拉，如果不需要下拉功能可以直接return false /// </summary> /// <returns></returns> bool canPullDown(); /// <summary> /// 判断是否可以上拉，如果不需要上拉功能可以直接return false /// </summary> /// <returns></returns> bool canPullUp(); } }
4.OnRefreshListener
using System.Threading.Tasks; namespace CNBlog.Droid.PullableView { public interface OnRefreshListener { /// <summary> /// 刷新操作 /// </summary> /// <param name="pullToRefreshLayout"></param> Task onRefresh(PullToRefreshLayout pullToRefreshLayout); /// <summary> /// 加载更多 /// </summary> /// <param name="pullToRefreshLayout"></param> Task onLoadMore(PullToRefreshLayout pullToRefreshLayout); /// <summary> /// 是否可以加载更多 /// </summary> /// <returns><c>true</c>, if load more was caned, <c>false</c> otherwise.</returns> bool CanLoadMore(); } }
代码搬运工，注释都是一模一样的 
还是大概讲解下，第 一个PullToRefreshLayout刷新组件，关键代码在于重写的 DispatchTouchEvent 函数。
dispatchTouchEvent是用来处理触摸事件分发，关于事件分发机制是咋样的，这个就复杂了，毕竟我也是菜逼，估计也讲不明白。
这儿的左右大概就是监听手指触摸事件，通过监听手指上拉以及下拉作相应的操作。
第二个PullableListView 继承自ListView以及实现了接口Pullable，Pullable里的canPullDown(),canPullUp() 用于DispatchTouchEvent 触发时判断当前View是否可以上拉加载更多，以及下拉加载更多。
而自定义的ListView通过当前Item所在位置判断是否可以是否可以上拉加载更多，以及下拉加载更多。
而OnRefreshListener定义了刷新操作以及加载更多 两个接口。
顺便再贴上一起实现的WebView
using System; using Android.Content; using Android.Util; using Android.Webkit; namespace CNBlog.Droid.PullableView { public class PullableWebView :WebView,Pullable { public PullableWebView(Context context) :base(context) { } public PullableWebView(Context context, IAttributeSet attrs) :base(context,attrs) { } public PullableWebView(Context context, IAttributeSet attrs, int defStyle) :base(context,attrs,defStyle) { } public bool canPullDown() { if (ScrollY == 0) return true; else return false; } public bool canPullUp() { //if (ScrollY >=ContentHeight * Scale // - MeasuredHeight) // return true; //else return false; } } }
这个就很简单了，因为webview我不需要上拉加载更多，所以只需要判断当前滚动条在什么位置，如果ScrollY=0即可下拉刷新。
这里上传一个目前已打包好的APK文件，让各位看官老爷体验下，如果觉得丑陋，渣的话，请各位轻点儿喷，毕竟我还是个孩子啊。 
有什么好的建议的话，欢迎大家提出。
网盘地址:http://pan.baidu.com/s/1sl0Eu1f
下章贴出源码哈，待我稍稍整理下，我想这也是各位看官最关心的事儿吧。
