Androidまねる淘宝商品はドラッグして詳細とタイトルバーのグラデーション機能を調べます。


序論
最近ずっと忙しくて、時間を割いてブログを書きに来ませんでした。自分が怠惰癌を起こしたと言わざるを得ません。怠けると何もしたくなくなります。最近は自分でたくさんのものを集めました。これからはゆっくりと共有します。じゃ、余計な話はしません。じゃ、本題を始めます。
今日分かち合うのはタオバオの詳細ページで、前にタオバオの上で買い物する時タオバオの詳しいページの効果が比較的に悪くないことを見て、だから今日はその効果をまねにきます。
先に効果図を書きます
これはタオバオです
 
自分で作ったのです
 
どのように効果が似ていますか?GIF図の効果はよく分かりません。ご了承ください。
これからどうやって実現するかを見ましょう。
実現する
まず私達はtaobaoレイアウトのインターフェースの難点を分析します。
*タイトルバーのグラデーション、テキストのグラデーションの非表示
*透明通知欄(4.4まで対応)
*ドラッグして詳細を確認してください。Srollviewは弾力性のある効果があります。
前の2時までにもう実現しました。ここではあまり紹介しません。よく分からない仲間は前の文章を見てもいいです。
AndroidはSrollViewCを解析してQQ空間のタイトルバーのグラデーションをまねます。
以下では主にScrllviewを紹介します。引き続きドラッグして詳細を見ると弾性動画の効果があります。
この効果を詳しく分析すると、上のレイアウトがスライドできることが分かります。下のレイアウトにスライドすると、下のレイアウトもスライドできます。だから、私達はViewをカスタマイズして二つのSrollviewを含みます。上の一つは下の一つです。次にScrllviewを監督して最後までスライドさせます。アニメーション効果を追加して下のScrllviewにスライドさせます。下のScrllviewを上にスライドさせる時に上のアニメーションを追加して上のScrrollviewにスライドさせます。
具体的にコードを見ることができます。コメントはもう詳しくなりました。

import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.ScrollView;

import java.util.Timer;
import java.util.TimerTask;

/**
 *     ScrollView   
 *
 */
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 = 8.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;
 boolean isTuninginterface=true;
 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;
      if(isTuninginterface){
       isTuninginterface=false;
      }
     }
    } 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();//  VelocityTracker   
    else
     vt.clear();
    mLastY = ev.getY();
    System.out.println("---ACTION_DOWN-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);//      VelocityTracker    
    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(isTuninginterface){
       isTuninginterface=false;
      }
     }
     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: view                , view          parent view      onMeasure onLayout          。
    requestLayout();
    break;
   case MotionEvent.ACTION_UP:
    mLastY = ev.getY();
    vt.addMovement(ev);
    //  :units              ,    1,  1         。    1000,   1         
    vt.computeCurrentVelocity(700);
    //   Y          getXVelocity() getYVelocity()          
    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();
     vt=null;
    } 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();
   System.out.println("======onMeasure====mViewHeight======"+mViewHeight);
   System.out.println("======onMeasure====mViewWidth======"+mViewWidth);
   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;
   Log.i("------getScrollY------", sv.getScrollY()+"");
   Log.i("------getMeasuredHeight---getChildAt---", sv.getChildAt(0).getMeasuredHeight()+"");
   Log.i("------getMeasuredHeight---sv---", sv.getMeasuredHeight()+"");
   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();
   }

  }
 }
}

最後に私達はxmlレイアウトの中で一番外側の階にこのScrollview Continerで二つのScrllviewを包んでいます。上のレイアウトは上のレイアウトと下のレイアウトでいいです。もちろん上のレイアウトはタイトルバーのグラデーションにも関連していますので、上のScrollviewは自主的にスライドして監督します。上記の文章の中に詳しく紹介されています。はい、今日はここまでです。時間があればコードを整理して私のGigthubに置いておきます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。