modabobo
- 浏览: 527594 次
-
文章分类
最新评论
Android UI- PullToRrefresh自定义下拉刷新动画
Android UI- PullToRrefresh自定义下拉刷新动画
如果觉得本文不错，麻烦投一票，2014年博客之星投票地址：http://vote.blog.csdn.net/blogstar2014/details?username=wwj_748#content
本篇博文要给大家分享的是如何使用修改开源项目PullToRrefresh下拉刷新的动画，来满足我们开发当中特定的需求，我们比较常见的一种下拉刷新样式可能是以下这种：
就是下拉列表的时候两个箭头上下翻转，更改日期文本和刷新状态，这种是最普遍的一种模式。
另外一种是旋转动画，就是刷新的时候一个圈不停的旋转，类似南方周末阅读器（注：是小巫公司的一个产品，各位多多支持O(∩_∩)O）：
github地址：https://github.com/devilWwj/Android-PullToRefresh
下载下来之后，import到工作空间，导入到目标项目中去，不清楚如何导入关联项目的童鞋请自行百度。
我这里要实现的一种效果是下拉刷新时播放一个帧动画
增加动画列表：
<?xml version="1.0" encoding="utf-8"?> <!-- 根标签为animation-list，其中oneshot代表着是否只展示一遍，设置为false会不停的循环播放动画 根标签下，通过item标签对动画中的每一个图片进行声明 android:duration 表示展示所用的该图片的时间长度 --> <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false" > <item android:drawable="@drawable/loading1" android:duration="150"></item> <item android:drawable="@drawable/loading2" android:duration="150"></item> <item android:drawable="@drawable/loading3" android:duration="150"></item> <item android:drawable="@drawable/loading4" android:duration="150"></item> </animation-list>
修改下拉刷新布局：
/PullToRefresh/res/layout/pull_to_refresh_header_simple.xml
<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >
<FrameLayout
android:id="@+id/fl_inner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/header_footer_top_bottom_padding"
android:paddingLeft="@dimen/header_footer_left_right_padding"
android:paddingRight="@dimen/header_footer_left_right_padding"
android:paddingTop="@dimen/header_footer_top_bottom_padding" >
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal" >
<ImageView
android:id="@+id/pull_to_refresh_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/loading1"
/>
</FrameLayout>
</FrameLayout>
</merge>
增加自定义的加载布局
/PullToRefresh/src/com/handmark/pulltorefresh/library/internal/TweenAnimLoadingLayout.java
package com.handmark.pulltorefresh.library.internal;
import com.handmark.pulltorefresh.library.R;
import com.handmark.pulltorefresh.library.PullToRefreshBase.Mode;
import com.handmark.pulltorefresh.library.PullToRefreshBase.Orientation;
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.view.View;
/**
* @date 2015/1/8
* @author wuwenjie
* @desc 帧动画加载布局
*/
public class TweenAnimLoadingLayout extends LoadingLayout {
private AnimationDrawable animationDrawable;
public TweenAnimLoadingLayout(Context context, Mode mode,
Orientation scrollDirection, TypedArray attrs) {
super(context, mode, scrollDirection, attrs);
// 初始化
mHeaderImage.setImageResource(R.drawable.refresh_anim);
animationDrawable = (AnimationDrawable) mHeaderImage.getDrawable();
}
// 默认图片
@Override
protected int getDefaultDrawableResId() {
return R.drawable.loading1;
}
@Override
protected void onLoadingDrawableSet(Drawable imageDrawable) {
// NO-OP
}
@Override
protected void onPullImpl(float scaleOfLayout) {
// NO-OP
}
// 下拉以刷新
@Override
protected void pullToRefreshImpl() {
// NO-OP
}
// 正在刷新时回调
@Override
protected void refreshingImpl() {
// 播放帧动画
animationDrawable.start();
}
// 释放以刷新
@Override
protected void releaseToRefreshImpl() {
// NO-OP
}
// 重新设置
@Override
protected void resetImpl() {
mHeaderImage.setVisibility(View.VISIBLE);
mHeaderImage.clearAnimation();
}
}
我们只要修改开源项目中的LodingLayout代码：
/PullToRefresh/src/com/handmark/pulltorefresh/library/internal/LoadingLayout.java
/*******************************************************************************
* Copyright 2011, 2012 Chris Banes.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*******************************************************************************/
package com.handmark.pulltorefresh.library.internal;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.ColorStateList;
import android.content.res.TypedArray;
import android.graphics.Typeface;
import android.graphics.drawable.AnimationDrawable;
import android.graphics.drawable.Drawable;
import android.text.TextUtils;
import android.util.TypedValue;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Interpolator;
import android.view.animation.LinearInterpolator;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.TextView;
import com.handmark.pulltorefresh.library.ILoadingLayout;
import com.handmark.pulltorefresh.library.PullToRefreshBase.Mode;
import com.handmark.pulltorefresh.library.PullToRefreshBase.Orientation;
import com.handmark.pulltorefresh.library.R;
@SuppressLint("ViewConstructor")
public abstract class LoadingLayout extends FrameLayout implements ILoadingLayout {
static final String LOG_TAG = "PullToRefresh-LoadingLayout";
static final Interpolator ANIMATION_INTERPOLATOR = new LinearInterpolator();
private FrameLayout mInnerLayout;
protected final ImageView mHeaderImage;
protected final ProgressBar mHeaderProgress;
private boolean mUseIntrinsicAnimation;
private final TextView mHeaderText;
private final TextView mSubHeaderText;
protected final Mode mMode;
protected final Orientation mScrollDirection;
private CharSequence mPullLabel;
private CharSequence mRefreshingLabel;
private CharSequence mReleaseLabel;
public LoadingLayout(Context context, final Mode mode, final Orientation scrollDirection, TypedArray attrs) {
super(context);
mMode = mode;
mScrollDirection = scrollDirection;
switch (scrollDirection) {
case HORIZONTAL:
LayoutInflater.from(context).inflate(R.layout.pull_to_refresh_header_horizontal, this);
break;
case VERTICAL:
default:
// LayoutInflater.from(context).inflate(R.layout.pull_to_refresh_header_vertical, this);
// 修改代码
LayoutInflater.from(context).inflate(R.layout.pull_to_refresh_header_simple, this);
break;
}
mInnerLayout = (FrameLayout) findViewById(R.id.fl_inner);
mHeaderText = (TextView) mInnerLayout.findViewById(R.id.pull_to_refresh_text);
mHeaderProgress = (ProgressBar) mInnerLayout.findViewById(R.id.pull_to_refresh_progress);
mSubHeaderText = (TextView) mInnerLayout.findViewById(R.id.pull_to_refresh_sub_text);
mHeaderImage = (ImageView) mInnerLayout.findViewById(R.id.pull_to_refresh_image);
FrameLayout.LayoutParams lp = (FrameLayout.LayoutParams) mInnerLayout.getLayoutParams();
switch (mode) {
case PULL_FROM_END:
lp.gravity = scrollDirection == Orientation.VERTICAL ? Gravity.TOP : Gravity.LEFT;
// Load in labels
mPullLabel = context.getString(R.string.pull_to_refresh_from_bottom_pull_label);
mRefreshingLabel = context.getString(R.string.pull_to_refresh_from_bottom_refreshing_label);
mReleaseLabel = context.getString(R.string.pull_to_refresh_from_bottom_release_label);
break;
case PULL_FROM_START:
default:
lp.gravity = scrollDirection == Orientation.VERTICAL ? Gravity.BOTTOM : Gravity.RIGHT;
// Load in labels
mPullLabel = context.getString(R.string.pull_to_refresh_pull_label);
mRefreshingLabel = context.getString(R.string.pull_to_refresh_refreshing_label);
mReleaseLabel = context.getString(R.string.pull_to_refresh_release_label);
break;
}
if (attrs.hasValue(R.styleable.PullToRefresh_ptrHeaderBackground)) {
Drawable background = attrs.getDrawable(R.styleable.PullToRefresh_ptrHeaderBackground);
if (null != background) {
ViewCompat.setBackground(this, background);
}
}
// if (attrs.hasValue(R.styleable.PullToRefresh_ptrHeaderTextAppearance)) {
// TypedValue styleID = new TypedValue();
// attrs.getValue(R.styleable.PullToRefresh_ptrHeaderTextAppearance, styleID);
// setTextAppearance(styleID.data);
// }
// if (attrs.hasValue(R.styleable.PullToRefresh_ptrSubHeaderTextAppearance)) {
// TypedValue styleID = new TypedValue();
// attrs.getValue(R.styleable.PullToRefresh_ptrSubHeaderTextAppearance, styleID);
// setSubTextAppearance(styleID.data);
// }
//
// // Text Color attrs need to be set after TextAppearance attrs
// if (attrs.hasValue(R.styleable.PullToRefresh_ptrHeaderTextColor)) {
// ColorStateList colors = attrs.getColorStateList(R.styleable.PullToRefresh_ptrHeaderTextColor);
// if (null != colors) {
// setTextColor(colors);
// }
// }
// if (attrs.hasValue(R.styleable.PullToRefresh_ptrHeaderSubTextColor)) {
// ColorStateList colors = attrs.getColorStateList(R.styleable.PullToRefresh_ptrHeaderSubTextColor);
// if (null != colors) {
// setSubTextColor(colors);
// }
// }
// Try and get defined drawable from Attrs
Drawable imageDrawable = null;
if (attrs.hasValue(R.styleable.PullToRefresh_ptrDrawable)) {
imageDrawable = attrs.getDrawable(R.styleable.PullToRefresh_ptrDrawable);
}
// Check Specific Drawable from Attrs, these overrite the generic
// drawable attr above
switch (mode) {
case PULL_FROM_START:
default:
if (attrs.hasValue(R.styleable.PullToRefresh_ptrDrawableStart)) {
imageDrawable = attrs.getDrawable(R.styleable.PullToRefresh_ptrDrawableStart);
} else if (attrs.hasValue(R.styleable.PullToRefresh_ptrDrawableTop)) {
Utils.warnDeprecation("ptrDrawableTop", "ptrDrawableStart");
imageDrawable = attrs.getDrawable(R.styleable.PullToRefresh_ptrDrawableTop);
}
break;
case PULL_FROM_END:
if (attrs.hasValue(R.styleable.PullToRefresh_ptrDrawableEnd)) {
imageDrawable = attrs.getDrawable(R.styleable.PullToRefresh_ptrDrawableEnd);
} else if (attrs.hasValue(R.styleable.PullToRefresh_ptrDrawableBottom)) {
Utils.warnDeprecation("ptrDrawableBottom", "ptrDrawableEnd");
imageDrawable = attrs.getDrawable(R.styleable.PullToRefresh_ptrDrawableBottom);
}
break;
}
// If we don't have a user defined drawable, load the default
if (null == imageDrawable) {
imageDrawable = context.getResources().getDrawable(getDefaultDrawableResId());
}
// Set Drawable, and save width/height
setLoadingDrawable(imageDrawable);
reset();
}
public final void setHeight(int height) {
ViewGroup.LayoutParams lp = getLayoutParams();
lp.height = height;
requestLayout();
}
public final void setWidth(int width) {
ViewGroup.LayoutParams lp = getLayoutParams();
lp.width = width;
requestLayout();
}
public final int getContentSize() {
switch (mScrollDirection) {
case HORIZONTAL:
return mInnerLayout.getWidth();
case VERTICAL:
default:
return mInnerLayout.getHeight();
}
}
public final void hideAllViews() {
// if (View.VISIBLE == mHeaderText.getVisibility()) {
// mHeaderText.setVisibility(View.INVISIBLE);
// }
// if (View.VISIBLE == mHeaderProgress.getVisibility()) {
// mHeaderProgress.setVisibility(View.INVISIBLE);
// }
// if (View.VISIBLE == mHeaderImage.getVisibility()) {
// mHeaderImage.setVisibility(View.INVISIBLE);
// }
// if (View.VISIBLE == mSubHeaderText.getVisibility()) {
// mSubHeaderText.setVisibility(View.INVISIBLE);
// }
}
public final void onPull(float scaleOfLayout) {
if (!mUseIntrinsicAnimation) {
onPullImpl(scaleOfLayout);
}
}
public final void pullToRefresh() {
// if (null != mHeaderText) {
// mHeaderText.setText(mPullLabel);
// }
// Now call the callback
pullToRefreshImpl();
}
public final void refreshing() {
if (null != mHeaderText) {
mHeaderText.setText(mRefreshingLabel);
}
if (mUseIntrinsicAnimation) {
((AnimationDrawable) mHeaderImage.getDrawable()).start();
} else {
// Now call the callback
refreshingImpl();
}
// if (null != mSubHeaderText) {
// mSubHeaderText.setVisibility(View.GONE);
// }
}
public final void releaseToRefresh() {
// if (null != mHeaderText) {
// mHeaderText.setText(mReleaseLabel);
// }
// Now call the callback
releaseToRefreshImpl();
}
public final void reset() {
// if (null != mHeaderText) {
// mHeaderText.setText(mPullLabel);
// }
mHeaderImage.setVisibility(View.VISIBLE);
if (mUseIntrinsicAnimation) {
((AnimationDrawable) mHeaderImage.getDrawable()).stop();
} else {
// Now call the callback
resetImpl();
}
// if (null != mSubHeaderText) {
// if (TextUtils.isEmpty(mSubHeaderText.getText())) {
// mSubHeaderText.setVisibility(View.GONE);
// } else {
// mSubHeaderText.setVisibility(View.VISIBLE);
// }
// }
}
@Override
public void setLastUpdatedLabel(CharSequence label) {
// setSubHeaderText(label);
}
@Override
public final void setLoadingDrawable(Drawable imageDrawable) {
// Set Drawable
mHeaderImage.setImageDrawable(imageDrawable);
mUseIntrinsicAnimation = (imageDrawable instanceof AnimationDrawable);
// Now call the callback
onLoadingDrawableSet(imageDrawable);
}
@Override
public void setPullLabel(CharSequence pullLabel) {
mPullLabel = pullLabel;
}
@Override
public void setRefreshingLabel(CharSequence refreshingLabel) {
mRefreshingLabel = refreshingLabel;
}
@Override
public void setReleaseLabel(CharSequence releaseLabel) {
mReleaseLabel = releaseLabel;
}
@Override
public void setTextTypeface(Typeface tf) {
mHeaderText.setTypeface(tf);
}
public final void showInvisibleViews() {
// if (View.INVISIBLE == mHeaderText.getVisibility()) {
// mHeaderText.setVisibility(View.VISIBLE);
// }
// if (View.INVISIBLE == mHeaderProgress.getVisibility()) {
// mHeaderProgress.setVisibility(View.VISIBLE);
// }
if (View.INVISIBLE == mHeaderImage.getVisibility()) {
mHeaderImage.setVisibility(View.VISIBLE);
}
// if (View.INVISIBLE == mSubHeaderText.getVisibility()) {
// mSubHeaderText.setVisibility(View.VISIBLE);
// }
}
/**
* Callbacks for derivative Layouts
*/
protected abstract int getDefaultDrawableResId();
protected abstract void onLoadingDrawableSet(Drawable imageDrawable);
protected abstract void onPullImpl(float scaleOfLayout);
protected abstract void pullToRefreshImpl();
protected abstract void refreshingImpl();
protected abstract void releaseToRefreshImpl();
protected abstract void resetImpl();
private void setSubHeaderText(CharSequence label) {
if (null != mSubHeaderText) {
if (TextUtils.isEmpty(label)) {
mSubHeaderText.setVisibility(View.GONE);
} else {
mSubHeaderText.setText(label);
// Only set it to Visible if we're GONE, otherwise VISIBLE will
// be set soon
if (View.GONE == mSubHeaderText.getVisibility()) {
mSubHeaderText.setVisibility(View.VISIBLE);
}
}
}
}
private void setSubTextAppearance(int value) {
if (null != mSubHeaderText) {
mSubHeaderText.setTextAppearance(getContext(), value);
}
}
private void setSubTextColor(ColorStateList color) {
if (null != mSubHeaderText) {
mSubHeaderText.setTextColor(color);
}
}
private void setTextAppearance(int value) {
if (null != mHeaderText) {
mHeaderText.setTextAppearance(getContext(), value);
}
if (null != mSubHeaderText) {
mSubHeaderText.setTextAppearance(getContext(), value);
}
}
private void setTextColor(ColorStateList color) {
if (null != mHeaderText) {
mHeaderText.setTextColor(color);
}
if (null != mSubHeaderText) {
mSubHeaderText.setTextColor(color);
}
}
}
最后就不要让我提供源码了，笔者这里只是提供一个思路，把刷新的头布局更改为我们的自定义布局就行了。
最终效果是下拉刷新的时候会有一个不停在闪的灯，这里没有录制gif动画，只提供一张截图吧：
分享到：
发表评论
相关推荐
SwipeRefreshLayout是Android SDK提供的一种易于使用的下拉刷新布局，它可以包裹一个子View，当用户下拉时，子View会显示一个刷新动画。 首先，我们需要在布局XML文件中添加SwipeRefreshLayout，并在其内部嵌套一个...
- 创建一个布局文件，定义下拉刷新的UI元素，如旋转动画、加载提示文本等。 - 将这个布局作为ListView的Header View添加到ListView中。 2. **监听手势**： - 通过监听ListView的OnScrollListener，我们可以获取...
Android系统定制-SystemUI-下拉状态栏快捷设置新增选项(自动亮度&静音)_Patch 文章链接：https://blog.csdn.net/qq_33750826/article/details/122829104
总的来说，自定义下拉刷新的RecyclerView涉及到了Android UI组件的高级用法，包括事件监听、动画制作以及数据管理。掌握这些技能将使你在Android开发中更加游刃有余。实践这些知识，你将能够创建出更加交互性和用户...
在Android中，刷新动画通常用于下拉刷新列表视图，为用户提供可视化的反馈，表明数据正在加载或更新。 `GuideView.java`很可能是这个自定义刷新控件的核心类。在这个类中，开发者可能定义了自定义视图的布局、绘制...
本教程将详细讲解如何在Android中实现自定义的下拉刷新和上拉加载功能。 首先，我们要了解这两个概念的核心思想。下拉刷新（Pull-to-Refresh）是指用户在滚动列表到顶部时，继续向下拖动以触发数据的更新。上拉加载...
在Android中，ListView的下拉刷新通常需要自定义实现，因为默认的ListView并不直接支持此特性。自定义主要涉及以下几个部分： 1. 自定义头部布局：创建一个包含刷新指示器（如旋转动画）的布局，这个布局将在用户...
在iOS应用开发中，下拉刷新控件是一种常见的交互元素，它允许用户通过向...对于XDRefresh-master这个项目，很可能是开源的一个自定义下拉刷新解决方案，通过阅读和学习其代码，可以进一步提升我们的Swift UI开发技能。
本篇文章将详细讲解如何在Android中实现一个简单的自定义ListView下拉刷新功能。 首先，下拉刷新功能通常涉及到两个主要部分：UI组件和逻辑处理。UI组件是用户可见的部分，包括可拉伸的头部视图和动画效果；逻辑...
本篇主要介绍如何在Android中实现一个自定义的下拉刷新功能，并结合帧动画效果，提升用户体验。 一、下拉刷新原理 下拉刷新的基本原理是监听ListView的滚动事件，当用户上滑到列表顶部并继续下拉时，如果满足一定的...
自定义下拉刷新意味着开发者需要根据自己的需求和设计风格，创建不同于系统默认刷新控件（如UIRefreshControl）的独特刷新效果。下面将详细探讨如何在iOS应用中实现自定义下拉刷新。 首先，了解系统默认的...
`Android-PullDownListView`是一个专门为实现这种功能而设计的自定义控件，它不仅提供了基本的下拉刷新功能，还引入了独特的视觉效果——仿微信下拉中眼睛动画的效果。 这个控件的核心原理是利用Android的滚动事件...
本教程将详细介绍如何在iOS项目中实现自定义的下拉刷新和上拉加载，使得开发者可以根据具体需求进行定制。 首先，下拉刷新（Pull-to-Refresh）是指当用户在列表顶部向下拉动时，会显示一个刷新指示器，松手后自动...
下面我们将深入探讨如何在Android中实现一个自定义控件的下拉刷新功能。 首先，我们来看一下描述中提到的`pull_to_refresh.xml`布局文件，这是定义下拉刷新头部视图的关键部分。布局包含了一个`RelativeLayout`，...
在Android开发中，"自定义下拉刷新"是一项常见的需求，尤其在列表视图(ListView)和滚动视图中。这个功能允许用户通过下拉列表顶部来触发数据的更新，通常与“加载更多”功能结合，当用户滚动到底部时加载新的数据。...
在本文中，我们将深入探讨如何在AngularJS应用中集成并使用ui-select2库来实现多选下拉功能。AngularJS是一款强大的前端JavaScript框架，而select2是一个流行的jQuery插件，它提供了美观且功能丰富的选择器组件，...
在Android应用开发中，UI交互的流畅性和用户体验是至关重要的，而列表的上拉下拉刷新功能已经成为现代移动应用的标准特性。"Android UI列表的上拉下拉刷新之Android-PullToRefresh"这个主题主要涉及如何在Android...
- **Android动画**：Android提供了多种动画API，包括ValueAnimator、ObjectAnimator等，开发者可以利用这些API为下拉刷新动作添加自定义动画效果。 - **第三方库支持**：像PullToRefreshLayout或...
本示例“Android自定义上拉加载下拉刷新控件”提供了一个基于Android Studio的DEMO，帮助开发者理解并实现这一功能。 首先，我们来看下拉刷新（Pull-to-Refresh）功能。这是在用户滚动到列表顶部时，可以通过下拉...
总的来说，"Android代码-安卓自定义view"项目涵盖了Android开发中多个高级主题，对开发者来说，理解并掌握这些技术不仅能提升UI设计的灵活性，还能提高应用程序的用户体验。通过实践这些示例，开发者能够深化对...