android开发

快速仿写京东、天猫下拉刷新

文／沈敏杰（简书作者）

原文链接：http://www.jianshu.com/p/9daaa87045d0# 

好久没输出文章了，最近研发任务比较忙，果然计划赶不上变化，之前还希望能一周一输出，好吧，我还是承认自己比较懒好了，=.=##  这次跟大家分享一下下拉刷新，之前我们的公司的项目一直都是使用SwipeRefreshLayout,官方的Md风格，好用少Bug。闲话不多说了，咱们现在分析一下哪种下拉刷新比较多，有的是直接包在ListView或者RecyclerView的头部，有得则是像SwipeRefreshLayout一样，包在视图的最外层，个人建议使用包在最外层的做法，可扩展性比较强，另一种的话，可以借鉴一下XRecyclerView,具体的就不多说了，咱们使用最外层的方法，快速的构建一个类似像京东、天猫的下拉刷新。

1.使用框架android-Ultra-Pull-To-Refresh

https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh

大家感兴趣的可以去看一下这个下拉刷新框架，非常强大，可扩展性非常强，兼容各种view的下拉刷新事件。

2.京东下拉刷新

先放一张效果来看一下，京东的下拉刷新动画：

通俗的来说，就是一个快递小哥，跑过来，接住商品，然后刷新的时候，自己拿着商品跑起来。（解释有点牵强啊）
咱们来分析一下整一个过程：
1.快递小哥从远处跑过去拿商品,可以拆成两个部分.

当拿到商品之后，就跑起来，在我们程序里，就是动画：

（你去解压一下京东的apk，你也能拿到这些图片）

其实就是图片之间的切换，以上的准备工作都完成了，看看这个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="@mipmap/a2a" />
        <ImageView
            android:id="@+id/iv_goods"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|center"
            android:src="@mipmap/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>

根据第一个人跟商品，咱们先分开两个ImageView,使用FrameLayout布局，然后让这两个ImageView放进去，商品的这个ImageView设置layoutgravity=right.

咱们再看看android-Ultra-Pull-To-Refresh这个框架给我们带来什么。

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);
}

这是一下下拉刷新事件的接口，只要实现以上接口就能得到相应的，得到以上接口

至于各个接口有什么，看接口名大家应该就知道了。
直接贴代码更直观：

/**
 * 下拉刷新header
 * Created by shenminjie on 2016/12/6.
 */
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 mAnimation;
    public JdRefreshHeader(Context context) {
        super(context);
        initView();
    }
    public JdRefreshHeader(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    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);
        mAnimation = (AnimationDrawable) mIvMan.getBackground();
        if (!mAnimation.isRunning()) {
            mAnimation.start();
        }
    }
    @Override
    public void onUIRefreshComplete(PtrFrameLayout frame) {
        mState = STATE_FINISH;
        mIvGoods.setVisibility(View.VISIBLE);
        //停止动画
        if (mAnimation.isRunning()) {
            mAnimation.stop();
        }
        mIvMan.setBackgroundResource(R.mipmap.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());
                FrameLayout.LayoutParams mIvManLayoutParams = (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());
                    mIvManLayoutParams.setMargins(0, 0, marginRight, 0);
                    mIvMan.setLayoutParams(mIvManLayoutParams);
                }
                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，达到了快递小哥获取商品的效果，然后当刷新的时候，隐藏商品，使用之前所提供的三张图片进行效应的切换，也就是动画:

<animation-list xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false">
    <item
        android:drawable="@mipmap/a2b"
        android:duration="70" />
    <item
        android:drawable="@mipmap/a2c"
        android:duration="70" />
    <item
        android:drawable="@mipmap/a2d"
        android:duration="70" />
</animation-list>

@Override
public void onUIRefreshBegin(PtrFrameLayout frame) {
    mState = STATE_BEGIN;
    //隐藏商品logo,开启跑步动画
    mIvGoods.setVisibility(View.GONE);
    mIvMan.setBackgroundResource(R.drawable.runningman);
    mAnimation = (AnimationDrawable) mIvMan.getBackground();
    if (!mAnimation.isRunning()) {
        mAnimation.start();
    }
}

当刷新结束的时候，我们把动画停止，并把之前的商品显示出来：

@Override
public void onUIRefreshComplete(PtrFrameLayout frame) {
    mState = STATE_FINISH;
    mIvGoods.setVisibility(View.VISIBLE);
    //停止动画
    if (mAnimation.isRunning()) {
        mAnimation.stop();
    }
    mIvMan.setBackgroundResource(R.mipmap.a2a);
}

很简单，基本上难点框架都已经帮我们封装好了，我们只要继承PtrFrameLayout,添加相应的Header以及实现PtrUIHandler就可以实现。

/**
 *仿京东下拉刷新
 * Created by shenminjie on 2016/12/6.
 */
public class JdRefreshLayout extends PtrFrameLayout {
    /**
     * headerView
     */
     JdRefreshHeader mHeaderView;
    public JdRefreshLayout(Context context) {
        super(context);
        initView();
    }
    public JdRefreshLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }
    public JdRefreshLayout(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView();
    }
    /**
     * 初始化view
     */
    private void initView() {
        mHeaderView = new JdRefreshHeader(getContext());
        setHeaderView(mHeaderView);
        addPtrUIHandler(mHeaderView);
    }
}

2091165-5a926d5967fc2e94.gif

2、天猫

天猫的更简单，毫无动画可言，说白了就是个GIF，大家可以去下载个apk，解压后能得到其gif。
原理跟之前的是一样，但这里我使用的是fresco进行加载gif，方法有很多，大家感兴趣的可以去试试。

2091165-97091bd53203a515.gif

/**
 * 下拉刷新header
 * Created by shenminjie on 2016/12/6.
 */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) {        super(context);
        initView();
    }    public TmallRefreshHeader(Context context, AttributeSet attrs) {        super(context, attrs);
        initView();
    }    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 mDraweeController = Fresco.newDraweeControllerBuilder()
                .setAutoPlayAnimations(true)                //设置uri,加载本地的gif资源
                .setUri(Uri.parse("res://" + getContext().getPackageName() + "/" + R.drawable.tm_mui_bike))//设置uri
                .build();
        sdv.setController(mDraweeController);
        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;
        }
    }
}/**
 * 仿天猫下拉刷新view
 * Created by shenminjie on 2016/12/6.
 */public class TmallRefreshLayout extends PtrFrameLayout {    /**
     * headerView
     */
     TmallRefreshHeader mHeaderView;    public TmallRefreshLayout(Context context) {        super(context);
        initView();
    }    public TmallRefreshLayout(Context context, AttributeSet attrs) {        super(context, attrs);
        initView();
    }    public TmallRefreshLayout(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);
        initView();
    }    /**
     * 初始化view
     */
    private void initView() {
        mHeaderView = new TmallRefreshHeader(getContext());
        setHeaderView(mHeaderView);
        addPtrUIHandler(mHeaderView);
    }
}

2091165-6cb843c249325de1.gif

感兴趣的朋友可以去下载个Apk看一下：

https://www.pgyer.com/o9gA

github:
https://github.com/shenminjie/jd_tmall_refresh_demo

泡在网上的日子
每天进步一点点
0

粉丝

0

关注

0

获赞

0

访问

推荐文章