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>