欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android仿淘寶商品瀏覽界面圖片滾動(dòng)效果

 更新時(shí)間：2020年09月17日 14:51:12   作者：陳靖_  
這篇文章主要為大家詳細(xì)介紹了Android仿淘寶商品瀏覽界面圖片滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

用手機(jī)淘寶瀏覽商品詳情時(shí)，商品圖片是放在后面的，在第一個(gè)ScrollView滾動(dòng)到最底下時(shí)會(huì)有提示，繼續(xù)拖動(dòng)才能瀏覽圖片。仿照這個(gè)效果寫一個(gè)出來并不難，只要定義一個(gè)Layout管理兩個(gè)ScrollView就行了，當(dāng)?shù)谝粋€(gè)ScrollView滑到底部時(shí)，再次向上滑動(dòng)進(jìn)入第二個(gè)ScrollView。效果如下：

需要注意的地方是：

      1、如果是手動(dòng)滑到底部需要再次按下才能繼續(xù)往下滑，自動(dòng)滾動(dòng)到底部則不需要

      2、在由上一個(gè)ScrollView滑動(dòng)到下一個(gè)ScrollView的過程中多只手指相繼拖動(dòng)也不會(huì)導(dǎo)致布局的劇變，也就是多個(gè)pointer的滑動(dòng)不會(huì)導(dǎo)致move距離的劇變。

這個(gè)Layout的實(shí)現(xiàn)思路是：

     在布局中放置兩個(gè)ScrollView，并為其設(shè)置OnTouchListener，時(shí)刻判斷ScrollView的滾動(dòng)距離，一旦第一個(gè)ScrollView滾動(dòng)到底部，則標(biāo)識(shí)改為可向上拖動(dòng)，此時(shí)開始記錄滑動(dòng)距離mMoveLen，根據(jù)mMoveLen重新layout兩個(gè)ScrollView；同理，監(jiān)聽第二個(gè)ScrollView是否滾動(dòng)到頂部，以往下拖動(dòng)。

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; 
 
/** 
 * 包含兩個(gè)ScrollView的容器 
 * 
 * @author chenjing 
 * 
 */ 
public class ScrollViewContainer extends RelativeLayout { 
 
 /** 
  * 自動(dòng)上滑 
  */ 
 public static final int AUTO_UP = 0; 
 /** 
  * 自動(dòng)下滑 
  */ 
 public static final int AUTO_DOWN = 1; 
 /** 
  * 動(dòng)畫完成 
  */ 
 public static final int DONE = 2; 
 /** 
  * 動(dòng)畫速度 
  */ 
 public static final float SPEED = 6.5f; 
 
 private boolean isMeasured = false; 
 
 /** 
  * 用于計(jì)算手滑動(dòng)的速度 
  */ 
 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; 
 
 /** 
  * 記錄當(dāng)前展示的是哪個(gè)view，0是topView，1是bottomView 
  */ 
 private int mCurrentViewIndex = 0; 
 /** 
  * 手滑動(dòng)距離，這個(gè)是控制布局的主要變量 
  */ 
 private float mMoveLen; 
 private MyTimer mTimer; 
 private float mLastY; 
 /** 
  * 用于控制是否變動(dòng)布局的另一個(gè)條件，mEvents==0時(shí)布局可以拖拽了，mEvents==-1時(shí)可以舍棄將要到來的第一個(gè)move事件， 
  * 這點(diǎn)是去除多點(diǎn)拖動(dòng)劇變的關(guān)鍵 
  */ 
 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: 
   // 多一只手指按下或抬起時(shí)舍棄將要到來的第一個(gè)事件move，防止多點(diǎn)拖拽的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) { 
    // 速度小于一定值的時(shí)候當(dāng)作靜止釋放，這時(shí)候兩個(gè)View往哪移動(dòng)取決于滑動(dòng)的距離 
    if (mMoveLen <= -mViewHeight / 2) { 
     state = AUTO_UP; 
    } else if (mMoveLen > -mViewHeight / 2) { 
     state = AUTO_DOWN; 
    } 
   } else { 
    // 抬起手指時(shí)速度方向決定兩個(gè)View往哪移動(dòng) 
    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(); 
   } 
 
  } 
 } 
 
}

注釋寫的很清楚了，有幾個(gè)關(guān)鍵點(diǎn)需要講一下：
    1、由于這里為兩個(gè)ScrollView設(shè)置了OnTouchListener，所以在其他地方不能再設(shè)置了，否則就白搭了。

    2、兩個(gè)ScrollView的layout參數(shù)統(tǒng)一由mMoveLen決定。

    3、變量mEvents有兩個(gè)作用：一是防止手動(dòng)滑到底部或頂部時(shí)繼續(xù)滑動(dòng)而改變布局，必須再次按下才能繼續(xù)滑動(dòng)；二是在新的pointer down或up時(shí)把mEvents設(shè)置成-1可以舍棄將要到來的第一個(gè)move事件，防止mMoveLen出現(xiàn)劇變。為什么會(huì)出現(xiàn)劇變呢？因?yàn)榧僭O(shè)一開始只有一只手指在滑動(dòng)，記錄的坐標(biāo)值是這個(gè)pointer的事件坐標(biāo)點(diǎn)，這時(shí)候另一只手指按下了導(dǎo)致事件又多了一個(gè)pointer，這時(shí)候到來的move事件的坐標(biāo)可能就變成了新的pointer的坐標(biāo)，這時(shí)計(jì)算與上一次坐標(biāo)的差值就會(huì)出現(xiàn)劇變，變化的距離就是兩個(gè)pointer間的距離。所以要把這個(gè)move事件舍棄掉，讓mLastY值記錄這個(gè)pointer的坐標(biāo)再開始計(jì)算mMoveLen。pointer up的時(shí)候也一樣。

理解了這幾點(diǎn)，看起來就沒什么難度了，代碼量也很小。

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="繼續(xù)拖動(dòng)，查看更多美女" 
     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; 
 } 
 
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

最新評(píng)論