안 드 로 이 드 모방 타 오 바 오 상품 탐색 인터페이스 이미지 스크롤 효과

핸드폰 타 오 바 오 로 상품 의 상세 한 정 보 를 조회 할 때 상품 사진 은 뒤에 놓 여 있 습 니 다.첫 번 째 ScrollView 가 맨 아래로 굴 러 갈 때 알림 이 있 습 니 다.계속 드래그 해 야 사진 을 조회 할 수 있 습 니 다.이 효 과 를 본 떠 서 쓰 는 것 은 어렵 지 않 습 니 다.Layout 가 두 개의 ScrollView 를 관리 하 는 것 을 정의 하면 됩 니 다.첫 번 째 ScrollView 가 끝까지 미 끄 러 졌 을 때 두 번 째 ScrollView 로 다시 위로 미 끄 러 집 니 다.효 과 는 다음 과 같 습 니 다:

주의해 야 할 점 은:
      1.수 동 으로 끝까지 미 끄 러 지 려 면 다시 눌 러 야 계속 아래로 내 려 갈 수 있 고,자동 으로 끝까지 굴 러 갈 필요 가 없습니다.
      2.이전 ScrollView 에서 다음 ScrollView 로 미 끄 러 지 는 과정 에서 여러 손가락 이 계속 드래그 해도 레이아웃 의 격변 을 초래 하지 않 습 니 다.즉,여러 pointer 의 미끄럼 은 move 거리의 격변 을 초래 하지 않 습 니 다.
이 Layout 의 실현 방향 은:
     레이아웃 에 두 개의 ScrollView 를 설치 하고 OnTouch Listener 를 설정 하여 ScrollView 의 스크롤 거 리 를 항상 판단 합 니 다.첫 번 째 ScrollView 가 끝까지 굴 러 가면 표 지 는 위로 드래그 할 수 있 는 것 으로 바 뀌 었 습 니 다.이때 미끄럼 거 리 를 기록 하기 시 작 했 습 니 다.mMoveLen 에 따라 두 개의 ScrollView 를 다시 레이아웃 합 니 다.마찬가지 로 두 번 째 ScrollView 가 위로 굴 러 내 려 가 는 지 확인 합 니 다.
OK,원 리 를 알 게 되면 코드 를 볼 수 있 습 니 다.

package com.jingchen.tbviewer; 
 
import java.util.Timer; 
import java.util.TimerTask; 
 
import android.content.Context; 
import android.os.Handler; 
import android.os.Message; 
import android.util.AttributeSet; 
import android.view.MotionEvent; 
import android.view.VelocityTracker; 
import android.view.View; 
import android.widget.RelativeLayout; 
import android.widget.ScrollView; 
 
/** 
 *     ScrollView    
 * 
 * @author chenjing 
 * 
 */ 
public class ScrollViewContainer extends RelativeLayout { 
 
 /** 
  *      
  */ 
 public static final int AUTO_UP = 0; 
 /** 
  *      
  */ 
 public static final int AUTO_DOWN = 1; 
 /** 
  *      
  */ 
 public static final int DONE = 2; 
 /** 
  *      
  */ 
 public static final float SPEED = 6.5f; 
 
 private boolean isMeasured = false; 
 
 /** 
  *            
  */ 
 private VelocityTracker vt; 
 
 private int mViewHeight; 
 private int mViewWidth; 
 
 private View topView; 
 private View bottomView; 
 
 private boolean canPullDown; 
 private boolean canPullUp; 
 private int state = DONE; 
 
 /** 
  *           view，0 topView，1 bottomView 
  */ 
 private int mCurrentViewIndex = 0; 
 /** 
  *      ，             
  */ 
 private float mMoveLen; 
 private MyTimer mTimer; 
 private float mLastY; 
 /** 
  *                 ，mEvents==0        ，mEvents==-1             move  ， 
  *                
  */ 
 private int mEvents; 
 
 private Handler handler = new Handler() { 
 
  @Override 
  public void handleMessage(Message msg) { 
   if (mMoveLen != 0) { 
    if (state == AUTO_UP) { 
     mMoveLen -= SPEED; 
     if (mMoveLen <= -mViewHeight) { 
      mMoveLen = -mViewHeight; 
      state = DONE; 
      mCurrentViewIndex = 1; 
     } 
    } else if (state == AUTO_DOWN) { 
     mMoveLen += SPEED; 
     if (mMoveLen >= 0) { 
      mMoveLen = 0; 
      state = DONE; 
      mCurrentViewIndex = 0; 
     } 
    } else { 
     mTimer.cancel(); 
    } 
   } 
   requestLayout(); 
  } 
 
 }; 
 
 public ScrollViewContainer(Context context) { 
  super(context); 
  init(); 
 } 
 
 public ScrollViewContainer(Context context, AttributeSet attrs) { 
  super(context, attrs); 
  init(); 
 } 
 
 public ScrollViewContainer(Context context, AttributeSet attrs, int defStyle) { 
  super(context, attrs, defStyle); 
  init(); 
 } 
 
 private void init() { 
  mTimer = new MyTimer(handler); 
 } 
 
 @Override 
 public boolean dispatchTouchEvent(MotionEvent ev) { 
  switch (ev.getActionMasked()) { 
  case MotionEvent.ACTION_DOWN: 
   if (vt == null) 
    vt = VelocityTracker.obtain(); 
   else 
    vt.clear(); 
   mLastY = ev.getY(); 
   vt.addMovement(ev); 
   mEvents = 0; 
   break; 
  case MotionEvent.ACTION_POINTER_DOWN: 
  case MotionEvent.ACTION_POINTER_UP: 
   //                        move，       bug 
   mEvents = -1; 
   break; 
  case MotionEvent.ACTION_MOVE: 
   vt.addMovement(ev); 
   if (canPullUp && mCurrentViewIndex == 0 && mEvents == 0) { 
    mMoveLen += (ev.getY() - mLastY); 
    //        
    if (mMoveLen > 0) { 
     mMoveLen = 0; 
     mCurrentViewIndex = 0; 
    } else if (mMoveLen < -mViewHeight) { 
     mMoveLen = -mViewHeight; 
     mCurrentViewIndex = 1; 
 
    } 
    if (mMoveLen < -8) { 
     //        
     ev.setAction(MotionEvent.ACTION_CANCEL); 
    } 
   } else if (canPullDown && mCurrentViewIndex == 1 && mEvents == 0) { 
    mMoveLen += (ev.getY() - mLastY); 
    //        
    if (mMoveLen < -mViewHeight) { 
     mMoveLen = -mViewHeight; 
     mCurrentViewIndex = 1; 
    } else if (mMoveLen > 0) { 
     mMoveLen = 0; 
     mCurrentViewIndex = 0; 
    } 
    if (mMoveLen > 8 - mViewHeight) { 
     //        
     ev.setAction(MotionEvent.ACTION_CANCEL); 
    } 
   } else 
    mEvents++; 
   mLastY = ev.getY(); 
   requestLayout(); 
   break; 
  case MotionEvent.ACTION_UP: 
   mLastY = ev.getY(); 
   vt.addMovement(ev); 
   vt.computeCurrentVelocity(700); 
   //   Y      
   float mYV = vt.getYVelocity(); 
   if (mMoveLen == 0 || mMoveLen == -mViewHeight) 
    break; 
   if (Math.abs(mYV) < 500) { 
    //                 ，     View             
    if (mMoveLen <= -mViewHeight / 2) { 
     state = AUTO_UP; 
    } else if (mMoveLen > -mViewHeight / 2) { 
     state = AUTO_DOWN; 
    } 
   } else { 
    //              View     
    if (mYV < 0) 
     state = AUTO_UP; 
    else 
     state = AUTO_DOWN; 
   } 
   mTimer.schedule(2); 
   try { 
    vt.recycle(); 
   } catch (Exception e) { 
    e.printStackTrace(); 
   } 
   break; 
 
  } 
  super.dispatchTouchEvent(ev); 
  return true; 
 } 
 
 @Override 
 protected void onLayout(boolean changed, int l, int t, int r, int b) { 
  topView.layout(0, (int) mMoveLen, mViewWidth, 
    topView.getMeasuredHeight() + (int) mMoveLen); 
  bottomView.layout(0, topView.getMeasuredHeight() + (int) mMoveLen, 
    mViewWidth, topView.getMeasuredHeight() + (int) mMoveLen 
      + bottomView.getMeasuredHeight()); 
 } 
 
 @Override 
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
  super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
  if (!isMeasured) { 
   isMeasured = true; 
 
   mViewHeight = getMeasuredHeight(); 
   mViewWidth = getMeasuredWidth(); 
 
   topView = getChildAt(0); 
   bottomView = getChildAt(1); 
 
   bottomView.setOnTouchListener(bottomViewTouchListener); 
   topView.setOnTouchListener(topViewTouchListener); 
  } 
 } 
 
 private OnTouchListener topViewTouchListener = new OnTouchListener() { 
 
  @Override 
  public boolean onTouch(View v, MotionEvent event) { 
   ScrollView sv = (ScrollView) v; 
   if (sv.getScrollY() == (sv.getChildAt(0).getMeasuredHeight() - sv 
     .getMeasuredHeight()) && mCurrentViewIndex == 0) 
    canPullUp = true; 
   else 
    canPullUp = false; 
   return false; 
  } 
 }; 
 private OnTouchListener bottomViewTouchListener = new OnTouchListener() { 
 
  @Override 
  public boolean onTouch(View v, MotionEvent event) { 
   ScrollView sv = (ScrollView) v; 
   if (sv.getScrollY() == 0 && mCurrentViewIndex == 1) 
    canPullDown = true; 
   else 
    canPullDown = false; 
   return false; 
  } 
 }; 
 
 class MyTimer { 
  private Handler handler; 
  private Timer timer; 
  private MyTask mTask; 
 
  public MyTimer(Handler handler) { 
   this.handler = handler; 
   timer = new Timer(); 
  } 
 
  public void schedule(long period) { 
   if (mTask != null) { 
    mTask.cancel(); 
    mTask = null; 
   } 
   mTask = new MyTask(handler); 
   timer.schedule(mTask, 0, period); 
  } 
 
  public void cancel() { 
   if (mTask != null) { 
    mTask.cancel(); 
    mTask = null; 
   } 
  } 
 
  class MyTask extends TimerTask { 
   private Handler handler; 
 
   public MyTask(Handler handler) { 
    this.handler = handler; 
   } 
 
   @Override 
   public void run() { 
    handler.obtainMessage().sendToTarget(); 
   } 
 
  } 
 } 
 
} 

주석 을 아주 분명하게 썼 습 니 다.몇 가지 중요 한 점 이 있 습 니 다.
    1.여 기 는 두 개의 ScrollView 에 OnTouchListener 를 설 치 했 기 때문에 다른 곳 에 서 는 더 이상 설치 할 수 없습니다.그렇지 않 으 면 헛 된 것 입 니 다.
    2.두 개의 ScrollView 의 layot 매개 변 수 는 mMoveLen 에 의 해 통일 되 어 결정 된다.
    3.변수 mEvents 는 두 가지 역할 을 합 니 다.하 나 는 수 동 으로 끝까지 미 끄 러 지 거나 윗부분 이 계속 미 끄 러 지 는 것 을 방지 하고 구 조 를 바 꾸 는 것 입 니 다.다시 눌 러 야 계속 미 끄 러 질 수 있 습 니 다.둘째,새로운 pointer down 이나 up 시 mEvents 를-1 로 설정 하면 다가 올 첫 번 째 move 사건 을 버 리 고 mMoveLen 의 격변 을 방지 할 수 있 습 니 다.왜 격변 이 일 어 났 을 까?처음에 한 손가락 만 미 끄 러 졌 다 고 가정 하기 때문에 기 록 된 좌표 값 은 이 pointer 의 사건 좌표 점 이다.이때 다른 손가락 이 눌 러 서 사건 에 pointer 가 하나 더 생 겼 다.이때 온 move 사건 의 좌 표 는 새로운 pointer 의 좌표 가 될 수 있다.이때 계산 과 지난번 좌표 의 차 이 는 급변 할 것 이다.변화의 거 리 는 두 포인터 사이 의 거리 다.그래서 이 move 이 벤트 를 버 리 고 mLasty 값 으로 이 pointer 의 좌 표를 기록 한 다음 에 mMoveLen 을 계산 해 야 합 니 다.pointer up 때 도 마찬가지 야.
이 몇 가 지 를 이해 하 니 어렵 지 않 고 코드 양도 적다.
MainActivity 의 레이아웃:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
 android:layout_width="match_parent" 
 android:layout_height="match_parent" > 
 
 <com.jingchen.tbviewer.ScrollViewContainer 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
 
  <ScrollView 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" > 
 
   <RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" > 
 
    <LinearLayout 
     android:id="@+id/imagesLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:gravity="center_horizontal" 
     android:orientation="vertical" > 
 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/h" /> 
 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/i" /> 
 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/j" /> 
 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/k" /> 
 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/l" /> 
 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="@drawable/m" /> 
    </LinearLayout> 
 
    <TextView 
     android:layout_width="match_parent" 
     android:layout_height="60dp" 
     android:layout_below="@id/imagesLayout" 
     android:background="#eeeeee" 
     android:gravity="center" 
     android:text="    ，      " 
     android:textSize="20sp" /> 
   </RelativeLayout> 
  </ScrollView> 
 
  <ScrollView 
   android:layout_width="match_parent" 
   android:layout_height="match_parent" 
   android:background="#000000" > 
 
   <LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center_horizontal" 
    android:orientation="vertical" > 
 
    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/a" /> 
 
    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/b" /> 
 
    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/c" /> 
 
    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/d" /> 
 
    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/e" /> 
 
    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/f" /> 
 
    <ImageView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/g" /> 
   </LinearLayout> 
  </ScrollView> 
 </com.jingchen.tbviewer.ScrollViewContainer> 
 
</RelativeLayout> 

ScrollView 에 그림 을 몇 장 넣 었 을 뿐 입 니 다.
MainActivity 코드:

package com.jingchen.tbviewer; 
 
import android.app.Activity; 
import android.os.Bundle; 
import android.view.Menu; 
 
public class MainActivity extends Activity 
{ 
 @Override 
 protected void onCreate(Bundle savedInstanceState) 
 { 
  super.onCreate(savedInstanceState); 
  setContentView(R.layout.activity_main); 
 } 
 
 @Override 
 public boolean onCreateOptionsMenu(Menu menu) 
 { 
  getMenuInflater().inflate(R.menu.main, menu); 
  return true; 
 } 
 
} 

이상 은 본문의 전체 내용 이 므 로 여러분 의 학습 에 도움 이 되 기 를 바 랍 니 다.