Android 仿网易一元夺宝客户端下拉加载动画实现(一)

上上周写的一个demo，仿照网易一元夺宝的下拉刷新效果。

原效果是(第一部分)一个小太阳拉下来，然后松开回弹上去，

(第二部分)再掉下来一个硬币进行中轴旋转。

本文实现的效果的是第一部分的，效果演示图如下：

Gif图看起来比较卡顿。。。其实真机演示效果还是很流畅的。

下面分析实现过程：

当时因为时间有限没有写在下拉刷新的组件中，也没有封装成一个单独的组件，只是在主布局后面写了一个View然后实现相应的操作，进行封装并不难，这里就不花时间BB了，下面是布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".aty.MainActivity"><location.haidian.com.wypulltoreflush.view.NGImgViewandroid:id="@+id/ngimg_main"android:layout_width="match_parent"android:layout_height="match_parent"/><ImageViewandroid:id="@+id/img_main_sun"android:layout_width="50dp"android:layout_height="50dp"android:layout_centerHorizontal="true"android:layout_marginTop="5dp"android:src="@drawable/ic_sun1"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#00123456"android:orientation="vertical"><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="55dp"android:background="#FF4081"></RelativeLayout><Viewandroid:layout_width="match_parent"android:layout_height="0.5dp"android:background="@android:color/darker_gray"></View><location.haidian.com.wypulltoreflush.view.NGReFlashListViewandroid:id="@+id/lv_main"android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1"android:cacheColorHint="#00000000"/></LinearLayout></RelativeLayout>

布局文件预览：

因为设置了透明，所以这里在没有item的情况下是能看到后面的布局的。

代码实现：

通过下拉刷新类NGReFlashListView进行事件判断，然后通过回调把相应的事件传递给NGImageView中改变视图显示。

下面是两个类的源代码：

NGReFlashListView类：

package location.haidian.com.wypulltoreflush.view;import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.ListView;import location.haidian.com.wypulltoreflush.R;public class NGReFlashListView extends ListView implements OnScrollListener {private View header;private int headerHeight;private int firstVisibleItem;private int scrollState;private final int NONE = 0;private final int PULL = 1;private final int RELESE = 2;private final int REFLASHING = 3;public NGReFlashListView(Context context) {super(context);initView(context);}public NGReFlashListView(Context context, AttributeSet attrs) {super(context, attrs);initView(context);}public NGReFlashListView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);initView(context);}/*** @param context*/private void initView(Context context) {LayoutInflater inflater = LayoutInflater.from(context);header = inflater.inflate(R.layout.layout_heard, null);measureView(header);headerHeight = header.getMeasuredHeight();topPadding(-headerHeight);this.addHeaderView(header);this.setOnScrollListener(this);}/*** @param view*/private void measureView(View view) {ViewGroup.LayoutParams p = view.getLayoutParams();if (p == null) {p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);}int width = ViewGroup.getChildMeasureSpec(0, 0, p.width);int height;int tempHeight = p.height;if (tempHeight > 0) {height = MeasureSpec.makeMeasureSpec(tempHeight,MeasureSpec.EXACTLY);} else {height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);}view.measure(width, height);}/*** @param topPadding*/private void topPadding(int topPadding) {header.setPadding(header.getPaddingLeft(), topPadding,header.getPaddingRight(), header.getPaddingBottom());header.invalidate();}@Overridepublic void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {this.firstVisibleItem = firstVisibleItem;}@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {this.scrollState = scrollState;}boolean isRemark;//初始化标识int startY;int state;@Overridepublic boolean onTouchEvent(MotionEvent ev) {switch (ev.getAction()) {case MotionEvent.ACTION_DOWN:if (firstVisibleItem == 0) {onRlvScrollListener.onScrollYChangged(0, 0);isRemark = true;startY = (int) ev.getY();}break;case MotionEvent.ACTION_MOVE:onMove(ev);break;case MotionEvent.ACTION_UP:if (state == RELESE) {onRlvScrollListener.onScrollYChangged(0, 3);state = REFLASHING;reflashViewByState();//iReflashListener.onReflash();} else if (state == PULL) {state = NONE;onRlvScrollListener.onScrollYChangged(0, 0);isRemark = false;reflashViewByState();}break;}return super.onTouchEvent(ev);}int space;  //间距int topPadding;     //headview距离顶端的距离，初始-200/*** @param ev*/private void onMove(MotionEvent ev) {if (!isRemark) {return;}int tempY = (int) ev.getY();space = tempY - startY;if (space >= 230) {space = 230;}topPadding = space - headerHeight;onRlvScrollListener.onScrollYChangged(space, state);switch (state) {case NONE:if (space > 0) {state = PULL;reflashViewByState();}break;case PULL:topPadding(topPadding);if (space == headerHeight + 30&& scrollState == SCROLL_STATE_TOUCH_SCROLL) {state = RELESE;reflashViewByState();}break;case RELESE:if (space < headerHeight + 30) {state = PULL;reflashViewByState();} else if (space <= 0) {state = NONE;isRemark = false;reflashViewByState();}break;}}/*** 控制下拉刷新的图像文字显示*/private void reflashViewByState() {switch (state) {case NONE://缓慢滑上去topPadding(-headerHeight);break;case PULL:break;case RELESE:break;case REFLASHING:break;}}/*** 刷新完成*/public void reflashComplete() {state = NONE;onRlvScrollListener.onScrollYChangged(0, state);isRemark = false;reflashViewByState();}//绘制背景的接口public interface OnRlvScrollListener {void onScrollYChangged(int Y, int state);}private OnRlvScrollListener onRlvScrollListener;public void setOnRlvScrollListener(OnRlvScrollListener onRlvScrollListener) {this.onRlvScrollListener = onRlvScrollListener;}}

NGImgView.java

实现比较简单，根据传来的回调状态改变进行小太阳和两只球球手以及手臂的绘制就可以了。

package location.haidian.com.wypulltoreflush.view;import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.drawable.BitmapDrawable;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.ImageView;
import location.haidian.com.wypulltoreflush.R;/*** Created by nangua on 2016/8/28.*/
public class NGImgView extends ImageView implements NGReFlashListView.OnRlvScrollListener {private float scale;private final int NONE = 0;private final int PULL = 1;private final int RELESE = 2;private final int REFLASHING = 3;public int state = 0;private float WITH;     //屏幕总宽private float scrollY;private Bitmap sun0;public float time = 0;public NGImgView(Context context, AttributeSet attrs) {super(context, attrs);initView();}private void initView() {sun0 = ((BitmapDrawable) getResources().getDrawable(R.drawable.ic_sun0)).getBitmap();scale = this.getResources().getDisplayMetrics().density;}@Overrideprotected void onDraw(Canvas canvas) {Paint paint = new Paint();paint.setAntiAlias(true);//抗锯齿paint.setColor(Color.parseColor("#C4885A"));Log.d("xiaojingyu","State:" + state);if (state!=3) {time = 0; //重置时间//画两只球球手canvas.drawCircle(WITH / 2 - 40 * scale, 55 * scale, 5 * scale, paint);canvas.drawCircle(WITH / 2 + 40 * scale, 55 * scale, 5 * scale, paint);//画笑脸canvas.drawBitmap(sun0,null,new RectF(WITH / 2 - 50,55 * scale + scrollY - (scrollY / 230) * 50,WITH / 2 + 50,55 * scale + scrollY - (scrollY / 230) * 50 + 100),null);//画手臂paint.setStrokeWidth(1);canvas.drawLine(WITH / 2 - 40 * scale, 55 * scale,WITH / 2 - 50, 55 * scale + scrollY,paint);canvas.drawLine(WITH / 2 + 40 * scale, 55 * scale,WITH / 2 + 50, 55 * scale + scrollY,paint);} else if (state == 3) {//1秒钟拉上去，2秒钟旋转//第一秒if (time < 30) {time += 1;//画两只球球手canvas.drawCircle(WITH / 2 - 40 * scale, 55 * scale, 5 * scale, paint);canvas.drawCircle(WITH / 2 + 40 * scale, 55 * scale, 5 * scale, paint);//画笑脸canvas.drawBitmap(sun0,null,new RectF(WITH / 2 - 50,55 * scale + 180 - (time / 30) * 230,WITH / 2 + 50,55 * scale + 280 - (time / 30) * 230),null);//画手臂paint.setStrokeWidth(1);canvas.drawLine(WITH / 2 - 40 * scale, 55 * scale,WITH / 2 - 50,55 * scale + 230 - (time / 30) * 230,paint);canvas.drawLine(WITH / 2 + 40 * scale, 55 * scale,WITH / 2 + 50,55 * scale + 230 - (time / 30) * 230,paint);postInvalidateDelayed(1);} else {if (!isBeginMainAnimation) {isBeginMainAnimation = true;iReflashListener.onReflash();}}}super.onDraw(canvas);}public static boolean isBeginMainAnimation = false;@Overrideprotected void onLayout(boolean changed, int left, int top, int right, int bottom) {super.onLayout(changed, left, top, right, bottom);WITH = this.getWidth();}@Overridepublic void onScrollYChangged(int Y, int state) {this.state = state;switch (state) {case NONE:break;case PULL://下拉scrollY = Y;break;case RELESE:break;case REFLASHING:break;}}private IReflashListener iReflashListener;  //回调接口public void setInterface(IReflashListener iReflashListener) {this.iReflashListener = iReflashListener;}/*** @author Administrator*/public interface IReflashListener {void onReflash();}}

Android 仿网易一元夺宝客户端下拉加载动画实现(一)相关推荐

仿网易一元夺宝算法，宽长度数据计算，字符串实现
为什么80%的码农都做不了架构师?>>> /** * @company * @version 1.0 * @author fangjianming * @email fa ...
【程序哥】分析网易一元夺宝是否有作弊空间，真像媒体所说的吗？
最近网易一元购报道了不好负面消息.有人去网易大楼维权,咱先不说一元购的道德法律是层面.就从技术方面分析一下,一元购真像媒体所说的吗?是否有作假的空间. 网易1元夺宝的中奖机制公平吗? 在网易一元夺 ...
android微信下拉出现小程序,Android 仿新版微信的小程序下拉栏
Android 仿新版微信的小程序下拉栏上周微信更新到了 6.6.1 版本,加入了微信小游戏.朋友圈都在玩跳一跳.而且现在微信把最近用过的小程序放到了首页顶部,轻轻下拉就可以快速访问了.可以看下效果 ...
ASP.NET仿新浪微博下拉加载更多数据瀑布流效果
闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. ...
Android之 RecyclerView，CardView 详解和相对应的上拉刷新下拉加载
为什么80%的码农都做不了架构师?>>> 随着 Google 推出了全新的设计语言 Material Design,还迎来了新的 Android 支持库 v7,其中就包含了 M ...
android上拉刷新下拉加载
本文用的XlistView的上拉刷新下拉加载主Activity package org.com.cctest;import java.text.SimpleDateFormat; import ja ...
Android RecyclerView设置分割线 / 下拉加载 / 选项菜单进行增加删除动画
首先看一下我的整个程序: 主类: package com.example.day02rk;import android.os.Bundle; import android.support.v4.con ...
如何在App中实现朋友圈功能之六快速实现下拉加载朋友圈功能——箭扣科技Arrownock
如何在App中实现朋友圈功能之六快速实现下拉加载朋友圈功能实现逻辑: 根据上次下拉刷新的时间从数据库加载出limit(比如10)条post,判断总数据条数: a. 如果总数据大于limit条,清 ...
用vue-scroller做上拉刷新，下拉加载的模板（简单明了，通用）
1.首先下插件,并在你的vue项目中引人 1 npm i vue-scroller -D 2 import VueScroller from 'vue-scroller 2.Vue.use(VueSc ...

Android 仿网易一元夺宝客户端下拉加载动画实现(一)

Android 仿网易一元夺宝客户端下拉加载动画实现(一)相关推荐

最新文章

热门文章