Android中自定义SmartRefreshLayout的下拉

作者: 马木木_1991 | 来源:发表于2019-04-09 19:39 被阅读133次

下拉刷新整合空白页方案
Android中自定义SmartRefreshLayout的下拉
Android智能下拉刷新框架-SmartRefreshLayo
框架整理系列二十七（下拉刷新框架）
常用的开源框架
iOS转android之上拉下拉刷新SpringView
一个Android下拉刷新样式
列表适配器
Android 上拉加载更多和下拉刷新
WebView+SmartRefreshLayout实现下拉刷新

SmartRefreshLayout是一个很优秀的下拉刷新控件。前面我已经写过他配合RecyclerView的下拉刷新。但是所使用的头文件动画是他内部自带的，而我们平时的使用中大多数都是使用公司吉祥物或者logo来展示。所以在此做一篇单独的介绍。

说明：

一，使用的Androidstudio版本为3.3

二，SmartRefreshLayout是智能的下拉刷新框架。如何使用请看如下文章。

Android中RecyclerView配合SmartRefreshLayout实现下拉刷新以及优化（二）：https://www.jianshu.com/p/0d37b5e21c09

展示如下

https://img.haomeiwen.com/i14906070/b7dc97ef211a0b57.gif?imageMogr2/auto-orient/strip

现在正式开始（下拉刷新部分）

1，在build.gradle中增加下拉刷新SmartRefreshLayout的依赖和butterknife依赖

apply plugin: 'com.android.application'

android {
    compileSdkVersion 27
    defaultConfig {
        applicationId "com.mumu.jsrecyclerview5"
        minSdkVersion 19
        targetSdkVersion 27
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
}
//1，增加jitpack支持
allprojects {
    repositories {
        maven { url "https://jitpack.io" }
        maven { url "https://maven.google.com" }
        flatDir {
            dirs 'libs'
        }
    }
}
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'

    //2，butterKnife
    implementation 'com.jakewharton:butterknife:8.8.1'
    annotationProcessor 'com.jakewharton:butterknife-compiler:8.8.1'

    //3，增加下拉刷新SmartRefreshLayout的依赖
    implementation 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-21'
    implementation 'com.scwang.smartrefresh:SmartRefreshHeader:1.1.0-alpha-21'

}

2，在drawable中添加图片的资源文件，这需要注意，放资源文件的时候不要放进v24里面去了，不然有些手机会报错找不到资源id，会闪退。

image.png

drawable/anim_pull_refreshing.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<animation-list android:oneshot="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_01" />
    <item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_02" />
    <item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_03" />
    <item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_02" />
    <item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_05" />
    <item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_06" />
    <item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_07" />
    <item android:duration="50" android:drawable="@drawable/commonui_refreshing_image_frame_06" />
</animation-list>

/drawable/anim_pull_end.xml如下：

<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:oneshot="true">

    <item
        android:drawable="@drawable/commonui_pull_end_image_frame_01"
        android:duration="100" />

    <item
        android:drawable="@drawable/commonui_pull_end_image_frame_02"
        android:duration="100" />

    <item
        android:drawable="@drawable/commonui_pull_end_image_frame_03"
        android:duration="100" />

    <item
        android:drawable="@drawable/commonui_pull_end_image_frame_04"
        android:duration="100" />

    <item
        android:drawable="@drawable/commonui_pull_end_image_frame_05"
        android:duration="100" />

</animation-list>

3，增加自定义的activity文件，如下，最重要的6个步骤都有注释，核心在第五步，要搞清楚这个动画的三个关键时间段。第一个时间段：下拉过程，第二个时间段：下拉到底部最大值，第三个时间段：松开手指。而第五步中的三个状态分别是这三个时间段的初始化状态。

package com.mumu.jsrecyclerview5;

import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.scwang.smartrefresh.layout.api.RefreshHeader;
import com.scwang.smartrefresh.layout.api.RefreshKernel;
import com.scwang.smartrefresh.layout.api.RefreshLayout;
import com.scwang.smartrefresh.layout.constant.RefreshState;
import com.scwang.smartrefresh.layout.constant.SpinnerStyle;

public class MRefreshHeader extends LinearLayout implements RefreshHeader {

    private ImageView mImage;
    private AnimationDrawable mAnimPull;
    private AnimationDrawable mAnimRefresh;

    /**
     * 1，构造方法
     */
    public MRefreshHeader(Context context) {
        this(context, null, 0);
    }

    public MRefreshHeader(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MRefreshHeader(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        View view = View.inflate(context, R.layout.m_refresh_header, this);
        mImage = view.findViewById(R.id.iv_refresh_header);
    }

    /**
     * 2，获取真实视图（必须返回，不能为null）一般就是返回当前自定义的view
     */
    @NonNull
    @Override
    public View getView() {
        return this;
    }

    /**
     * 3，获取变换方式（必须指定一个：平移、拉伸、固定、全屏）,Translate指平移，大多数都是平移
     */
    @NonNull
    @Override
    public SpinnerStyle getSpinnerStyle() {
        return SpinnerStyle.Translate;
    }

    /**
     * 4，执行下拉的过程
     *
     * @param isDragging
     * @param percent
     * @param offset
     * @param height
     * @param maxDragHeight
     */
    @Override
    public void onMoving(boolean isDragging, float percent, int offset, int height, int maxDragHeight) {
        if (percent < 1) {
            mImage.setScaleX(percent);
            mImage.setScaleY(percent);
        }
    }

    /**
     * 5，一般可以理解为一下case中的三种状态，在达到相应状态时候开始改变
     * 注意：这三种状态都是初始化的状态
     */
    @Override
    public void onStateChanged(@NonNull RefreshLayout refreshLayout, @NonNull RefreshState oldState, @NonNull RefreshState newState) {
        switch (newState) {
            //1,下拉刷新的开始状态：下拉可以刷新
            case PullDownToRefresh:
                mImage.setImageResource(R.drawable.commonui_pull_image);
                break;
            //2,下拉到最底部的状态：释放立即刷新
            case ReleaseToRefresh:
                mImage.setImageResource(R.drawable.anim_pull_end);
                mAnimPull = (AnimationDrawable) mImage.getDrawable();
                mAnimPull.start();
                break;
            //3,下拉到最底部后松手的状态：正在刷新
            case Refreshing:
                mImage.setImageResource(R.drawable.anim_pull_refreshing);
                mAnimRefresh = (AnimationDrawable) mImage.getDrawable();
                mAnimRefresh.start();
                break;
        }
    }

    /**
     * 6，结束下拉刷新的时候需要关闭动画
     *
     * @param refreshLayout
     * @param success
     * @return
     */
    @Override
    public int onFinish(@NonNull RefreshLayout refreshLayout, boolean success) {
        if (mAnimRefresh != null && mAnimRefresh.isRunning()) {
            mAnimRefresh.stop();
        }
        if (mAnimPull != null && mAnimPull.isRunning()) {
            mAnimPull.stop();
        }
        return 0;
    }

    @Override
    public void onReleased(@NonNull RefreshLayout refreshLayout, int height, int maxDragHeight) {

    }

    @Override
    public void onStartAnimator(@NonNull RefreshLayout refreshLayout, int height, int maxDragHeight) {

    }

    @Override
    public void setPrimaryColors(int... colors) {

    }

    @Override
    public void onInitialized(@NonNull RefreshKernel kernel, int height, int maxDragHeight) {

    }

    @Override
    public void onHorizontalDrag(float percentX, int offsetX, int offsetMax) {

    }

    @Override
    public boolean isSupportHorizontalDrag() {
        return false;
    }
}

4，对应的xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@color/white"
    android:padding="5dp"
    android:gravity="center"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/iv_refresh_header"
        android:scaleX="0"
        android:scaleY="0"
        android:translationY="0dp"
        android:layout_width="41dp"
        android:layout_height="54dp" />
</LinearLayout>

现在正式开始（上拉加载部分）

5，自定义的footer文件

package com.mumu.jsrecyclerview5;

import android.content.Context;
import android.graphics.drawable.AnimationDrawable;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.view.animation.LinearInterpolator;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.scwang.smartrefresh.layout.api.RefreshFooter;
import com.scwang.smartrefresh.layout.api.RefreshKernel;
import com.scwang.smartrefresh.layout.api.RefreshLayout;
import com.scwang.smartrefresh.layout.constant.RefreshState;
import com.scwang.smartrefresh.layout.constant.SpinnerStyle;

/**
 * @author : zlf
 * date    : 2019-04-19
 * github  : https://github.com/mamumu
 * blog    : https://www.jianshu.com/u/281e9668a5a6
 */
public class MRefreshFooter extends LinearLayout implements RefreshFooter {

    private ImageView mImage;
    private Animation mAnim;

    public MRefreshFooter(Context context) {
        this(context, null, 0);
    }

    public MRefreshFooter(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MRefreshFooter(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        View view = View.inflate(context, R.layout.m_refresh_footer, this);
        mImage = view.findViewById(R.id.iv_refresh_footer);
        mAnim = AnimationUtils.loadAnimation(getContext(), R.anim.anim_round_rotate);
        LinearInterpolator linearInterpolator = new LinearInterpolator();
        mAnim.setInterpolator(linearInterpolator);

    }


    @Override
    public boolean setNoMoreData(boolean noMoreData) {
        return false;
    }

    @NonNull
    @Override
    public View getView() {
        return this;
    }

    @NonNull
    @Override
    public SpinnerStyle getSpinnerStyle() {
        return SpinnerStyle.Translate;
    }

    @Override
    public void setPrimaryColors(int... colors) {

    }

    @Override
    public void onInitialized(@NonNull RefreshKernel kernel, int height, int maxDragHeight) {

    }

    @Override
    public void onMoving(boolean isDragging, float percent, int offset, int height, int maxDragHeight) {

    }

    @Override
    public void onReleased(@NonNull RefreshLayout refreshLayout, int height, int maxDragHeight) {

    }

    @Override
    public void onStartAnimator(@NonNull RefreshLayout refreshLayout, int height, int maxDragHeight) {
        if (mAnim != null) {
            mImage.startAnimation(mAnim);
        }
    }

    @Override
    public int onFinish(@NonNull RefreshLayout refreshLayout, boolean success) {
        if (mAnim != null) {
            mAnim.cancel();
        }
        return 0;
    }

    @Override
    public void onHorizontalDrag(float percentX, int offsetX, int offsetMax) {

    }

    @Override
    public boolean isSupportHorizontalDrag() {
        return false;
    }

    @Override
    public void onStateChanged(@NonNull RefreshLayout refreshLayout, @NonNull RefreshState oldState, @NonNull RefreshState newState) {

    }
}

6，自定义的footer文件对应的xml

<?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:background="@color/white"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="5dp">

    <ImageView
        android:id="@+id/iv_refresh_footer"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:src="@drawable/default_ptr_rotate" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="让你放心 才是对的"
        android:textSize="11sp" />
</LinearLayout>

7，MainActivity

package com.mumu.jsrecyclerview5;

import android.os.Bundle;
import android.os.Handler;
import android.support.annotation.NonNull;
import android.support.v7.app.AppCompatActivity;
import android.widget.TextView;

import com.scwang.smartrefresh.layout.SmartRefreshLayout;
import com.scwang.smartrefresh.layout.api.RefreshLayout;
import com.scwang.smartrefresh.layout.listener.OnRefreshLoadMoreListener;

import butterknife.BindView;
import butterknife.ButterKnife;
import butterknife.OnClick;

public class MainActivity extends AppCompatActivity {

    @BindView(R.id.smart)
    SmartRefreshLayout smart;
    @BindView(R.id.text)
    TextView text;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        smartRefreshView();
    }

    /**
     * 1，刷新控件的监听
     */
    private void smartRefreshView() {
        smart.setOnRefreshLoadMoreListener(new OnRefreshLoadMoreListener() {
            @Override
            public void onLoadMore(@NonNull final RefreshLayout refreshLayout) {
                //延迟3秒关闭
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        refreshLayout.finishLoadMore();
                    }
                }, 3000);

            }

            @Override
            public void onRefresh(@NonNull final RefreshLayout refreshLayout) {
                //2，刷新完成关闭，正常情况是请求接口完成关闭
                //延迟3秒关闭
                new Handler().postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        refreshLayout.finishRefresh();
                        refreshLayout.setNoMoreData(true);
                    }
                }, 3000);
            }
        });
    }


    @OnClick(R.id.text)
    public void onViewClicked() {
        smart.finishRefresh();
    }
}

6，MainActivity对应的xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="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=".MainActivity">

    <com.scwang.smartrefresh.layout.SmartRefreshLayout
        android:id="@+id/smart"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:srlAccentColor="#00000000"
        app:srlEnablePreviewInEditMode="true"
        app:srlPrimaryColor="#00000000">

        <com.mumu.jsrecyclerview5.MRefreshHeader
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="#5500ff00"
            android:gravity="center">

            <TextView
                android:id="@+id/text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我爱安卓"
                android:textColor="#ff00ff"
                android:textSize="30sp" />
        </LinearLayout>

        <com.mumu.jsrecyclerview5.MRefreshFooter
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.scwang.smartrefresh.layout.SmartRefreshLayout>
</LinearLayout>

7，使用起来很简单，直接将自定义的这个view放在SmartRefreshLayout中就可以了，如第六步xml所示。

8，对应github地址

demo地址：https://github.com/mamumu/jsRecyclerView5

9，特别感谢：https://github.com/cachecats/LikeMeiTuan

如果有发现错误欢迎指正我及时修改，如果有好的建议欢迎留言。如果觉得对你有帮助欢迎给小星星，谢谢。

下拉刷新整合空白页方案
1.说明下拉刷新控件SmartRefreshLayout 下拉刷新自定义头布局ClassicsHeader 空白...
Android中自定义SmartRefreshLayout的下拉
SmartRefreshLayout是一个很优秀的下拉刷新控件。前面我已经写过他配合RecyclerView的下拉...
Android智能下拉刷新框架-SmartRefreshLayo
转载： Android智能下拉刷新框架-SmartRefreshLayout[https://github.com...
框架整理系列二十七（下拉刷新框架）
Android智能下拉刷新框架-SmartRefreshLayout 感谢大神：https://github.co...
常用的开源框架
网络请求类UI类Android智能下拉刷新框架-SmartRefreshLayout https://github...
iOS转android之上拉下拉刷新SpringView
Android中的上拉下拉刷新控件也是很多的，我所了解的有SmartRefreshLayout（评分很高但是我不想...
一个Android下拉刷新样式
近来需求要求下拉刷新动画Android和iOS统一样式, 效果如下: 使用SmartRefreshLayout这个...
列表适配器
------上拉下拉刷新加载------****SmartRefreshLayout 智能下拉刷新框架~20190...
Android 上拉加载更多和下拉刷新
一、前言：这一篇文章是解析Android智能下拉刷新框架-SmartRefreshLayout ，这是一篇上拉加...
WebView+SmartRefreshLayout实现下拉刷新
如何给WebView添加下拉刷新 1，需求： SmartRefreshLayout + WebView进行下拉刷新...

Android中自定义SmartRefreshLayout的下拉

说明：

一，使用的Androidstudio版本为3.3

二，SmartRefreshLayout是智能的下拉刷新框架。如何使用请看如下文章。

Android中RecyclerView配合SmartRefreshLayout实现下拉刷新以及优化（二）：https://www.jianshu.com/p/0d37b5e21c09

展示如下

现在正式开始（下拉刷新部分）

1，在build.gradle中增加下拉刷新SmartRefreshLayout的依赖和butterknife依赖

2，在drawable中添加图片的资源文件，这需要注意，放资源文件的时候不要放进v24里面去了，不然有些手机会报错找不到资源id，会闪退。

4，对应的xml文件

现在正式开始（上拉加载部分）

5，自定义的footer文件

6，自定义的footer文件对应的xml

7，MainActivity

6，MainActivity对应的xml

7，使用起来很简单，直接将自定义的这个view放在SmartRefreshLayout中就可以了，如第六步xml所示。

8，对应github地址

demo地址：https://github.com/mamumu/jsRecyclerView5

9，特别感谢：https://github.com/cachecats/LikeMeiTuan

相关文章

下拉刷新整合空白页方案

Android中自定义SmartRefreshLayout的下拉

Android智能下拉刷新框架-SmartRefreshLayo

框架整理系列二十七（下拉刷新框架）

常用的开源框架

iOS转android之上拉下拉刷新SpringView

一个Android下拉刷新样式

列表适配器

Android 上拉加载更多和下拉刷新

WebView+SmartRefreshLayout实现下拉刷新

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android专题