版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37992075/article/details/76348936
此次牵扯到的知识点有:Android手势,Handler,java多线程,java聚合,Android帧动画,属性动画;
如果有对上述提到过的知识点不太了解,或者编程能力较差的小伙伴可以关闭此页面啦一,因为接下来的装逼过程
你可能会是一脸懵B 。如果你执意要看也没事啦,因为代码里面我写了足够详细的注释,如果你努力用心去看的话
,我相信你还是能看懂滴!
本源码已经上传至GitHub,有兴趣的小伙伴欢迎欢迎对本插件进行改进和升级
都让开,我要开始装逼了
装逼图:
由于代码里面的注释写的非常详细,我就只简单的描述一下步骤吧!
扫描二维码关注公众号,回复:
4799052 查看本文章
1、我们先创建一个下拉出来的布局xml文件;文件名:listview_head_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:background="#323232"
android:layout_height="match_parent">
<RelativeLayout
android:id="@+id/pullLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="10dp">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_marginTop="10dp">
<RelativeLayout
android:id="@+id/refresh"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:id="@+id/progress_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dp"
android:background="@drawable/progress_bar" />
<TextView
android:id="@+id/progress_Text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:layout_toEndOf="@id/progress_bar"
android:text="提示文本......"
android:textColor="#fff" />
</RelativeLayout>
<ImageView
android:id="@+id/refreshIcon"
android:layout_width="20dp"
android:layout_height="40dp"
android:layout_centerVertical="true"
android:layout_marginLeft="40dp"
android:background="@drawable/rjd_down"
android:paddingTop="-10dp" />
<TextView
android:id="@+id/pullText"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:textColor="#fff" />
</RelativeLayout>
</RelativeLayout>
</RelativeLayout>
2、然后定义相关的动画xml;
圆形帧动画滚动条:progress.xml
这里图片大家就自己去找吧,百度上一大把的
圆形帧动画滚动条:progress.xml
这里图片大家就自己去找吧,百度上一大把的
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
android:oneshot="false">
<item android:drawable="@drawable/toutiao__loading_12" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_11" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_10" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_09" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_08" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_07" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_06" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_05" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_04" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_03" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_02" android:duration="100"/>
<item android:drawable="@drawable/toutiao__loading_01" android:duration="100"/>
</animation-list>
下拉箭头旋转动画:
pullimage.xml(箭头向上旋转)
pullimage.xml(箭头向上旋转)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="200"
android:fromDegrees="0"
android:toDegrees="180"
android:pivotX="50%"
android:pivotY="50%"
/>
</set>
pullimage.xml(箭头向下旋转)
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="200"
android:fromDegrees="180"
android:toDegrees="360"
android:pivotX="50%"
android:pivotY="50%"
/>
</set>
3、创建一个CustomListView类,继承ListView(详细实现思路请看代码);
package com.example.zking.example;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
* Created by Administrator on 2017/7/25 0025.
*/
public class CustomListView extends ListView {
//记录刷新状态 1 刷新前、2 刷新中、3刷新成功
private static int refreshState=1;
//刷新监听事件接口
private OnRefreshListener listener=null;
//刷新动画
private AnimationDrawable animDra;
private Context context;
//下拉的HeaderView
private View headView;
//HeaderView的高度
private int headViewHeight;
//下拉提示语
private TextView pullText;
private TextView progress_Text;
//刷新图标
private ImageView pullImage;
private ImageView progress_bar;
//控制高度的布局
private RelativeLayout pullLayout;
//布局管理器
private ViewGroup.LayoutParams lp;
//标记标签
//记录是否第一次改变高度
boolean firstFlag=true;
//记录改变下拉图标的状态
boolean changePullImageFlag=true;
//按下的Y轴 释放的Y轴 下拉高度(按下-释放)
float flagYDown,flagYMove,flagY;
//定义一个Handler来处理子线程给我们返回的信息
Handler myHandler=new Handler(){
@Override
public void handleMessage(Message msg) {
switch(msg.what){
case 1:
progress_Text.setText("刷新成功!");
animDra.stop();
progress_bar.setBackgroundResource(R.drawable.obu);
break;
case 2:
//状态设为 刷新完毕
refreshState=3;
changeViewHeight(headViewHeight,0);
if(listener!=null){
listener.refreshAfter(CustomListView.this);
}
break;
}
}
};
public CustomListView(Context context) {
super(context);
}
public CustomListView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context=context;
headView=(View)LayoutInflater.from(context).inflate(R.layout.listview_head_layout,null);
pullLayout=(RelativeLayout) headView.findViewById(R.id.pullLayout);
lp=pullLayout.getLayoutParams();
headView.addOnLayoutChangeListener(new OnLayoutChangeListener() {
@Override
public void onLayoutChange(View v, int left, int top, int right, int bottom, int oldLeft, int oldTop, int oldRight, int oldBottom) {
//判断是否是第一次改变布局,如果是的话,则把布局的高度设为0
if(firstFlag){
headViewHeight=v.getHeight();
lp.height=0;
pullLayout.setLayoutParams(lp);
firstFlag=false;
}
}
});
//设置HeaderView
this.addHeaderView(headView);
initHeadView();
}
//初始化控件
void initHeadView(){
//圆形刷新动画
animDra = (AnimationDrawable) headView.findViewById(R.id.progress_bar).getBackground();
//圆形刷新图标
progress_bar=(ImageView) headView.findViewById(R.id.progress_bar);
//刷新提示文本
progress_Text=(TextView) headView.findViewById(R.id.progress_Text);
//下滑的提示文本
pullText=(TextView)headView.findViewById(R.id.pullText);
//下滑箭头图标
pullImage=(ImageView)headView.findViewById(R.id.refreshIcon);
}
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
//判断是否是最顶部和是否处于刷新状态
if(this.getFirstVisiblePosition()==0&&refreshState!=2){
switch(ev.getAction()){
case MotionEvent.ACTION_DOWN://手指按下时
flagYDown=ev.getY();
//按下时隐藏圆形进度条和提示文本,显示下拉箭头图、提示文本
progress_bar.setVisibility(View.GONE);
progress_Text.setVisibility(View.GONE);
pullText.setVisibility(View.VISIBLE);
pullImage.setBackgroundResource(R.drawable.rjd_down);
refreshState=1;
if(listener!=null){
listener.refreshBefore(CustomListView.this);
}
break;
case MotionEvent.ACTION_MOVE://手指滑动时
this.setSelection(0);
flagYMove=ev.getY();
//下拉的高度
flagY=(float)((flagYMove-flagYDown)*0.3);//这里*0.3是设置下拉的难易度,*的数越大越容易下拉
//判断下拉的高度是否大于ListView头布局原始的高度
if(flagY>headViewHeight){
pullText.setText("松开立即刷新");
//设置上下小箭头的旋转动画
//changePullImageFlag,设置一个标签,防止多次设置动画,当下拉的高宽改变时才设置动画
if(changePullImageFlag){
changePullIconAnimation(1,pullImage);
changePullImageFlag=false;
}
}else{
pullText.setText("下拉刷新");
if(changePullImageFlag==false){
changePullIconAnimation(0,pullImage);
changePullImageFlag=true;
}
}
//判断一下下拉的高度是否大于0
if(flagY>0){
lp.height=(int)flagY;
pullLayout.setLayoutParams(lp);
}
break;
case MotionEvent.ACTION_UP://手指放开时
//判断下拉的高度是否大于ListView头布局原始的高度
if(flagY>headViewHeight){
pullText.setVisibility(View.GONE);
pullImage.setBackgroundResource(R.color.pullImage);
//将圆形进度条,和提示文字显示出来
progress_bar.setVisibility(View.VISIBLE);
progress_Text.setVisibility(View.VISIBLE);
progress_Text.setText("正在刷新...");
//调用改变高度的缓冲动画的方法,并传入参数
changeViewHeight(lp.height,headViewHeight);
progress_bar.setBackgroundResource(R.drawable.progress_bar);
animDra=(AnimationDrawable) progress_bar.getBackground();
animDra.start();
//将状态设置为 正在刷新
refreshState=2;
//调用正在刷新
if(listener!=null){
listener.refreshStart(CustomListView.this);
}
}else{
changeViewHeight(lp.height,0);
}
break;
}
}
return super.dispatchTouchEvent(ev);
}
//改变高度的缓冲动画 开始动画的高度 结束动画的高度
public void changeViewHeight(int startHeight,int endHeight){
ValueAnimator va;
//判断开始的高度和结束的高度是否大于30大于30就设置启用弹跳效果
if(startHeight>headViewHeight||startHeight<30){
va= ValueAnimator.ofInt(startHeight,endHeight);
}else{
//开始高度 结束高度 弹跳的高度 结束高度
va= ValueAnimator.ofInt(startHeight,endHeight,15,endHeight);
}
//监听动画改变的事件
va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
//获取当前的height值
int h =(Integer)valueAnimator.getAnimatedValue();
//动态更新高度
lp.height=h;
pullLayout.setLayoutParams(lp);
}
});
va.setDuration(200);
//开始动画
va.start();
}
// 改变下拉箭头图标动画 状态 0转上去(松开立即刷新) 1转下来(下拉刷新)
public void changePullIconAnimation(int state,ImageView view){
Animation anim;
if(state==1){
anim=AnimationUtils.loadAnimation(this.getContext(),R.anim.pullimage);
}else{
anim=AnimationUtils.loadAnimation(this.getContext(),R.anim.pullimage_down);
}
anim.setFillAfter(true);
view.startAnimation(anim);
}
//设置刷新监听
public void setOnRefreshListener(OnRefreshListener listener){
this.listener=listener;
}
}
package com.example.zking.example;
/**
* Created by Administrator on 2017/7/29 0029.
*/
public interface OnRefreshListener {
public void refreshBefore(CustomListView civ);//刷新前
public void refreshAfter(CustomListView civ);//刷新后
public void refreshStart(CustomListView civ);//开始刷新
}
5、在我们展示的xml里面设置我们自定义的CustomListView,使用方法和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="match_parent"
android:orientation="vertical"
>
<com.example.zking.example.CustomListView
android:id="@+id/customLV"
android:layout_width="match_parent"
android:layout_height="match_parent">
</com.example.zking.example.CustomListView>
</LinearLayout>
6、在java类里面进行找出我们定义的CustomListView,为它初始出一些数据,然后再设置监听方法即可
package com.example.zking.example;
import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.widget.ArrayAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.RelativeLayout;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
CustomListView clv;
List<Object> list = new ArrayList<Object>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
clv=(CustomListView)findViewById(R.id.customLV);
initDataSource();
clv.setAdapter(new ArrayAdapter<>(this,android.R.layout.simple_list_item_1,list));
//设置刷新监听事件
clv.setOnRefreshListener(new OnRefreshListener() {
@Override
public void refreshBefore(CustomListView civ) {
}
@Override
public void refreshAfter(CustomListView civ) {
}
@Override
public void refreshStart(final CustomListView civ) {
//这里new一个线程,用于模仿网络刷新请求时长
new Thread(){
@Override
public void run() {
try {
this.sleep(4000);
civ.myHandler.sendEmptyMessage(1);
this.sleep(1000);
clv.myHandler.sendEmptyMessage(2);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}.start();
}
});
}
//初始数据
public void initDataSource() {
for (int i = 0; i <30; i++) {
list.add("a" + i);
}
}
}
呼呼,好啦 老夫已装完逼。接下来大伙儿去消化消化吧。
如需源码和素材的小伙伴,可以加我的QQ2557606319,添加好友时验证消息记得填写“CSDN”。