android中根据smartRefeshLayout自定义上下拉刷新效果

导入smartRefesh依赖:

implementation group: 'com.scwang.smartrefresh', name: 'SmartRefreshLayout', version: '1.1.0'

方式一：基于原来的属性进行设置:

先在styles.xml中加入：

    <style name="RefreshStyle">
        <!-- 下拉状态的图标设置 -->
        <item name="srlDrawableArrow">@mipmap/circle_loading</item>
        <!-- 释放状态的图标设置-->
        <item name="srlDrawableProgress">@mipmap/circle_loading</item>
        <!-- 下拉状态图标尺寸大小-->
        <item name="srlDrawableArrowSize">24dp</item>
        <!-- 释放状态图标尺寸大小-->
        <item name="srlDrawableProgressSize">24dp</item>
        <!-- 文字颜色 -->
        <item name="srlAccentColor">@color/lastTextColor</item>

        <!-- 上拉加载提示文字-->
        <item name="srlTextLoading">客官莫急</item>
        <!-- 上下拉状态提示文字设置-->
        <item name="srlTextPulling">下拉进行刷新</item>
        <!-- 松开刷新的文字设置-->
        <item name="srlTextRelease">松开刷新</item>
        <!-- 正在刷新中的状态文字设置-->
        <item name="srlTextRefreshing">加载中...</item>
        <!-- 刷新成功文字设置-->
        <item name="srlTextFinish">数据刷新成功</item>
    </style>

在主布局中加入以下并通过style属性引入设置的样式以及文字:

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

            <com.scwang.smartrefresh.layout.header.ClassicsHeader
                style="@style/RefreshStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recyclerView"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <com.scwang.smartrefresh.layout.footer.ClassicsFooter
                style="@style/RefreshStyle"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.scwang.smartrefresh.layout.SmartRefreshLayout>

方式二：

通过自定义的方式实现 RefreshHeader接口并实现方法即可

在values中创建一个attrs.xml的文件来设置自定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>

<declare-styleable name="customRefreshHeader">
    <!--  下拉文字设置-->
    <attr name="cus_pullText" format="string" />
    <!--  释放状态文字设置-->
    <attr name="cus_ReleaseText" format="string" />
    <!--  刷新文字设置-->
    <attr name="cus_RefreshText" format="string" />
    <!--  文字颜色设置-->
    <attr name="cus_TextColor" format="color" />
    <!--  文字字体大小-->
    <attr name="cus_TextSize" format="dimension" />
    <!--  是否显示文本-->
    <attr name="cus_isDisplayText" format="boolean" />
    <!--  图标宽-->
    <attr name="cus_iconWidth" format="dimension" />
    <!--  图标高-->
    <attr name="cus_iconHeight" format="dimension" />
</declare-styleable>

</resources>

创建一个子类实现 RefreshHeader 接口:

public class CustomRefreshHeader extends LinearLayout implements RefreshHeader {

    @BindView(R.id.iv_refresh_header)
    ImageView mImage;
    @BindView(R.id.refreshText)
    TextView refreshText;
    //下拉并提示 释放的动画
    private AnimationDrawable mAnimPull;
    //正在刷新时候的动画
    private AnimationDrawable mAnimRefresh;

    private String pullText;
    private String releaseText;
    private String refreshingText;


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

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

    public CustomRefreshHeader(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        View view = View.inflate(context, R.layout.m_refresh_header, this);
        ButterKnife.bind(this, view);
        if (attrs != null) {
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.customRefreshHeader);
            pullText = typedArray.getString(R.styleable.customRefreshHeader_cus_pullText);
            releaseText = typedArray.getString(R.styleable.customRefreshHeader_cus_ReleaseText);
            refreshingText = typedArray.getString(R.styleable.customRefreshHeader_cus_RefreshText);
            int textColor = typedArray.getColor(R.styleable.customRefreshHeader_cus_TextColor, Color.DKGRAY);
            float textSize = typedArray.getDimension(R.styleable.customRefreshHeader_cus_TextSize, 13);
            float icon_width = typedArray.getDimension(R.styleable.customRefreshHeader_cus_iconWidth, 80);
            float icon_height = typedArray.getDimension(R.styleable.customRefreshHeader_cus_iconHeight, 80);
            mImage.setLayoutParams(new LayoutParams((int) icon_width,(int)icon_height));
            boolean isDisplayText = typedArray.getBoolean(R.styleable.customRefreshHeader_cus_isDisplayText, true);
            refreshText.setTextColor(textColor);
            refreshText.setTextSize(textSize);
            if (isDisplayText) {
                refreshText.setVisibility(View.VISIBLE);
            } else {
                refreshText.setVisibility(View.GONE);
            }
        }
    }

    /**
     * 获取真实视图  不能为空 一般返回自定义的view
     *
     * @return
     */
    @NonNull
    @Override
    public View getView() {
        return this;
    }

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

    /**
     * 执行下拉
     *
     * @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);
//        }
    }

    /**
     * 释放后
     *
     * @param refreshLayout
     * @param height
     * @param maxDragHeight
     */
    @Override
    public void onReleased(@NonNull RefreshLayout refreshLayout, int height, int maxDragHeight) {

    }

    /**
     * 状态发生改变 一般3种状态
     *
     * @param refreshLayout
     * @param oldState      旧状态
     * @param newState      新状态
     */
    @Override
    public void onStateChanged(@NonNull RefreshLayout refreshLayout, @NonNull RefreshState oldState, @NonNull RefreshState newState) {

        switch (newState) {
            //下拉刷新的开始状态：下拉可以刷新
            case PullDownToRefresh:
                mImage.setImageResource(R.drawable.xialingang_0);//初始动画也可以是一张图片
                refreshText.setText(pullText);
                break;
            //下拉到最底部的状态：释放立即刷新
            case ReleaseToRefresh:
                mImage.setImageResource(R.drawable.eyes_anim_pull_end);
                mAnimPull = (AnimationDrawable) mImage.getDrawable();
                mAnimPull.start();
                refreshText.setText(releaseText);
                break;//正在刷新
            case Refreshing:
                mImage.setImageResource(R.drawable.eyes_anim_pull_refreshing);
                mAnimRefresh = (AnimationDrawable) mImage.getDrawable();
                mAnimRefresh.start();
                refreshText.setText(refreshingText);
                break;
        }

    }

    /**
     * 开启动画
     *
     * @param refreshLayout
     * @param height
     * @param maxDragHeight
     */
    @Override
    public void onStartAnimator(@NonNull RefreshLayout refreshLayout, int height, int maxDragHeight) {


    }

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

    @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) {

    }

    /**
     * 是否支持横向拖动
     *
     * @return
     */
    @Override
    public boolean isSupportHorizontalDrag() {
        return false;
    }
}

布局文件m_refresh_header.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:orientation="vertical"
    android:gravity="center">

    <ImageView
        android:id="@+id/iv_refresh_header"
        android:layout_width="match_parent"
        android:layout_height="80dp"/>

    <TextView
        android:id="@+id/refreshText"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"/>

</LinearLayout>

eyes_anim_pull_end、eyes_anim_pull_refreshing为帧动画分别为:

<?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/xialingang_0" android:duration="100" />
    <item android:drawable="@drawable/xialingang_1" android:duration="100" />
    <item android:drawable="@drawable/xialingang_2" android:duration="100" />
    <item android:drawable="@drawable/xialingang_3" android:duration="100" />
    <item android:drawable="@drawable/xialingang_4" android:duration="100" />
</animation-list>

eyes_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/xialingang_5" />
    <item android:duration="50" android:drawable="@drawable/xialingang_6" />
    <item android:duration="50" android:drawable="@drawable/xialingang_7" />
    <item android:duration="50" android:drawable="@drawable/xialingang_8" />
    <item android:duration="50" android:drawable="@drawable/xialingang_9" />
    <item android:duration="50" android:drawable="@drawable/xialingang_10" />
    <item android:duration="50" android:drawable="@drawable/xialingang_11" />
    <item android:duration="50" android:drawable="@drawable/xialingang_12" />
    <item android:duration="50" android:drawable="@drawable/xialingang_13" />
</animation-list>

　

使用方式:

在布局文件中在SmartRefreshLayout里面：

 <com.scwang.smartrefresh.layout.SmartRefreshLayout
     android:id="@+id/refreshId"
     android:layout_width="match_parent"
     android:layout_height="match_parent">

            <www.xx.com.view.CustomRefreshHeader
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cus_pullText="下拉释放数据"
                app:cus_ReleaseText="放开刷新数据"
                app:cus_RefreshText="数据刷新中"
                app:cus_iconWidth="120dp"
                app:cus_iconHeight="80dp"/>

            <android.support.v4.view.ViewPager
                android:id="@+id/myViewPagerId"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_below="@+id/customTabId"
                android:background="#EEEEEE" />

            <com.scwang.smartrefresh.layout.footer.ClassicsFooter
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:srlAccentColor="@android:color/holo_blue_dark"
                app:srlDrawableArrow="@drawable/loading_circle"
                app:srlDrawableProgress="@drawable/loading_circle"
                app:srlTextFinish="数据加载完成"
                app:srlTextLoading="上拉加载中"
                app:srlTextNothing="我是有底线的" />

　　</com.scwang.smartrefresh.layout.SmartRefreshLayout>