Android自定義實現(xiàn)側(cè)滑菜單效果

發(fā)布時間：2020-08-26 02:00:33 來源：腳本之家閱讀：170 作者：oblivion0001 欄目：移動開發(fā)

本文實例為大家分享了Android自定義實現(xiàn)側(cè)滑菜單的具體代碼，供大家參考，具體內(nèi)容如下

實現(xiàn)原理：繼承ViewGroup控件要顯示到界面上需要重寫OnMeature()
OnLayout()，因此在實現(xiàn)OnLayout()的時候，將菜單界面劃出到屏幕左側(cè)，動態(tài)改變菜單界面距離scrollXto()左邊界的距離就能實現(xiàn)滑動效果。

1.繼承ViewGroup
2.事件分發(fā)機制
3.狀態(tài)監(jiān)聽

在主界面中添加兩個子控件

<com.oblivion.ui.SlideMenu xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/sliding_menu"
  android:layout_width="match_parent"
  android:layout_height="match_parent">

  <!-- 在SlidingMenu中的索引0 -->
  <include layout="@layout/menu" />

  <!-- 在SlidingMenu中的索引1 -->
  <include layout="@layout/main" />

</com.oblivion.ui.SlideMenu>

menu菜單布局

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="240dp"
  android:layout_height="match_parent"
  android:background="@drawable/menu_bg">

  <LinearLayout
    android:layout_width="240dp"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <TextView
      android:id="@+id/tv_news"
      
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@drawable/select_menu"
      android:clickable="true"
      android:drawableLeft="@drawable/tab_news"
      android:drawablePadding="10dp"
      android:text="新聞" />

    <TextView
      android:id="@+id/tv_read"
      
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableLeft="@drawable/tab_read"
      android:drawablePadding="10dp"
      android:text="訂閱" />

    <TextView
      android:id="@+id/tv_local"
      
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableLeft="@drawable/tab_local"
      android:drawablePadding="10dp"
      android:text="本地" />

    <TextView
      android:id="@+id/tv_ties"
      
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableLeft="@drawable/tab_ties"
      android:drawablePadding="10dp"
      android:text="跟帖" />

    <TextView
      android:id="@+id/tv_pics"
      
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableLeft="@drawable/tab_pics"
      android:drawablePadding="10dp"
      android:text="圖片" />

    <TextView
      android:id="@+id/tv_ugc"
      
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableLeft="@drawable/tab_ugc"
      android:drawablePadding="10dp"
      android:text="話題" />

    <TextView
      android:id="@+id/tv_vote"
      
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableLeft="@drawable/tab_vote"
      android:drawablePadding="10dp"
      android:text="投票" />

    <TextView
      android:id="@+id/tv_focus"
      
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:drawableLeft="@drawable/tab_focus"
      android:drawablePadding="10dp"
      android:text="焦點" />
  </LinearLayout>
</ScrollView>

顯示界面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical">

  <LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/top_bar_bg"
    android:orientation="horizontal">

    <ImageView
      android:id="@+id/iv_showmenu"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/main_back" />

    <View
      android:layout_width="1dp"
      android:layout_height="match_parent"
      android:background="@drawable/top_bar_divider"></View>

    <TextView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:gravity="center"
      android:text="新聞首頁"
      android:textColor="#ffffff"
      android:textSize="30sp" />
  </LinearLayout>

  <TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:text="我操，這么low"
    android:textColor="#000000"
    android:textSize="20sp" />


</LinearLayout>

實現(xiàn)原理：繼承ViewGroup控件要顯示到界面上需要重寫OnMeature() OnLayout()，因此在實現(xiàn)OnLayout()的時候，將菜單界面劃出到屏幕左側(cè)，動態(tài)改變菜單界面距離scrollXto()左邊界的距離就能實現(xiàn)滑動效果。

實現(xiàn)onMeasure()和onLayout()方法，對控件進行布局

/**
   * 測量布局中的控件
   *
   * @param widthMeasureSpec
   * @param heightMeasureSpec
   */
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);//測量自身寬高
    //得到menu界面
    menuView = getChildAt(0);
    menuViewWidth = menuView.getLayoutParams().width;
    //得到main界面
    mainView = getChildAt(1);
    //設(shè)定menuView的寬------不用setMeasure...
    menuView.measure(MeasureSpec.makeMeasureSpec(menuViewWidth, MeasureSpec.EXACTLY), heightMeasureSpec);
    //設(shè)定mainView的寬
    mainView.measure(widthMeasureSpec, heightMeasureSpec);
  }

  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {

    int menuleft = -menuViewWidth;//menu設(shè)定的left
    int menuright = 0;//menu設(shè)定的right
    int menutop = 0;//menu設(shè)定的top
    int menubottom = b - t;//menu設(shè)定的bottom
    //布局menuView 控件xx2
    menuView.layout(menuleft, menutop, menuright, menubottom);
    int mainleft = 0;//main設(shè)定的left
    int mainright = r - l;//main設(shè)定的right
    int maintop = 0;//main設(shè)定的top
    int mainbottom = b - t;//main設(shè)定的bottom
    //布局mainView ---------------控件.....你媽逼方向---------方向是left,top,right,bottom
    mainView.layout(mainleft, maintop, mainright, mainbottom);
    System.out.println(menuViewWidth--);//原來這這里減減了；

  }

通過onTouch（）方法，以及scrollX()和getScrollX()方法獲取邊界值，動態(tài)改變?nèi)崿F(xiàn)滑動。
這里需要注意的是scrollX（），getScrollX()得到的值是相對于布局起始點的，所以需要重新封裝；
平滑動畫，需要在構(gòu)造函數(shù)中創(chuàng)建一個Scroll 類,然后通過ComplentScroll..方法，判斷設(shè)定的平滑動畫是否結(jié)束。

最后通過，動畫結(jié)束后的邊界值，判斷是否打開，關(guān)閉狀態(tài)。

 /**
   * 由于系統(tǒng)scrollTo是取反操作，所以需要封裝一下
   *
   * @param distance
   */
  private void scrollTo(int distance) {
    super.scrollTo(-distance, 0);
  }

  public int getMyScrollX() {
    return -getScrollX();
  }

  /**
   * 控件觸莫狀態(tài)
   *
   * @param event
   * @return
   */
  @Override
  public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        //記錄按下點
        down_dot = (int) event.getX();
        System.out.println(down_dot);
        break;
      case MotionEvent.ACTION_MOVE:
        int move_dot = (int) event.getX();
        //動態(tài)的移動點和按下點的間距絕對值
        move2down_distance = move_dot - down_dot;
        //移動間距與上次抬起的點
        int lastUp_dot = move2down_distance + up_dot;
        // 控制邊界
        if (lastUp_dot >= menuViewWidth) {
          lastUp_dot = menuViewWidth;
        } else if (lastUp_dot <= 0) {
          lastUp_dot = 0;
        }
        //設(shè)定移動后的距離
        scrollTo(lastUp_dot);
        break;
      case MotionEvent.ACTION_UP:
        //當(dāng)前抬起手指點
        up_dot = (int) event.getX();
        //設(shè)定最終的狀態(tài)
        setFinalScroll();
        break;
    }
    return true;//將事件消費掉
  }

  /**
   * 當(dāng)手指抬起后，記錄最終的狀態(tài)；
   */
  private void setFinalScroll() {
    //得到當(dāng)前距離左邊界的距離
    currrentScroll = getMyScrollX();
    if (currrentScroll >= menuViewWidth / 2) {
      //scrollTo(menuViewWidth);
      rightAnimation();
    } else {
      leftAnimation();

    }
  }

  /**
   * 平滑向左的移動動畫
   */
  private void leftAnimation() {
    //scrollTo(0);
    int dx = 0 - currrentScroll;//要移動的距離
    //設(shè)定平滑動畫
    msScroller.startScroll(currrentScroll, 0, dx, 0, 300);
    invalidate();
    //設(shè)定一下抬起點
    up_dot = 0;
    //調(diào)用接口的關(guān)閉狀態(tài)
    mOnDragStateListener.onDragClose();
  }
  /**
   * 平滑向右移動的動畫
   */
  private void rightAnimation() {
    int dx = menuViewWidth - currrentScroll;//要移動的距離
    //設(shè)定平滑動畫
    msScroller.startScroll(currrentScroll, 0, dx, 0, 300);
    invalidate();
    //設(shè)定一下抬起點
    up_dot = menuViewWidth;
    //調(diào)用接口的開啟狀態(tài)
    mOnDragStateListener.onDragOpen();
  }

  /**
   * 平滑移動動畫是否結(jié)束
   */
  @Override
  public void computeScroll() {
    super.computeScroll();
    if (msScroller.computeScrollOffset()) {
      int currX = msScroller.getCurrX();//模擬出來的數(shù)值
      scrollTo(currX);
      invalidate();
    }
  }

創(chuàng)建監(jiān)聽，以及回調(diào)接口

 /**
   * 拖拽的監(jiān)聽
   */
  public void setOnDragStateListener(onDragStateListener listener) {
    mOnDragStateListener = listener;
  }

  /**
   * 回調(diào)修改狀態(tài)
   *
   * @param dragState
   */
  public void setStateChange(boolean dragState) {
    if (dragState) {
      currrentScroll = 0;
      rightAnimation();
    } else {
      currrentScroll = menuViewWidth;
      leftAnimation();
    }
  }


  /**
   * 創(chuàng)建拖拽的回調(diào)接口
   */
  public interface onDragStateListener {
    /**
     * 被拖拽開
     */
    void onDragOpen();

    /**
     * 被關(guān)閉
     */
    void onDragClose();
  }

主Activity中實現(xiàn)監(jiān)聽效果

iv_showmenu.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        //圖片點擊后觸發(fā)改變狀態(tài)
        sliding_menu.setStateChange(dragState);
      }
    });
    sliding_menu.setOnDragStateListener(new SlideMenu.onDragStateListener() {
      @Override
      public void onDragOpen() {
        ToastUtils.setToast(getApplicationContext(), "open");
        dragState = false;
        tv_news.setSelected(true);
        tv_news.setTextColor(Color.BLUE);
      }

      @Override
      public void onDragClose() {
        ToastUtils.setToast(getApplicationContext(), "close");
        dragState = true;
        tv_news.setSelected(false);
        tv_news.setTextColor(Color.WHITE);
      }
    });
    tv_news.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
        ToastUtils.setToast(getApplicationContext(), tv_news.getText().toString());
      }
    });
  }

github源碼地址

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

Android自定義實現(xiàn)側(cè)滑菜單效果

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽