SmartRefreshLayout自定义Header和Foot

如果没有了解SmartRefreshLayout基本使用, 请先看 SmartRefreshLayout基本使用
因为自定义Header和Foote方式基本一样, 所以这里介绍Header就可以了

MyHeaderView.gif

一. 官方文档介绍

github文档
我们看到官方文档实现方式:
① 自定义一个View, 实现RefreshHeader接口.
② 重写RefreshHeader里面所有方法

发现问题:
① 有部分方法我们根本就用不到, 但是还是要重写去实现.
② 重写用不到的方法的时候, 部分方法有返回值, 我们还得关注返回值是什么意思.

二. 解决办法

1. 先去看看SmartRefreshLayout框架内部有没有解决方案.
2. 如果没有, 自己写一个基类BaseHeader实现RefreshHeader接口, 重写接口方法, 然后自定义HeaderView继承BaseHeader, 需要什么方法就重写什么方法.
   因为部分方法需要子类必须实现, 所以BaseHeader定义成抽象类

//通用的, 任意项目都可以用
public class abstract BaseHeader implements RefreshHeader{
      //重写RefreshHeader里面的方法
      ...
}

//具体项目Header
public class HeaderView extends BaseHeader{
        //需要什么方法就重写什么方法
}

SmartRefreshLayout内部解决方案:
因为框架本身就集成有默认的Header, 所以我们先看系统的ClassicsHeader是怎么实现的.

ClassicsHeader.png

我们看到ClassicsHeader实现了RefreshHeader接口, 但是继承的却不是基本布局, 而是一个自定义的布局InternalClassics<ClassicsHeader>.

InternalClassics.jpg InternalAbstract.png

得出继承关系:

 class ClassicsHeader extends InternalClassics implements RefreshHeader

 class InternalClassics extends InternalAbstract implements RefreshInternal

class InternalAbstract extends RelativeLayout implements RefreshInternal

interface RefreshHeader extends RefreshInternal

我们看到InternalAbstract 注释里写着: 实现 Header 和 Footer 时，继承 InternalAbstract 的话可以少写很多接口方法

于是可以这样写

public class MyHeaderView extends InternalAbstract{

    protected MyHeaderView(@NonNull View wrapped) {
        super(wrapped);
    }

    protected MyHeaderView(@NonNull View wrappedView, @Nullable RefreshInternal wrappedInternal) {
        super(wrappedView, wrappedInternal);
    }

    protected MyHeaderView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

但是还有2个问题要解决:

1. 自定义View布局如何添加进去?
2. 下拉过程和释放刷新等状态如何监听?

解决方法:
1: 我们看到InternalAbstract 的父类其实就是RelativeLayout, 所以在初始化的时候直接addView(headerView)就可以了

2. 参考文档 结合ClassicsHeader源码
   最基础的写法, 只需重写onFinish和onStateChanged即可. 当然其它方法看具体需求

于是得到以下写法

import com.scwang.smartrefresh.layout.api.RefreshLayout;
import com.scwang.smartrefresh.layout.constant.RefreshState;
import com.scwang.smartrefresh.layout.internal.InternalAbstract;

/**
 * 自定义HeaderView
 */
public class MyHeaderView extends InternalAbstract{

    public static String REFRESH_HEADER_PULLING = "下拉可以刷新";//"下拉可以刷新";
    public static String REFRESH_HEADER_LOADING = "正在加载...";//"正在加载...";
    public static String REFRESH_HEADER_RELEASE = "释放立即刷新";
    public static String REFRESH_HEADER_FINISH = "刷新成功";//"刷新完成";
    public static String REFRESH_HEADER_FAILED = "刷新失败";//"刷新失败";

    private TextView mTitleText;

    public MyHeaderView(Context context) {
        this(context, null);
    }

    public MyHeaderView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyHeaderView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        View view = LayoutInflater.from(context).inflate(R.layout.miyuan_refresh_head, this);
        mTitleText = view.findViewById(R.id.txt);

    }

    @Override
    public int onFinish(@NonNull RefreshLayout layout, boolean success) {
        if (success) {
            mTitleText.setText(REFRESH_HEADER_FINISH);
        } else {
            mTitleText.setText(REFRESH_HEADER_FAILED);
        }
        super.onFinish(layout, success);
        return 500; //延迟500毫秒之后再弹回
    }

    @Override
    public void onStateChanged(@NonNull RefreshLayout refreshLayout, @NonNull RefreshState oldState, @NonNull RefreshState newState) {
        switch (newState) {
            case PullDownToRefresh: //下拉过程
                mTitleText.setText(REFRESH_HEADER_PULLING);
                break;
            case ReleaseToRefresh: //松开刷新
                mTitleText.setText(REFRESH_HEADER_RELEASE);
                break;
            case Refreshing: //loading中
                mTitleText.setText(REFRESH_HEADER_LOADING);
                break;
        }
    }
}

如果想查看newState更多状态码, 可以去看看RefreshState(枚举)的源码

总结 自定义Header步骤:

1. 自定义View 继承 InternalAbstract.
2. 初始化时, 添加自定义布局到Header
3. 重写onStateChanged和onFinish监听手势滑动, 根据不同的状态改变布局UI.

优化
上面的MyHeaderView基本是可以用了,但是还有会出现2个问题

1. 我们一个项目中, 基本上会有多页面都会用到同一个MyHeaderView, 那我们每次都需要在xml中这么写.

<com.scwang.smartrefresh.layout.SmartRefreshLayout
    android:id="@+id/refreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.liys.smartrefreshlayout.MyHeaderView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <!-- 我的布局 -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/a"/>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>

很明显, 这么写会很捞, 重复代码太多.

2. 多个页面我想换成另一个自定义HeaderView, 怎么办呢? 每个布局去改或者修改MyHeaderView源码. 显然这样也不好.

解决思路:
我们可以写多一层, 把SmartRefreshLayout和MyHeaderView封装起来, 为了降低耦合性, 我们可以把MyHeaderView封装成一个属性, 默认给它一个MyHeaderView, 也就是整个项目需要的HeaderView, 部分页面需要独立的HeaderView可以自定义添加进去. 封装完成我们可以直接这么写

<com.liys.smartrefreshlayout.MySmartRefreshLayout
    android:id="@+id/refreshLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <!--app:headView = "..."-->
  
    <!-- 我的布局 -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/a"/>
</com.liys.smartrefreshlayout.MySmartRefreshLayout>

这里只提供思路, 这个具体怎么封装就得看个人了.

例如: 简单封装, 这里只是单纯把MyHeaderView添加进去而已.

public class MySmartRefreshLayout extends SmartRefreshLayout{

    MyHeaderView  mHeaderView;

    public MySmartRefreshLayout (Context context) {
        this(context, null);
    }

    public MySmartRefreshLayout (Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MySmartRefreshLayout (Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        ViewGroup.LayoutParams layoutParams = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
        mHeaderView= new MyHeaderView(context);
        mHeaderView.setLayoutParams(layoutParams);
        addView(headRefresh, 0);
    }
}