Androidカスタムサイドスライドメニューコントロールを簡単に実現

5117 ワード
Androidが成熟するにつれて、多くの絢爛たる効果も次々と開発され、その中で横滑りの効果が使われるプロジェクトが多く、よく使われているのは多くのユーザーを引きつけている.国内ではQQやクールドッグアプリのような横滑りが力を入れているので、いくつかの資料を調べ、ViewDragHelper補助類と結びつけて、比較的簡単な横滑りの実現方法を作った.
一、実現効果図
  • 実現の効果は基本的にクールドッグAppとあまり差がありません.クールドッグを模倣しているからです.
    二、実現原理
  • SlideLayoutコントロールは、ViewDragHelperアシストクラスを使用して実装されます.ViewDragHelperは、ViewDragHelperを実現するための神器で、ViewDragHelperのドラッグ操作を特に簡単にします.ViewDragHelperに慣れていない学生は、先にドアを転送してください.
  • ドラッグを実現するには、まずSlideLayoutとViewDragHelperを関連付ける必要があります.その後、SlideLayoutのイベントをViewDragHelperに渡して処理し、ViewDragHelperが提供するコールバックでViewに対して様々な操作を行うことができます.しかし、ドラッグの原理はそれほど悪くなく、水平または垂直にViewGroupを移動し、layoutとinvalidateを繰り返し再描画表示します.
  • スライド中は、スライドの位置や再描画インタフェースを絶えず計算するほか、サブコンテナに対して異なるアニメーション操作を行う必要があります.ここでは、ViewHelperクラスを使用してViewをパンズームやグラデーションなどのアニメーションを行います.

    • さらに、
  • は、SlideLayoutの横滑りの状態を記録するために列挙を使用し、閉じる、開く、およびスライドしていることを含む.また、PanelslideListenerがスライドをリスニングする状態を提供する.これにより、異なる状態に応じて異なる操作を行うことができます.たとえば、手動でスライドを開く、スライドを閉じるなどです.

    • 三、論理分析
    このプロジェクトで実現される論理は難しくなく、View Groupのスライド位置を計算して再描画すればいいだけで、次にコントロールのスケールやストレッチのスケールなどを計算する必要があります.もちろん各种のViewの操作方法に対してやはり比较的に熟知しなければならなくて、さもなくばいくつかのロジックがここですることを理解していません.
    1.SlideLayoutは、2つのサブコンテナ、1つのメニューコンテナ、1つのメインコンテナを収容するコントロールコンテナとして使用する必要があります.まず、SlideLayoutコンテナの幅と2つのサブコンテナオブジェクトを取得する必要があります.
  • ビューのonSizeChanged()メソッドでSlideLayoutの幅を取得し、コントロールは
    /**
 *                   ，           
 *
 * @param w
 * @param h
 * @param oldw
 * @param oldh
 */
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mSlideHeight = getMeasuredHeight();
    mSlideWidth = getMeasuredWidth();
    /**
     *         
     *         60%
     */
    mSlideRange = (int) (mSlideWidth * mRangePercent);
}
    • を測定した.
  • ViewonFinishInflate()メソッドでコンテナオブジェクトを取得できます.この場合、レイアウトは
    /**
 *  View            ，     View  
 */
@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    if (getChildCount() < 2) {
        throw new IllegalStateException("SlideLayout    View    2 ");
    }
    if (!((getChildAt(0) instanceof ViewGroup) && (getChildAt(1) instanceof ViewGroup))) {
        throw new IllegalArgumentException("SlideLayout    View   ViewGroup");
    }
    mMenuContainer = (ViewGroup) getChildAt(0);
    mMainContainer = (ViewGroup) getChildAt(1);
}
    • に埋め込まれます.
    2.必要な属性とオブジェクトを取得したら、SlideLayoutとViewDragHelperをバインドできます.
  • まずコントロールの構造の中でViewDragHelperオブジェクトを作成して、作成した後に1つのコールバックがあって、私達のViewに対する各種の操作はコールバックの各種の方法の中で行う
    /** View       ，      View     
 * @param forParent            
 * @param sensitivity        ，   ，1.0f  
 * @param cb   View          
 */
mDragHelper = ViewDragHelper.create(this, 1.0f, mViewCallback);
    • です
  • オブジェクトを作成した後、この時点でビューを操作すると効果がありません.SlideLayoutの処理イベントをViewDragHelper 
    /**
  *           
  *
  * @param ev
  * @return
  */
 @Override
 public boolean onInterceptTouchEvent(MotionEvent ev) {
     final int action = MotionEventCompat.getActionMasked(ev);
     if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
         mDragHelper.cancel();
         return false;
     }
     return mDragHelper.shouldInterceptTouchEvent(ev);
 }

 /**
  *           
  *
  * @param event
  * @return
  */
 @Override
 public boolean onTouchEvent(MotionEvent event) {
     try {
         mDragHelper.processTouchEvent(event);
     } catch (Exception e) {
         e.printStackTrace();
     }
     return true;
 }
    • に渡す必要があるからです.
  • 最も重要な点はViewDragHelperのコールバックです.中にはいろいろな方法があります.それぞれが重要です.ここでは容器のスライド処理方法onViewPositionChanged()を挙げます.実は論理も比較的簡単で、現在スライドしている容器がどの容器なのかを判断し、容器の左境界値を計算し、容器を再描画
    /**
 *   View          
 * @param changedView     View
 * @param left        
 * @param top       
 * @param dx        
 * @param dy        
 */
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
    /**
     *              
     */
    if (changedView == mMenuContainer) {
        mMenuContainer.layout(0, 0, mSlideWidth, mSlideHeight);
        int newLeft = mMainContainer.getLeft() + dx;
        newLeft = fixLeft(newLeft);
        mMainContainer.layout(newLeft, 0, newLeft + mSlideWidth, mSlideHeight);
    }

    //       
    performSlideEvent();
}
    • .
    五、使用教程
  • レイアウトファイル
    

    //     
    

    //
  • コードでオブジェクトを取得し、傍受を設定し、サイドスライド
    • を開くか閉じるかを設定する.
    六、まとめ
    ViewDragHelperという補助クラスがあれば、ViewGroupの操作は比較的簡単で、計算と描画の作業を処理するだけで、他はすでにできています.もちろんViewDragHelperの役割はここまでではありません.もっと多くの学生を知りたいなら、このクラスのソースコードを研究してみてください.ここでも簡単にサイドスライド機能を実現しただけなので、もっと完璧にしたい人は自分で修正してください.
    Demoアドレス
    私のブログとGitHubへようこそ.
    @ okikio/シェアワーカー、すべてのブラウザーの株式会社労働者
    カウントダウンタイマーを使用して