AndroidカスタムLine earLayoutタオバオの詳細ページを実現します。

8912 ワード

and roid Linear Layout タオバオの詳細ページ

1.簡単な説明
タオバオの詳細ページは私が紹介しなくてもいいです。昨日タオバオでこの効果を見た時、去年Androidを勉強したばかりの時、ネットでこの効果の使い方を見つけました。どうやって実現するか分かりません。今は一つの効果を見て、自分で実現したいです。これはある知識に触れたばかりの好奇心でしょう。
私達は歩くと言って、本文はただ1種の構想を実現するだけを紹介して、ネット上でもすでに多くの種類の実現方式があって、問題があったら教えてください。
効果図（心を込めて美人の絵を探しています）

2.考え方を実現する
Linear Layoutを継承し、方向を垂直に設定します。
コントロールには二つのScrllViewがあります。なぜScrelViewを使うのかというと、主に内容が1ページを超える時は自分で処理しないからです。
ポイントはイベントの配布処理です。二つのSrollViewのスライドイベントを傍受し、最初のページが最後の部分にスライドする時、上にドラッグすると、イベントをブロックし、距離を判断し、設定値を超えた時、第二ページにスライドします。同じように、2ページ目が上にスライドした時、下にドラッグした時に、ブロックイベント、判定距離、設定値を超えた時に、1ページ目にスライドします。そうでないと、第1ページに戻ります。
バック弾とスライドの切り替えについては、Scrllerを使用しています。Scrllerの使用については、本論文ではあまり説明しません。
3.実現
3.1 SrollViewを書き直す
構想を実現するには、ScrelViewがトップとボトムにスライドするかどうかを監督する必要がありますが、ScrrollViewのset OnScrrollChange Listener（）方法はapi 23で追加されました。主にSrollView ScrrollChangedを書き換える方法です。
l:現在の水平方向スクロール値は、getScrrollX()と等しいです。
t:現在の縦方向スクロール値は、get Scrrolly()と等しいです。
oldl:前回の水平スクロール値
oldt：前回の縦スクロール値
待ち受けインターフェース:


public interface OnScrollEndListener {
 void scrollToBottom(View view);
 void scrollToTop(View view);
 void scrollToMiddle(View view);
 }

オンScrllChangedメソッド


 @Override
 protected void onScrollChanged(int l, int t, int oldl, int oldt) {
 super.onScrollChanged(l, t, oldl, oldt);
 if(t == 0){
  if (mOnScrollBottomListener != null) {
  mOnScrollBottomListener.scrollToTop(this);
  }
 } else if(t + getMeasuredHeight() >= getChildAt(0).getMeasuredHeight()){
  if (mOnScrollBottomListener != null) {
  mOnScrollBottomListener.scrollToBottom(this);
  }
 } else {
  if (mOnScrollBottomListener != null) {
  mOnScrollBottomListener.scrollToMiddle(this);
  }
 }
 }

3.2 onMeasre方法、pageの取得と設定を書き換える
第二の子供の測定方法を呼び出してください。でないと、サイズは0になる可能性があります。


 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 /**
  *                ，        0
  */
 View child2 = getChildAt(1);
 if (child2 != null) {
  child2.measure(widthMeasureSpec, heightMeasureSpec);
 }
 }

オンFinish Inflateで二つのページを初期化します。


@Override
 protected void onFinishInflate() {
 super.onFinishInflate();
 if(getChildCount() == 2){
  View child1 = getChildAt(0);
  if (child1 instanceof ScrollEndScrollView){
  scrollView1 = (ScrollEndScrollView) child1;
  }
  View child2 = getChildAt(1);
  if(child2 instanceof ScrollEndScrollView){
  scrollView2 = (ScrollEndScrollView) child2;
  }
 }

 initEvent();
 }

2つのページにスライドモニターを設定します。


private ScrollEndScrollView.OnScrollEndListener scrollEndListener = new ScrollEndScrollView.OnScrollEndListener() {
 @Override
 public void scrollToBottom(View view) {
  if(view == scrollView1){
  isToBotttom = true;
  }
 }

 @Override
 public void scrollToTop(View view) {
  if(view == scrollView2){
  isToTop = true;
  }
 }

 @Override
 public void scrollToMiddle(View view) {
  if(view == scrollView1){
  isToBotttom = false;
  }
  if(view == scrollView2){
  isToTop = false;
  }
 }
 };

3.3 Scrllerの使用するいくつかのステップ
Srollerの英語解釈は：
This class encapsulates scrolling.You can use scrolles to collect the data you need to produce a scrolling animation-for example，in reponse to a fling gesture.Screars trocopers trocologicrock foryou，Scrover。but they don't atootmaticaly aply those positions to your view.It's your reponsibility to get and apply new coordiatea rate that will make the scrolling animation look smotion look.
このようなパッケージはスクロールします。スクロールバーを使って収集してもいいです。例えば、ジェスチャーのデータを投げてください。スクロールバーは時間が経つにつれてスクロールオフセットを追跡しますが、自動的に新しい位置をViewに設定しません。あなたのミッションは適したスピードで動画をスクロールさせ、滑らかに見せることです。
簡単に言えば、スライドに関するあなたはこれを使って実現できます。
書き換えが必要な方法


@Override
 public void computeScroll() {
 super.computeScroll();
 //   mScroller      
 if (mScroller.computeScrollOffset()) {
  //    View scrollTo()       
  scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
  //       ，            
  postInvalidate();
 }
 }

補助方法


 //              
 public void smoothScrollBy(int dx, int dy) {
 //  mScroller      
 mScroller.startScroll(mScroller.getFinalX(), mScroller.getFinalY(), dx, dy, Math.max(300, Math.abs(dy)));
 invalidate();//      invalidate()    computeScroll()    ，          ，       
 }

//            
 public void smoothScrollTo(int fx, int fy) {
 int dx = fx - mScroller.getFinalX();
 int dy = fy - mScroller.getFinalY();
 smoothScrollBy(dx, dy);
 }

3.4イベントの配布
最も重要な部分は論理がやや複雑で、細かいところの処理が多いです。ここでdispatch TouchEventを書き直します。
最初のページを表示する場合
最後までスライドしていません。イベントはscrollView 1自分で処理します。
最後の部分をスライドさせる場合、上にドラッグし続けると、イベントをブロックし、親のコントロールがスライドを処理します。下にドラッグし続けた場合、親コントロール（つまり、コントロール）が現在スクロールしている最後の位置（mScrler.get FinalY）が0でない場合、親コントロールがスクロールを続けて負の値が現れない場合（負の値が出ると頭が空白になります。親コントロールですので、scrollView 1はスライドできません）、イベントをブロックせず、親コントロールがスライドを処理します。そうでないと、0の位置に強制的にスライドします。イベントをサブコントロールに送信します。
2ページ目を表示する場合
一番上に移動していない場合は、イベントはscrollView 2で自分で処理します。
トップにスライドする場合、下にドラッグし続けると、イベントをブロックし、親コントロールがスライドを処理します。上にドラッグし続けると、親コントロールの現在のスクロール位置が最初のページの高さより小さい場合、イベントをブロックし、親コントロールがスライドを処理します。そうでなければ、2ページ目の開始位置にスライドし、イベントの下でサブコントロールに送ります。
ACTION_MOVEでイベントの配布を行い、ACTION_UPで画面切り替え、弾戻しを行います。
scrollerを使ってスライドし、弾性効果を実現するために、簡単に実現するには、ここ単純弾性実現コードを参照してください。


@Override
 public boolean dispatchTouchEvent(MotionEvent ev) {
 int action = ev.getAction();
 int yPosition = (int) ev.getY();
 switch (action) {
  case MotionEvent.ACTION_DOWN:
  mScroller.abortAnimation();
  mLastY = yPosition;
  mMoveY = 0;
  break;
  case MotionEvent.ACTION_MOVE:
  mMoveY = (mLastY - yPosition);
  mLastY = yPosition;
  if(isToBotttom){
   if(mMoveY > 0){
   //  
   smoothScrollBy(0, mMoveY);
   return true;
   } else {
   //  
   if(mScroller.getFinalY() != 0){
    //                
    if(getScrollY() + mMoveY > 0){
    smoothScrollBy(0, mMoveY);
    return true;
    } else{
    smoothScrollTo(0, 0);
    return super.dispatchTouchEvent(ev);
    }
   }
   }
  }
  else if(isToTop){
   if(mMoveY < 0){
   //  
   smoothScrollBy(0, mMoveY);
   return true;
   } else {
   //  
   if(mScroller.getFinalY() < scrollView1.getHeight()){
    //                
    smoothScrollBy(0, mMoveY);
    return true;
   } else {
    smoothScrollTo(0, scrollView1.getHeight());
    return super.dispatchTouchEvent(ev);
   }
   }
  }

  //             
  if(pageIndex == 0){
   smoothScrollTo(0, 0);
  } else if(pageIndex == 1){
   smoothScrollTo(0, scrollView1.getHeight());
  }

  break;

  case MotionEvent.ACTION_UP:
  case MotionEvent.ACTION_CANCEL:
  if(isToBotttom){
   if(Math.abs(getScrollY()) > TO_NEXT_PAGE_HEIGHT){
   //      
   pageIndex = 1;
   smoothScrollTo(0, scrollView1.getHeight());
   isToBotttom = false;
   isToTop = true;
   } else {
   //  
   smoothScrollBy(0, -mScroller.getFinalY());
   }
  } else if(isToTop){
   if(scrollView1.getHeight() - getScrollY() > TO_NEXT_PAGE_HEIGHT){
   //      
   pageIndex = 0;
   smoothScrollTo(0, 0);
   isToBotttom = true;
   isToTop = false;
   } else {
   //  
   smoothScrollTo(0, scrollView1.getHeight());
   }
  }

  break;
  default:
  break;
 }

 return super.dispatchTouchEvent(ev);
 }

4.まとめ
このコントロールを実現するために必要な知識点は、主にカスタムコントロールの基本的なステップ、Srollerの基本的な使用とイベントの配布です。もちろん、ここで一番重要な処理はやはりイベント配信です。最初にも言いましたが、これは多くの人が実現しましたが、自分なりに実現したいです。大笑い三回、ハハハ、またカスタムコントロールを実現します。ブロガーはまだカスタムコントロール学習段階にあります。このコントロールを慎重にプロジェクトに使用してください。
5.ダウンロード
https://github.com/LineChen/TwoPageLayout
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

AndroidはAPP環境分離を実現する（Graadleを利用する）

Javaはウェブサイトのソースコードとリンクコードの実例を取得します。