안 드 로 이 드 모방 경 동,티몰 드 롭 다운 리 셋 효과

드 롭 다운 리 셋 하면 모두 가 낯 설 지 않 을 것 이 라 고 믿 습 니 다.지금 은 거의 모든 항목 이 사용 되 고 있 습 니 다.우리 회사 의 프로젝트 는 줄곧 Swipe Refresh Layout,공식 적 인 Material Design 스타일 을 사용 하여 bug 를 적 게 사용 해 왔 습 니 다.현재 드 롭 다운 리 셋 은 다음 과 같은 몇 가지 실현 방식 이 있 습 니 다.하 나 는 ListView 나 RecyclerView 의 머리 에 직접 싸 는 것 입 니 다.어떤 것 은 Swipe RefreshLayout 처럼 보기 의 가장 바깥쪽 에 싸 는 것 입 니 다.개인 적 으로 가방 을 가장 바깥쪽 에 두 는 것 을 권장 합 니 다.확장 성 이 비교적 강하 습 니 다.다음은 가장 바깥쪽 에 싸 는 방법 으로 경 동과 티몰 의 드 롭 다운 리 셋 을 실현 한다.
1.프레임 워 크 사용 Android-Ultra-Pull-To-Refresh
https://github.com/liaohuqiu/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 를 만 듭 니 다.드 롭 다운 새로 고침 을 저장 할 때 모든 상 태 를 저장 한 다음 에 저 장 된 상태 에 따라 UIPosition Change 인터페이스 에서 UI 를 수정 하고 각 상태 텍스트 의 알림 을 저장 합 니 다.드 롭 다운 과정 에서 UIPosition Change 의 리 셋 을 통 해 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 를 얻 을 수 있 습 니 다.원 리 는 이전 과 같 지만 여기 서 제 가 사용 하 는 것 은 free sco 로 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 주소 첨부:
https://github.com/shineflower/JdTmallPullToRefresh
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.