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>
