Android实践之带加载效果的下拉刷新上拉加载更多
前言
之前写的一个LoadingBar,这次把LoadingBar加到下拉刷新的头部。从头写一个下拉刷新,附赠上拉加载更多。下面话不多说了,来一起看看详细的介绍吧。
效果图:
实现过程
首先是自定义属性,attrs.xml中定义头部的高度和上下的padding。
####attrs.xml####
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="PPRefreshView_header"> <attr name="header_height" format="dimension"/> <attr name="header_padding" format="dimension"/> </declare-styleable> </resources>
然后是头部的文件,里面放了一个TextView和一个图片
header_layout.xml####
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp" android:orientation="vertical"> <ImageView android:src="@mipmap/down" android:layout_centerVertical="true" android:id="@+id/icon" android:layout_width="20dp" android:layout_height="20dp" android:layout_toLeftOf="@+id/text" android:layout_marginRight="5dp"/> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="下拉刷新" /> </RelativeLayout>
然后是布局文件,让PPRefreshView作为父布局,下面可以放AbsListView的子类。
activity_main.xml####
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:ppRefreshView="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/white" tools:context="top.greendami.greendami.MainActivity"> <top.greendami.greendami.PPRefreshView ppRefreshView:header_height="50dp" ppRefreshView:header_padding="10dp" android:id="@+id/swipeRefreshLayout" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#d4d4d4"> <ListView android:background="@color/white" android:id="@+id/list" android:layout_width="match_parent" android:layout_height="match_parent"></ListView> </top.greendami.greendami.PPRefreshView> </RelativeLayout>
最后是重点,下拉刷新的控件。
"精心"准备了一张图
####PPRefreshView.java####
package top.greendami.greendami; package com.allrun.arsmartelevatorformanager.widget; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.support.v7.widget.RecyclerView; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.MotionEvent; import android.view.View; import android.view.ViewConfiguration; import android.view.ViewGroup; import android.view.animation.Animation; import android.view.animation.RotateAnimation; import android.widget.ImageView; import android.widget.TextView; import com.allrun.arsmartelevatorformanager.R; import com.allrun.arsmartelevatorformanager.util.DPUnitUtil; /** * Created by GreendaMI on 2017/3/21. */ public class PPRefreshView extends ViewGroup { Context context; RecyclerView mListView; PPView mPPView; View header; TextView title; ImageView mImage;//箭头 int listTop = 0; float headerHeight = 10 + 30 + 10;//header的高度,上留白 + 文字(PPVIew)高度 + 下留白 float headerpadding = 10;//上留白,下留白 private int mYDown, mLastY; //最短滑动距离 int a = 0; RotateAnimation mRotateAnimation; int state = 0; //0,正常;1,下拉;2,松开 public void setPPRefreshViewListener(PPRefreshViewListener mPPRefreshViewListener) { this.mPPRefreshViewListener = mPPRefreshViewListener; } PPRefreshViewListener mPPRefreshViewListener; public PPRefreshView(Context context) { super(context); this.context = context; } public PPRefreshView(Context context, AttributeSet attrs) { super(context, attrs); this.context = context; //px转dp a = DPUnitUtil.px2dip(context,ViewConfiguration.get(context).getScaledDoubleTapSlop()); TypedArray b = context.obtainStyledAttributes(attrs, R.styleable.PPRefreshView_header); headerHeight = b.getDimension(R.styleable.PPRefreshView_header_header_height, 100); headerpadding = b.getDimension(R.styleable.PPRefreshView_header_header_padding, 10); b.recycle(); initAnima(); } private void initAnima() { //箭头旋转 mRotateAnimation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); mRotateAnimation.setFillAfter(true); mRotateAnimation.setDuration(200); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { if (mPPView != null) { mPPView.measure(widthMeasureSpec,(int) (headerHeight- 2 * headerpadding)); } if (header != null) { header.measure(widthMeasureSpec, (int) (headerHeight- 2 * headerpadding)); } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { if (mListView == null && getChildCount() == 1) { mListView = (RecyclerView)getChildAt(0); mListView.setOnScrollListener(new RecyclerView.OnScrollListener() { @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { super.onScrolled(recyclerView, dx, dy); if(!recyclerView.canScrollVertically(1)){ //添加外部回调 if(mPPRefreshViewListener != null){ mPPRefreshViewListener.LoadMore(); } } } }); } if (mListView != null) { mListView.layout(l, listTop, getMeasuredWidth(), b); } if (mPPView != null) { //top:文字(PPVIew)高度 + 下留白 mPPView.layout(l, (int)(listTop - headerHeight + headerpadding), r, listTop); } if (header != null) { //top:文字(PPView)高度 + 下留白 header.layout(l, (int)(listTop - headerHeight + headerpadding), r, listTop); } } @Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); //松开手指,list回到顶部 if (state == 2) { listTop = listTop - 25; if (listTop < headerHeight) { listTop = (int)headerHeight; } requestLayout(); } //刷新完毕,关闭header if (state == 0 && listTop > 0) { listTop = listTop - 25; if (listTop < 0) { listTop = 0; } requestLayout(); } } @Override public boolean dispatchTouchEvent(MotionEvent event) { final int action = event.getAction(); switch (action) { case MotionEvent.ACTION_DOWN: // 按下 mYDown = (int) event.getRawY(); break; case MotionEvent.ACTION_MOVE: // 移动 mLastY = (int) event.getRawY(); if (!mListView.canScrollVertically(-1) && mLastY > mYDown &&(mLastY - mYDown) > a) { state = 1; listTop = mLastY - mYDown; if (mPPView != null) { removeView(mPPView); mPPView = null; } if (header == null) { header = LayoutInflater.from(context).inflate(R.layout.header_layout, null, false); title = ((TextView) header.findViewById(R.id.text)); mImage = ((ImageView) header.findViewById(R.id.icon)); addView(header); } if (title != null && (mLastY - mYDown) > a * 2f) { title.setText("松开刷新"); if (mImage.getAnimation() == null) { mImage.startAnimation(mRotateAnimation); } } if (title != null && (mLastY - mYDown) < a * 2f) { title.setText("下拉刷新"); mImage.setImageResource(R.mipmap.down); } requestLayout(); //已经判断是下拉刷新,拦截手势 return false; } break; case MotionEvent.ACTION_UP: // 抬起 // if (canLoad()) { // loadData(); // } //松手的时候,把文字标题去掉 if (header != null) { removeView(header); header = null; } //如果之前是下拉状态,就添加PPVIew if (mPPView == null && state == 1) { //添加外部回调 if(mPPRefreshViewListener != null){ mPPRefreshViewListener.onRefresh(); } mPPView = new PPView(context); addView(mPPView); mYDown = 0; mLastY = 0; state = 2; requestLayout(); } break; default: break; } return super.dispatchTouchEvent(event); } /** * 收起下拉刷新的header,刷新结束 */ public void RefreshOver() { if (mPPView != null) { removeView(mPPView); mPPView = null; } if (header != null) { removeView(header); header = null; title = null; mImage = null; } state = 0; } public void setRefreshing(boolean b) { if(!b){ state = 0; postInvalidate(); }else{ state = 2; postInvalidate(); } } public interface PPRefreshViewListener{ void onRefresh(); void LoadMore(); } }
主要思路是监听手势的滑动距离,如果ListView已经划到顶部,则ListView跟随手指位置,并添加Header。放开手指后,ListView慢慢回到顶部。
外部回调。监听下拉和上拉。
mSwipeRefreshLayout.setPPRefreshViewListener(new PPRefreshView.PPRefreshViewListener() { @Override public void onRefresh() { Toast.makeText(MainActivity.this,"亲,刷新了",Toast.LENGTH_SHORT).show(); data.add("测试数据100"); mAdapter.notifyDataSetChanged(); } @Override public void LoadMore() { Toast.makeText(MainActivity.this,"加载更多",Toast.LENGTH_SHORT).show(); } }); refreshLayout.setRefreshing(false);;//刷新完毕
差点忘了粘连小球的View。
####PPView.java#### package top.greendami.greendami; import android.content.Context; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.Path; import android.support.annotation.Nullable; import android.util.AttributeSet; import android.view.View; /** * Created by GreendaMi on 2017/3/17. */ public class PPView extends View { String TAG = "PPView"; //动画开关 boolean isLoading = true; Context mContext; private int mWidth = 100; private int mheight = 100; public int mColor; public Paint mPaint = new Paint(); float time = 0; //小球与中间打球的最远距离 float distance = 100; public PPView(Context context) { super(context); mContext = context; mColor = context.getResources().getColor(R.color.colorPrimary); init(); } public PPView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); mContext = context; mColor = context.getResources().getColor(R.color.colorPrimary); init(); } private void init() { mPaint.setAntiAlias(true); mPaint.setColor(mColor); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec); int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec); //宽度至少是高度的4倍 if (widthSpecSize < 4 * heightSpecSize) { widthSpecSize = 4 * heightSpecSize; } mWidth = widthSpecSize; mheight = heightSpecSize; distance = 1.2f * mheight; setMeasuredDimension(widthSpecSize, heightSpecSize); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (isLoading) { //大圆半径 float bigR = mheight * 0.32f + mheight * 0.03f * Math.abs((float) Math.sin(Math.toRadians(time))); float smallR = mheight * 0.17f + mheight * 0.03f * Math.abs((float) Math.cos(Math.toRadians(time))); float bigx = (getWidth()) / 2; //画中间大圆 canvas.drawCircle(bigx, mheight / 2, bigR, mPaint); float smalx = getSmallCenterX(); //画小圆 canvas.drawCircle(smalx, mheight / 2, smallR, mPaint); //画链接 //小球在右侧 if (smalx > bigx) { Path path = new Path(); //上面的贝塞尔曲线的第一个点,在大圆身上 float x1 = bigx + bigR * (float) Math.cos(Math.toRadians(time)); float y1 = mheight / 2 - bigR * (float) Math.sin(Math.toRadians(time)); if (y1 > mheight / 2 - smallR) { y1 = mheight / 2 - smallR; x1 = bigx + (float) (Math.sqrt(bigR * bigR - smallR * smallR)); } //上面的贝塞尔曲线的第三个点,在小圆身上 float x2 = smalx - smallR * (float) Math.cos(Math.toRadians(time)); float y2 = mheight / 2 - smallR * (float) Math.sin(Math.toRadians(time)); if (y2 > mheight / 2 - smallR * 0.8) { y2 = mheight / 2 - smallR * 0.8f; x2 = smalx - smallR * (float) (Math.sqrt(1-0.64f)); } //下面的贝塞尔曲线的第三个点,在小圆身上 float x3 = smalx - smallR * (float) Math.cos(Math.toRadians(time)); float y3 = mheight / 2 + smallR * (float) Math.sin(Math.toRadians(time)); if (y3 < mheight / 2 + smallR * 0.8) { y3 = mheight / 2 + smallR * 0.8f; x3 = smalx - smallR * (float) (Math.sqrt(1-0.64f)); } //下面的贝塞尔曲线的第一个点,在大圆身上 float x4 = bigx + bigR * (float) Math.cos(Math.toRadians(time)); float y4 = mheight / 2 + bigR * (float) Math.sin(Math.toRadians(time)); if (y4 < mheight / 2 + smallR) { y4 = mheight / 2 + smallR; x4 = bigx + (float) (Math.sqrt(bigR * bigR - smallR * smallR)); } path.moveTo(x1, y1); path.quadTo((bigx + smalx) / 2, mheight / 2, x2, y2); // 绘制贝赛尔曲线(Path) path.lineTo(x3, y3); path.quadTo((bigx + smalx) / 2, mheight / 2, x4, y4); canvas.drawPath(path, mPaint); } //小球在左侧 if (smalx < bigx) { Path path = new Path(); float x1 = bigx + bigR * (float) Math.cos(Math.toRadians(time)); float y1 = mheight / 2 - bigR * (float) Math.sin(Math.toRadians(time)); if (y1 > mheight / 2 - smallR) { y1 = mheight / 2 - smallR; x1 = bigx - (float) (Math.sqrt(bigR * bigR - smallR * smallR)); } float x2 = smalx - smallR * (float) Math.cos(Math.toRadians(time)); float y2 = mheight / 2 - smallR * (float) Math.sin(Math.toRadians(time)); if (y2 > mheight / 2 - smallR * 0.8) { y2 = mheight / 2 - smallR * 0.8f; x2 = smalx + smallR * (float) (Math.sqrt(1-0.64f)); } float x3 = smalx - smallR * (float) Math.cos(Math.toRadians(time)); float y3 = mheight / 2 + smallR * (float) Math.sin(Math.toRadians(time)); if (y3 < mheight / 2 + smallR * 0.8) { y3 = mheight / 2 + smallR * 0.8f; x3 = smalx + smallR * (float) (Math.sqrt(1-0.64f)); } float x4 = bigx + bigR * (float) Math.cos(Math.toRadians(time)); float y4 = mheight / 2 + bigR * (float) Math.sin(Math.toRadians(time)); if (y4 < mheight / 2 + smallR) { y4 = mheight / 2 + smallR; x4 = bigx - (float) (Math.sqrt(bigR * bigR - smallR * smallR)); } path.moveTo(x1, y1); path.quadTo((bigx + smalx) / 2, mheight / 2, x2, y2); // 绘制贝赛尔曲线(Path) path.lineTo(x3, y3); path.quadTo((bigx + smalx) / 2, mheight / 2, x4, y4); canvas.drawPath(path, mPaint); } postInvalidate(); } } //计算小球的X坐标 private float getSmallCenterX() { //此处控制速度 time = time + 4f; return mWidth / 2 + distance * (float) Math.cos(Math.toRadians(time)); } }
两张素材
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
相关文章
Android UI控件ExpandableListView基本用法详解
这篇文章主要为大家详细介绍了Android UI控件ExpandableListView基本用法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-09-09Android开发之图形图像与动画(三)Animation效果的XML实现
使用XML来定义Tween Animation动画的XML文件在工程中res/anim目录,这个文件必须包含一个根元素,感兴趣的友可以了解一下,希望本文对你有所帮助2013-01-01Android中TextView自动适配文本大小的几种解决方案
在布局中使用的话,注意按照你最大的设备来设置字体大小,这样在小设备上回自动缩放,下面这篇文章主要给大家介绍了关于Android中TextView自动适配文本大小的几种解决方案,需要的朋友可以参考下2022-06-06Android开发EditText禁止输入监听及InputFilter字符过滤
这篇文章主要为大家介绍了Android开发EditText禁止输入监听及InputFilter字符过滤示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-06-06
最新评论