偷懒了一天,去给人装系统去了~ 今天继续更 自己敲代码实现下拉刷新上滑加载更多
"你会装系统吗?""会""我电脑打不开了""好我马上到"....然后就是从WIN7开始装 装完直接装WIN10 然后装软件...然后..........妹子为什么不能自己学学装系统呢......
下拉刷新的原理很简单,下拉刷新也是listview的头布局 只不过靠setPadding(0,-PaddingTop,0,0),让他隐藏在头部局上面(这么说只是为了更形象,其实是头部的一条缝)
下拉刷新的原理就是这样. 下面来敲代码 自定义我们的refreshListView
第一步 先实现我们的下拉刷新这几个字
网上下的后台资源 JSON数据有点旧 不过这不是重点,第一步 我们给listview添加下拉刷新的头布局, 很简单就不多说.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" >
<FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:paddingBottom="10dp" android:paddingLeft="10dp" android:paddingTop="10dp" >
<ImageView android:id="@+id/iv_arrow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/common_listview_headview_red_arrow" />
<ProgressBar android:id="@+id/pb_loading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:visibility="invisible" android:indeterminateDrawable="@drawable/custom_progress" />
</FrameLayout>
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:orientation="vertical" >
<TextView android:id="@+id/tv_title" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="下拉刷新" android:textColor="#f00" android:textSize="17sp" />
<TextView android:id="@+id/tv_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:text="2016-02-16 22:01" android:textColor="#9e9e9e" android:textSize="15sp" />
</LinearLayout>
</LinearLayout>
自带progressbar的太丑了简单自定义了一个 旋转动画和渐变效果 我设置
android:visibility="invisible"
刷新ing的时候再设置可见.
custom_progress
<?xml version="1.0" encoding="utf-8"?>
<rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" >
<shape android:innerRadius="15dp" android:shape="ring" android:thickness="3dp" android:useLevel="false" >
<gradient android:centerColor="#5f00" android:endColor="#fff" android:startColor="#f00" android:type="sweep" />
</shape>
</rotate>
2 这一步我们要他隐藏:
那么 我们在我们的RefreshListView中先拿到头布局的高度 并把它隐藏:
/** * 初始化头布局 */
private void initHeaderView() { mHeaderView = View.inflate(getContext(), R.layout.list_refrsh_header, null); this.addHeaderView(mHeaderView);// 添加头布局 // 隐藏头布局(1, 获取头布局高度, 2.设置负paddingTop,布局就会往上走) // int height = mHeaderView.getHeight();//此处无法获取高度,因为布局还没有绘制完成 // 绘制之前就要获取布局高度
mHeaderView.measure(0, 0);// 手动测量布局
mHeaderViewHeight = mHeaderView.getMeasuredHeight();// 测量之后的高度 // 隐藏头布局
mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0); tvTitle = (TextView) mHeaderView.findViewById(R.id.tv_title); ivArrow = (ImageView) mHeaderView.findViewById(R.id.iv_arrow); pbLoading = (ProgressBar) mHeaderView.findViewById(R.id.pb_loading); tvTime = (TextView) mHeaderView.findViewById(R.id.tv_time); }
3 这样就看不到了. 那么下部我们应该把它拉出来, 通过获得手指在Y轴上的移动距离dy , 当dy-mHeaderViewHeight > 0 且是第一个可见条目的id == 0 那么 头布局可见
@Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: startY = (int) ev.getY(); break; case MotionEvent.ACTION_MOVE: if (startY == -1) {// 如果用户按住头条新闻向下滑动, 会导致listview无法拿到ACTION_DOWN, // 此时要重新获取startY
startY = (int) ev.getY(); } // 如果当前正在刷新, 什么都不做了
if (mCurrentState == STATE_REFRESHING) { break; } int endY = (int) ev.getY(); int dy = endY - startY; if (dy > 0 && getFirstVisiblePosition() == 0) {// 向下滑动&当前显示的是第一个item,才允许下拉刷新
int paddingTop = dy - mHeaderViewHeight;// 计算当前的paddingtop值 // 根据padding切换状态
if (paddingTop >= 0
&& mCurrentState != STATE_RELEASE_TO_REFRESH) { // 切换到松开刷新
mCurrentState = STATE_RELEASE_TO_REFRESH; refreshState(); } else if (paddingTop < 0
&& mCurrentState != STATE_PULL_TO_REFRESH) { // 切换到下拉刷新
mCurrentState = STATE_PULL_TO_REFRESH; refreshState(); } mHeaderView.setPadding(0, paddingTop, 0, 0);// 重新设置头布局padding
return true; } break; case MotionEvent.ACTION_UP: startY = -1;// 起始坐标归零
if (mCurrentState == STATE_RELEASE_TO_REFRESH) { // 如果当前是松开刷新, 就要切换为正在刷新
mCurrentState = STATE_REFRESHING; // 显示头布局
mHeaderView.setPadding(0, 0, 0, 0); refreshState(); // // 下拉刷新回调 // if (mListener != null) { // mListener.onRefresh(); // }
} else if (mCurrentState == STATE_PULL_TO_REFRESH) { // 隐藏头布局
mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0); } break; default: break; } return super.onTouchEvent(ev); } /** * 初始化箭头动画 */
private void initAnim() { animUp = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animUp.setDuration(500); animUp.setFillAfter(true);// 保持状态
animDown = new RotateAnimation(-180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); animDown.setDuration(500); animDown.setFillAfter(true);// 保持状态
} /** * 根据当前状态刷新界面 */
private void refreshState() { switch (mCurrentState) { case STATE_PULL_TO_REFRESH: tvTitle.setText("下拉刷新"); // 箭头向下移动
ivArrow.startAnimation(animDown); // 隐藏进度条
pbLoading.setVisibility(View.INVISIBLE); ivArrow.setVisibility(View.VISIBLE); break; case STATE_RELEASE_TO_REFRESH: tvTitle.setText("松开刷新"); // 箭头向上移动
ivArrow.startAnimation(animUp); // 隐藏进度条
pbLoading.setVisibility(View.INVISIBLE); ivArrow.setVisibility(View.VISIBLE); break; case STATE_REFRESHING: tvTitle.setText("正在刷新..."); pbLoading.setVisibility(View.VISIBLE); ivArrow.clearAnimation();// 必须清除动画,才能隐藏控件
ivArrow.setVisibility(View.INVISIBLE); break; default: break; } }
4 我们暂时完成了下拉刷新 是不是有点激动! 原理居然这么简单!说白了就是个paddingTop再加入状态判断和设置.
但是我们现在的下拉刷新不会回去. 那么我们来实现它回去的逻辑 ,下拉刷新接口回调刷新数据后会返回成功或者失败 ,那么 我们创建一个方法
onRefreshComplete
来通知listview 是成功还是失败然后做相应的UI操作
/** * 从服务器获取数据 */ private void getDataFromSevice() { HttpUtils httpUtils = new HttpUtils(); httpUtils.send(HttpMethod.GET, mUrl, new RequestCallBack<String>() { @Override public void onSuccess(ResponseInfo<String> responseInfo) { // 请求成功调用 String result = responseInfo.result;// 获得json字符串 processResult(result); CacheUtils.setCache(mUrl, result, mActivity); mListView.onRefreshComplete(true); } @Override public void onFailure(HttpException error, String msg) { // 请求失败调用 error.printStackTrace(); Toast.makeText(mActivity, msg, Toast.LENGTH_LONG).show(); mListView.onRefreshComplete(false); } }); }
RefreshListView: 不管成功还是失败都隐藏掉
// 刷新完成 public void onRefreshComplete(boolean success) { if (success) { // 隐藏头布局 mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0); mCurrentState = STATE_PULL_TO_REFRESH; // 隐藏进度条 pbLoading.setVisibility(View.INVISIBLE); ivArrow.setVisibility(View.VISIBLE); tvTitle.setText("下拉刷新"); setCurrentTime(); }else{ // 隐藏头布局 mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0); mCurrentState = STATE_PULL_TO_REFRESH; // 隐藏进度条 pbLoading.setVisibility(View.INVISIBLE); ivArrow.setVisibility(View.VISIBLE); tvTitle.setText("下拉刷新"); Toast.makeText(getContext(), "刷新失败请检查网络连接", Toast.LENGTH_LONG).show(); } }
现在是这样 我把tomcat服务器关了:
5 继续. 上滑加载更多: 原理 添加listview脚布局 然后通过设置-paddingTop隐藏掉
跟下拉过程一样 只不过回调的链接不一样 上拉加载更多的链接一般是more : "/10007/list_2.json"这样的 需要重新解析more的json数据
首先 新建一个脚布局:
很简单 一个ProgressBar 和一个TextView
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal" > <ProgressBar android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:indeterminateDrawable="@drawable/custom_progress" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dp" android:text="加载中..." android:textColor="#f00" android:textSize="17sp" /> </LinearLayout>
设置给我们的 RefreshListView
/** * 初始化脚布局 */ private void initFooterView() { mFooterView = View.inflate(getContext(), R.layout.list_refresh_footer, null); this.addFooterView(mFooterView); mFooterView.measure(0, 0); mFooterViewHeight = mFooterView.getMeasuredHeight(); }
好 大概就这样了.
6 隐藏它 并设置监听 当listview是可见的最后一个条目的时候显示并加载更多
/** * 初始化脚布局 */ private void initFooterView() { mFooterView = View.inflate(getContext(), R.layout.list_refresh_footer, null); this.addFooterView(mFooterView); mFooterView.measure(0, 0); mFooterViewHeight = mFooterView.getMeasuredHeight(); // 隐藏脚布局 mFooterView.setPadding(0, -mFooterViewHeight, 0, 0); // 设置滑动监听 this.setOnScrollListener(this); }
监听是否是listview可见的最后一个条目,然后通过接口的回调 来实现加载更多的方法
声明一个全局变量 private boolean isLoadingMore;// 来标记是否正在加载更多
@Override public void onScrollStateChanged(AbsListView view, int scrollState) { if (scrollState == SCROLL_STATE_IDLE) { int lastVisiblePosition = getLastVisiblePosition();// 当前界面显示的最后一个item的位置 if (lastVisiblePosition >= getCount() - 1 && !isLoadingMore) { isLoadingMore = true; // System.out.println("到底了"); // 加载更多了....(到底了) // 显示脚布局 mFooterView.setPadding(0, 0, 0, 0); // listview设置当前要展示的item的位置 setSelection(getCount() - 1);// 跳到加载更多item的位置去展示 if (mListener != null) { mListener.loadMore(); } } } }
7 然后再新闻界面页签页面 重写接口的 loadMore方法 并判断more的Url是否为空
// 设置下拉刷新监听 lvList.setOnRefreshListener(new OnRefreshListener() { @Override public void onRefresh() { // 从网络加载数据 getDataFromServer(); } @Override public void loadMore() { // 加载更多数据 if (mMoreUrl != null) { System.out.println("加载下一页数据..."); getMoreDataFromServer(); } else { lvList.onRefreshComplete(true);// 收起加载更多布局 Toast.makeText(mActivity, "没有更多数据了", Toast.LENGTH_SHORT) .show(); } } });
8 新建 getMoreDataFromServer(); 来请求more的数据
/** * 加载更多数据 */ protected void getMoreDataFromServer() { HttpUtils utils = new HttpUtils(); utils.send(HttpMethod.GET, mMoreUrl, new RequestCallBack<String>() { @Override public void onSuccess(ResponseInfo<String> responseInfo) { String result = responseInfo.result; processResult(result, true); // 收起加载更多布局 mListView.onRefreshComplete(true); } @Override public void onFailure(HttpException error, String msg) { error.printStackTrace(); Toast.makeText(mActivity, msg, Toast.LENGTH_SHORT).show(); // 收起加载更多布局 mListView.onRefreshComplete(false); } }); }
9 然后新建一个boolean 用来判断是是否是ismore 不是的话就是普通的加载
protected void processResult(String result, Boolean isMore) { Gson gson = new Gson(); NewsDatas mNewsDatas = gson.fromJson(result, NewsDatas.class); if (!TextUtils.isEmpty(mNewsDatas.data.more) ) { // 初始化地址 mMoreUrl = Contants.SERVER_URL + mNewsDatas.data.more; } else { // 没有下一页了 mMoreUrl = null; } if (!isMore) { // 获取头条新闻数据 mTopNewsList = mNewsDatas.data.topnews; if (mTopNewsList != null) { mTopNewsAdapter = new TopNewsAdapter(); mViewPager.setAdapter(mTopNewsAdapter); // 给页面指示器设置Viewpager mCirclePageIndicator.setViewPager(mViewPager);//将指示器和viewpager绑定 mCirclePageIndicator.setSnap(true); // 给mCirclePageIndicator 设置监听 mCirclePageIndicator.setOnPageChangeListener(new OnPageChangeListener() { @Override public void onPageSelected(int position) { // TODO Auto-generated method stub String title = mTopNewsList.get(position).title; topNewsTitle.setText(title); } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { // TODO Auto-generated method stub } @Override public void onPageScrollStateChanged(int state) { // TODO Auto-generated method stub } }); mCirclePageIndicator.onPageSelected(0);// 将小圆点位置归零, // 解决它会在页面销毁时仍记录上次位置的bug topNewsTitle.setText(mTopNewsList.get(0).title);// 初始化第一页标题 } // 初始化新闻列表 newsListViewData = mNewsDatas.data.news; // System.out.println("新闻列表数据:" + newsListViewData); if (newsListViewData != null) { newsListViewDataAdapter = new MyListViewAdapter(); mListView.setAdapter(newsListViewDataAdapter); } } else { // 加载更多 ArrayList<News> moreData = mNewsDatas.data.news; newsListViewData.addAll(moreData);// 追加数据 newsListViewDataAdapter.notifyDataSetChanged();// 刷新listview } }
10 重写刷新完成的方法 区分隐藏头布局还是 脚布局
// 刷新完成 public void onRefreshComplete(boolean success) { if (!isLoadingMore) { // 隐藏头布局 mHeaderView.setPadding(0, -mHeaderViewHeight, 0, 0); mCurrentState = STATE_PULL_TO_REFRESH; // 隐藏进度条 pbLoading.setVisibility(View.INVISIBLE); ivArrow.setVisibility(View.VISIBLE); tvTitle.setText("下拉刷新"); // 刷新失败,不需要更新时间 if (success) { setCurrentTime(); } } else { // 隐藏脚布局 mFooterView.setPadding(0, -mFooterViewHeight, 0, 0); isLoadingMore = false; } }
最终效果: 标题带2的是刷新出来的
项目地址
https://github.com/AceInAndroid/AnYangNews