Android自定義ViewGroup(側(cè)滑菜單)詳解及簡(jiǎn)單實(shí)例

更新時(shí)間：2017年02月28日 10:30:53 作者：H_Gao

這篇文章主要介紹了Android自定義ViewGroup(側(cè)滑菜單)詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下

自定義側(cè)滑菜單的簡(jiǎn)單實(shí)現(xiàn)

不少APP中都有這種側(cè)滑菜單，例如QQ這類的，比較有名開源庫(kù)如slidingmenu。

有興趣的可以去研究研究這個(gè)開源庫(kù)。

這里我們將一種自己的實(shí)現(xiàn)方法，把學(xué)習(xí)的東西做個(gè)記錄，O(∩_∩)O！

首先看效果圖：

這里我們實(shí)現(xiàn)的側(cè)滑菜單，是將左側(cè)隱藏的菜單和主面板看作一個(gè)整體來(lái)實(shí)現(xiàn)的，而左側(cè)隱藏的菜單和主面板相當(dāng)于是這個(gè)自定義View的子View。

首先來(lái)構(gòu)造該自定義View的布局：

自定義的SlideMenuView包含兩個(gè)子view，一個(gè)是menuView，另一個(gè)是mainView(主面板)。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="${relativePackage}.${activityClass}" >

  <com.wind.view.SlideMenuView
    android:id="@+id/slideMenu"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <include layout="@layout/layout_menu"/>

    <include layout="@layout/layout_main"/>
  </com.wind.view.SlideMenuView>

</RelativeLayout>

接著我們需要實(shí)現(xiàn)SlideMenuView的 java代碼。

自定義VIew，需要繼承某個(gè)父類，通過(guò)重寫父類的某些方法來(lái)增強(qiáng)父類的功能。

這里我們選擇繼承ViewGroup，一般自定義View，需要重寫onMeasure，onLayout和onDraw，正常情況下只要重寫onDraw就可以了，特殊情況下，需要重寫onMeasure 和onLayout。

package com.wind.view;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;

public class SlideMenuView extends ViewGroup { // FrameLayout {
  private static final String TAG = "SlideMenuView";
  private View menuView, mainView;
  private int menuWidth = 0;

  private Scroller scroller;

  public SlideMenuView(Context context) {
    super(context);
    init();
  }

  public SlideMenuView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
  }

  private void init() {
    scroller = new Scroller(getContext());
  }

  /**
   * 當(dāng)一級(jí)的子View全部加載玩后調(diào)用，可以用于初始化子View的引用 
   * 
   */
  @Override
  protected void onFinishInflate() {
    super.onFinishInflate();
    menuView = getChildAt(0);
    mainView = getChildAt(1);
    menuWidth = menuView.getLayoutParams().width;

    Log.d(TAG, "onFinishInflate() menuWidth: " + menuWidth);
  }

    /**
     * widthMeasureSpec和heightMeasureSpec是系統(tǒng)測(cè)量SlideMenu時(shí)傳入的參數(shù)，
     * 這2個(gè)參數(shù)測(cè)量出的寬高能讓SlideMenu充滿窗體，其實(shí)是正好等于屏幕寬高
     */
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);

    Log.d(TAG, "onMeasure: widthMeasureSpec: " + widthMeasureSpec
        + "heightMeasureSpec: " + heightMeasureSpec);

    // int measureSpec = MeasureSpec.makeMeasureSpec(menuWidth,
    // MeasureSpec.EXACTLY);
    //
    // Log.d(TAG,"onMeasure: measureSpec： " +measureSpec);
    // 測(cè)量所有子view的寬高
    // 通過(guò)getLayoutParams方法可以獲取到布局文件中指定寬高
    menuView.measure(widthMeasureSpec, heightMeasureSpec);
    // 直接使用SlideMenu的測(cè)量參數(shù)，因?yàn)樗膶捀叨际浅錆M父窗體
    mainView.measure(widthMeasureSpec, heightMeasureSpec);

  }

     /**
     * 重新擺放子View的位置
     * l: 當(dāng)前子view的左邊在父view的坐標(biāo)系中的x坐標(biāo)
     * t: 當(dāng)前子view的頂邊在父view的坐標(biāo)系中的y坐標(biāo)
     */
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    Log.d(TAG, "onLayout() changed： " + changed + "l: " + l + "t: " + t
        + "r: " + r + "b: " + b);
    Log.d(TAG,"menuView.getMeasuredHeight(): " + menuView.getMeasuredHeight());
    menuView.layout(-menuWidth, 0, 0, menuView.getMeasuredHeight());
    mainView.layout(0, 0, r, b);
  }

 

 
  private int downX;

  @Override
  public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
    case MotionEvent.ACTION_DOWN:
      downX = (int) event.getX();
      break;

    case MotionEvent.ACTION_MOVE:
      int moveX = (int) event.getX();
      int deltaX = (moveX - downX);
      Log.e(TAG, "scrollX: " + getScrollX());

      int newScrollX = getScrollX() - deltaX;
      //使得SlideMenuView不會(huì)滑動(dòng)出界
      if(newScrollX > 0) newScrollX = 0;
      if(newScrollX < -menuWidth) newScrollX = -menuWidth;

      scrollTo(newScrollX, 0);
      Log.e(TAG, "moveX: " + moveX);
      downX = moveX;
      break;

    case MotionEvent.ACTION_UP:

      //①.使用自定義動(dòng)畫
//     ScrollAnimation scrollAnimation;
//     if(getScrollX()>-menuWidth/2){
//       //關(guān)閉菜單
////        scrollTo(0, 0);
//       scrollAnimation = new ScrollAnimation(this, 0);
//     }else {
//       //打開菜單
////        scrollTo(-menuWidth, 0);
//       scrollAnimation = new ScrollAnimation(this, -menuWidth);
//     }
//     startAnimation(scrollAnimation);


      //②使用Scroller
      if(getScrollX()>-menuWidth/2){
//       //關(guān)閉菜單
        closeMenu();
      }else {
        //打開菜單
        openMenu();
      }
      break;
    }

    return true;
  }

  private void openMenu() {
    Log.d(TAG, "openMenu...");
    scroller.startScroll(getScrollX(), 0, -menuWidth-getScrollX(), 400);
    invalidate();
  }

  private void closeMenu() {
    Log.d(TAG, "closeMenu...");
    scroller.startScroll(getScrollX(), 0, 0-getScrollX(), 400);
    invalidate();
  }

    /**
     * Scroller不主動(dòng)去調(diào)用這個(gè)方法
     * 而invalidate()可以掉這個(gè)方法
     * invalidate->draw->computeScroll
     */
  @Override
  public void computeScroll() {
    super.computeScroll();
    if(scroller.computeScrollOffset()){//返回true,表示動(dòng)畫沒(méi)結(jié)束
      scrollTo(scroller.getCurrX(), 0);
      invalidate();
    }
  }
  //用于在Activity中來(lái)控制菜單的狀態(tài)
  public void switchMenu() {
    if(getScrollX() == 0) {
      openMenu();
    } else {
      closeMenu();
    }
  }
}

這里繼承ViewGroup，由于子View都是利用系統(tǒng)的控件填充，所以不需要重寫onDraw方法。
由于是繼承自ViewGroup，需要實(shí)現(xiàn)onMeasure來(lái)測(cè)量?jī)蓚€(gè)子View的高度和寬度。我們還可以繼承FrameLayout，則不需要實(shí)現(xiàn)onMeasure，因?yàn)镕rameLayout已經(jīng)幫我們實(shí)現(xiàn)onMeasure。
重寫onLayout方法，重新定義自定義的位置擺放，左側(cè)的側(cè)滑菜單需要使其處于隱藏狀態(tài)。
重寫onTouch方法,通過(guò)監(jiān)測(cè)Touch的Up和Down來(lái)滑動(dòng)View來(lái)實(shí)現(xiàn)側(cè)滑的效果。

關(guān)于平滑滾動(dòng)

我們可以采用Scroller類中的startScroll來(lái)實(shí)現(xiàn)平滑滾動(dòng)，同樣我們可以使用自定義動(dòng)畫的方式來(lái)實(shí)現(xiàn)。

package com.wind.view;

import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;

/**
 * 讓指定view在一段時(shí)間內(nèi)scrollTo到指定位置
 * @author Administrator
 *
 */
public class ScrollAnimation extends Animation{

  private View view;
  private int targetScrollX;
  private int startScrollX;
  private int totalValue;

  public ScrollAnimation(View view, int targetScrollX) {
    super();
    this.view = view;
    this.targetScrollX = targetScrollX;

    startScrollX = view.getScrollX();
    totalValue = this.targetScrollX - startScrollX;

    int time = Math.abs(totalValue);
    setDuration(time);
  }

 

  /**
   * 在指定的時(shí)間內(nèi)一直執(zhí)行該方法，直到動(dòng)畫結(jié)束
   * interpolatedTime：0-1 標(biāo)識(shí)動(dòng)畫執(zhí)行的進(jìn)度或者百分比
   * time : 0  - 0.5 - 0.7 -  1
   * value: 10 - 60 - 80 - 110
   * 當(dāng)前的值 = 起始值 + 總的差值*interpolatedTime
   */
  @Override
  protected void applyTransformation(float interpolatedTime,
      Transformation t) {
    super.applyTransformation(interpolatedTime, t);
    int currentScrollX = (int) (startScrollX + totalValue*interpolatedTime);
    view.scrollTo(currentScrollX, 0);
  }
}

如上面的代碼：

通過(guò)自定義動(dòng)畫來(lái)讓View在一段時(shí)間內(nèi)重復(fù)執(zhí)行這個(gè)動(dòng)作。

關(guān)于getScrollX

將View向右移動(dòng)的時(shí)候，通過(guò)View.getScrollX得到的值是負(fù)的。

其實(shí)可以這樣理解：

*getScrollX()表示的是當(dāng)前的屏幕x坐標(biāo)的最小值-移動(dòng)的距離(向右滑動(dòng)時(shí)移動(dòng)的距離為正值，

向左滑動(dòng)時(shí)移動(dòng)的距離為負(fù)值)。*

對(duì)scrollTo和scrollBy的理解

我們查看View的源碼發(fā)現(xiàn)，scrollBy其實(shí)調(diào)用的就是scrollTo，scrollTo就是把View移動(dòng)到屏幕的X和Y位置，也就是絕對(duì)位置。而scrollBy其實(shí)就是調(diào)用的scrollTo，但是參數(shù)是當(dāng)前mScrollX和mScrollY加上X和Y的位置，所以ScrollBy調(diào)用的是相對(duì)于mScrollX和mScrollY的位置。

我們?cè)谏厦娴拇a中可以看到當(dāng)我們手指不放移動(dòng)屏幕時(shí)，就會(huì)調(diào)用scrollBy來(lái)移動(dòng)一段相對(duì)的距離。而當(dāng)我們手指松開后，會(huì)調(diào)用mScroller.startScroll(mUnboundedScrollX, 0, delta, 0, duration);來(lái)產(chǎn)生一段動(dòng)畫來(lái)移動(dòng)到相應(yīng)的頁(yè)面，在這個(gè)過(guò)程中系統(tǒng)回不斷調(diào)用computeScroll()，我們?cè)偈褂胹crollTo來(lái)把View移動(dòng)到當(dāng)前Scroller所在的絕對(duì)位置。

/**
   * Set the scrolled position of your view. This will cause a call to
   * {@link #onScrollChanged(int, int, int, int)} and the view will be
   * invalidated.
   * @param x the x position to scroll to
   * @param y the y position to scroll to
   */
  public void scrollTo(int x, int y) {
    if (mScrollX != x || mScrollY != y) {
      int oldX = mScrollX;
      int oldY = mScrollY;
      mScrollX = x;
      mScrollY = y;
      invalidateParentCaches();
      onScrollChanged(mScrollX, mScrollY, oldX, oldY);
      if (!awakenScrollBars()) {
        invalidate(true);
      }
    }
  }
  /**
   * Move the scrolled position of your view. This will cause a call to
   * {@link #onScrollChanged(int, int, int, int)} and the view will be
   * invalidated.
   * @param x the amount of pixels to scroll by horizontally
   * @param y the amount of pixels to scroll by vertically
   */
  public void scrollBy(int x, int y) {
    scrollTo(mScrollX + x, mScrollY + y);
  }

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: