这篇文章主要为大家详细介绍了 Android 仿京东、天猫下拉刷新效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
Android 是一种基于 Linux 的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由 Google 公司和开放手机联盟领导及开发。尚未有统一中文名称,中国大陆地区较多人使用 "安卓" 或 "安致"。
说到下拉刷新,相信大家都不陌生,现在基本上每个项目都会用到。我们公司的项目一直都是使用 SwipeRefreshLayout,官方的 Material Design 风格,好用少 Bug。现在下拉刷新大概有下面几种实现方式:一种是直接包在 ListView 或者 RecyclerView 的头部,有的则是像 SwipeRefreshLayout 一样,包在视图的最外层,个人建议使用包在最外层的做法,可拓展性比较强。下面用包在最外层的方法实现京东和天猫的下拉刷新。
1. 使用框架 Android-Ultra-Pull-To-Refresh
大家有兴趣的可以去看一下这个下拉刷新框架,可拓展性非常强,兼容各种 View 的下拉刷新事件。
2. 京东下拉刷新
先看看京东的下拉刷新动画:
从上图可以看出,就是一个动画,当然截图有点卡,首先,我们解压手机京东的 app,得到上面的图片:
先看看头部刷新的布局怎么实现:
jd_refresh_header_view.xml
- <?xml version="1.0" encoding="utf-8"?>
- <RelativeLayout
- xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="wrap_content">
- <FrameLayout
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_toLeftOf="@+id/layout_tx">
- <ImageView
- android:id="@+id/iv_man"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:background="@drawable/a2a" />
- <ImageView
- android:id="@+id/iv_goods"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="right|center"
- android:src="@drawable/a29" />
- </FrameLayout>
- <LinearLayout
- android:id="@+id/layout_tx"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_centerInParent="true"
- android:layout_marginLeft="5dp"
- android:gravity="center_vertical"
- android:orientation="vertical"
- android:padding="5dp">
- <TextView
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="让购物更便捷"
- android:textSize="14sp" />
- <TextView
- android:id="@+id/tv_remain"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginTop="5dp"
- android:text="松开刷新"
- android:textSize="12sp" />
- </LinearLayout>
- </RelativeLayout>
咱们再看看 android-Ultra-Pull-To-Refresh 这个框架:
- package in.srain.cube.views.ptr;
- import in.srain.cube.views.ptr.indicator.PtrIndicator;
- /**
- *
- */
- public interface PtrUIHandler {
- /**
- * When the content view has reached top and refresh has been completed, view will be reset.
- *
- * @param frame
- */
- public void onUIReset(PtrFrameLayout frame);
- /**
- * prepare for loading
- *
- * @param frame
- */
- public void onUIRefreshPrepare(PtrFrameLayout frame);
- /**
- * perform refreshing UI
- */
- public void onUIRefreshBegin(PtrFrameLayout frame);
- /**
- * perform UI after refresh
- */
- public void onUIRefreshComplete(PtrFrameLayout frame);
- public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator);
- }
这是一个下拉刷新事件处理接口,包括准备刷新,开始刷新,刷新完成和刷新改变等事件的处理,直接上代码:
JdRefreshHeader.java
- package com.jackie.pulltorefresh.jd;
- import android.content.Context;
- import android.graphics.drawable.AnimationDrawable;
- import android.util.AttributeSet;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.widget.FrameLayout;
- import android.widget.ImageView;
- import android.widget.TextView;
- import com.jackie.pulltorefresh.R;
- import in.srain.cube.views.ptr.PtrFrameLayout;
- import in.srain.cube.views.ptr.PtrUIHandler;
- import in.srain.cube.views.ptr.indicator.PtrIndicator;
- /**
- * 下拉刷新HeaderView
- */
- public class JdRefreshHeader extends FrameLayout implements PtrUIHandler {
- /**
- * 提醒文本
- */
- private TextView mTvRemind;
- /**
- * 快递员logo
- */
- private ImageView mIvMan;
- /**
- * 商品logo
- */
- private ImageView mIvGoods;
- /**
- * 状态识别
- */
- private int mState;
- /**
- * 重置
- * 准备刷新
- * 开始刷新
- * 结束刷新
- */
- public static final int STATE_RESET = -1;
- public static final int STATE_PREPARE = 0;
- public static final int STATE_BEGIN = 1;
- public static final int STATE_FINISH = 2;
- public static final int MARGIN_RIGHT = 100;
- /**
- * 动画
- */
- private AnimationDrawable mAnimationDrawable;
- public JdRefreshHeader(Context context) {
- this(context, null);
- }
- public JdRefreshHeader(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public JdRefreshHeader(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- initView();
- }
- /**
- * 初始化view
- */
- private void initView() {
- View view = LayoutInflater.from(getContext()).inflate(R.layout.jd_refresh_header_view, this, false);
- mTvRemind = (TextView) view.findViewById(R.id.tv_remain);
- mIvMan = (ImageView) view.findViewById(R.id.iv_man);
- mIvGoods = (ImageView) view.findViewById(R.id.iv_goods);
- addView(view);
- }
- @Override
- public void onUIReset(PtrFrameLayout frame) {
- mState = STATE_RESET;
- }
- @Override
- public void onUIRefreshPrepare(PtrFrameLayout frame) {
- mState = STATE_PREPARE;
- }
- @Override
- public void onUIRefreshBegin(PtrFrameLayout frame) {
- mState = STATE_BEGIN;
- //隐藏商品logo,开启跑步动画
- mIvGoods.setVisibility(View.GONE);
- mIvMan.setBackgroundResource(R.drawable.runningman);
- mAnimationDrawable = (AnimationDrawable) mIvMan.getBackground();
- if (!mAnimationDrawable.isRunning()) {
- mAnimationDrawable.start();
- }
- }
- @Override
- public void onUIRefreshComplete(PtrFrameLayout frame) {
- mState = STATE_FINISH;
- mIvGoods.setVisibility(View.VISIBLE);
- //停止动画
- if (mAnimationDrawable.isRunning()) {
- mAnimationDrawable.stop();
- }
- mIvMan.setBackgroundResource(R.drawable.a2a);
- }
- @Override
- public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
- //处理提醒字体
- switch (mState) {
- case STATE_PREPARE:
- //logo设置
- mIvMan.setAlpha(ptrIndicator.getCurrentPercent());
- mIvGoods.setAlpha(ptrIndicator.getCurrentPercent());
- LayoutParams params = (LayoutParams) mIvMan.getLayoutParams();
- if (ptrIndicator.getCurrentPercent() <= 1) {
- mIvMan.setScaleX(ptrIndicator.getCurrentPercent());
- mIvMan.setScaleY(ptrIndicator.getCurrentPercent());
- mIvGoods.setScaleX(ptrIndicator.getCurrentPercent());
- mIvGoods.setScaleY(ptrIndicator.getCurrentPercent());
- int marginRight = (int) (MARGIN_RIGHT - MARGIN_RIGHT * ptrIndicator.getCurrentPercent());
- params.setMargins(0, 0, marginRight, 0);
- mIvMan.setLayoutParams(params);
- }
- if (ptrIndicator.getCurrentPercent() < 1.2) {
- mTvRemind.setText("下拉刷新...");
- } else {
- mTvRemind.setText("松开刷新...");
- }
- break;
- case STATE_BEGIN:
- mTvRemind.setText("更新中...");
- break;
- case STATE_FINISH:
- mTvRemind.setText("加载完成...");
- break;
- }
- }
- }
创建一个成员变量 mState,用于保存下拉刷新的时候,每一个状态,然后根据保存好的状态在 UIPositionChange 的接口中,对 UI 进行相应的修改,保存每个状态文本的提示,在下拉的过程中,通过 UIPositionChange 的回调,获取 PtrIndicator 中,可以获取下拉的百分比,根据这个百分比我们可以做很多东西,例如京东的快递小哥从远处跑过来拿商品,以及快递小哥与商品之间的大小,都可以根据这个 PtrIndicator 百分比进行设置其大小的比例,跑过来这个过程我使用的方法是利用 marginRight 进行设置两者之间的距离,当达到下拉刷新的临界点时,快递小哥跟商品之间的 margin 为 0,达到了快递小哥获取商品的效果,然后当刷新的时候,隐藏商品,使用之前所提供的三张图片进行效应的切换,也就是动画:
- <?xml version="1.0" encoding="utf-8"?>
- <animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
- <item
- android:drawable="@drawable/a2b"
- android:duration="70" />
- <item
- android:drawable="@drawable/a2c"
- android:duration="70" />
- <item
- android:drawable="@drawable/a2d"
- android:duration="70" />
- </animation-list>
效果图如下:
3. 天猫下拉刷新
天猫的更简单,毫无动画可言,说白了就是个 GIF,大家可以去下载个 apk,解压后能得到其 gif。原理跟之前的是一样,但这里我使用的是 fresco 进行加载 gif,方法有很多,大家感兴趣的可以去试试。
TmallRefreshHeader.java
- package com.jackie.pulltorefresh.tmall;
- import android.content.Context;
- import android.net.Uri;
- import android.util.AttributeSet;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.widget.FrameLayout;
- import android.widget.TextView;
- import com.facebook.drawee.backends.pipeline.Fresco;
- import com.facebook.drawee.interfaces.DraweeController;
- import com.facebook.drawee.view.SimpleDraweeView;
- import com.jackie.pulltorefresh.R;
- import in.srain.cube.views.ptr.PtrFrameLayout;
- import in.srain.cube.views.ptr.PtrUIHandler;
- import in.srain.cube.views.ptr.indicator.PtrIndicator;
- /**
- * 下拉刷新HeaderView
- */
- public class TmallRefreshHeader extends FrameLayout implements PtrUIHandler {
- /**
- * 提醒文本
- */
- private TextView mTvRemind;
- /**
- * 状态识别
- */
- private int mState;
- /**
- * 重置
- * 准备刷新
- * 开始刷新
- * 结束刷新
- */
- public static final int STATE_RESET = -1;
- public static final int STATE_PREPARE = 0;
- public static final int STATE_BEGIN = 1;
- public static final int STATE_FINISH = 2;
- public TmallRefreshHeader(Context context) {
- this(context, null);
- }
- public TmallRefreshHeader(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public TmallRefreshHeader(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- initView();
- }
- /**
- * 初始化view
- */
- private void initView() {
- View view = LayoutInflater.from(getContext()).inflate(R.layout.tmall_refresh_header_view, this, false);
- mTvRemind = (TextView) view.findViewById(R.id.tv_remind);
- SimpleDraweeView sdv = (SimpleDraweeView) view.findViewById(R.id.tm_logo);
- DraweeController draweeController = Fresco.newDraweeControllerBuilder()
- .setAutoPlayAnimations(true)
- //设置uri,加载本地的gif资源
- .setUri(Uri.parse("res://" + getContext().getPackageName() + "/" + R.drawable.tm_mui_bike))//设置uri
- .build();
- sdv.setController(draweeController);
- addView(view);
- }
- @Override
- public void onUIReset(PtrFrameLayout frame) {
- mState = STATE_RESET;
- }
- @Override
- public void onUIRefreshPrepare(PtrFrameLayout frame) {
- mState = STATE_PREPARE;
- }
- @Override
- public void onUIRefreshBegin(PtrFrameLayout frame) {
- mState = STATE_BEGIN;
- }
- @Override
- public void onUIRefreshComplete(PtrFrameLayout frame) {
- mState = STATE_FINISH;
- }
- @Override
- public void onUIPositionChange(PtrFrameLayout frame, boolean isUnderTouch, byte status, PtrIndicator ptrIndicator) {
- //处理提醒字体
- switch (mState) {
- case STATE_PREPARE:
- if (ptrIndicator.getCurrentPercent() < 1) {
- mTvRemind.setText("下拉刷新");
- } else {
- mTvRemind.setText("松开立即刷新");
- }
- break;
- case STATE_BEGIN:
- mTvRemind.setText("正在刷新...");
- break;
- case STATE_FINISH:
- mTvRemind.setText("加载完成...");
- break;
- }
- }
- }
效果图如下:
最后附上 github 地址:
{aa0aa}
来源: http://www.phperz.com/article/17/0318/326182.html