Android自定义实现侧滑菜单效果

发布时间:2019-08-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Android自定义实现侧滑菜单效果脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

本文实例为大家分享了AndROId自定义实现侧滑菜单的具体代码,供大家参考,具体内容如下

实现原理继承ViewGroup控件要显示到界面上需要重写OnMeature()
OnLayout(),因此在实现OnLayout()的时候,将菜单界面划出到屏幕左侧,动态改变菜单界面距离scrollXto()左边界的距离就能实现滑动效果。

1.继承ViewGroup
2.事件分发机制
3.状态监听

在主界面中添加两个子控件

 <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菜单布局

 <&#63;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"       style="@style/menu_ITem"       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"       style="@style/menu_item"       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"       style="@style/menu_item"       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"       style="@style/menu_item"       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"       style="@style/menu_item"       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"       style="@style/menu_item"       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"       style="@style/menu_item"       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"       style="@style/menu_item"       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>

实现原理:继承ViewGroup控件要显示到界面上需要重写OnMeature() OnLayout(),因此在实现OnLayout()的时候,将菜单界面划出到屏幕左侧,动态改变菜单界面距离scrollXto()左边界的距离就能实现滑动效果。

实现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);     //设定menuView的宽------不用setMeasure...     menuView.measure(MeasureSpec.makeMeasureSpec(menuViewWidth, MeasureSpec.EXACTLY), heightMeasureSpec);     //设定mainView的宽     mainView.measure(widthMeasureSpec, heightMeasureSpec);   }    @Override   protected void onLayout(boolean changed, int l, int t, int r, int b) {      int menuleft = -menuViewWidth;//menu设定的left     int menuright = 0;//menu设定的right     int menutop = 0;//menu设定的top     int menubottom = b - t;//menu设定的bottom     //布局menuView 控件xx2     menuView.layout(menuleft, menutop, menuright, menubottom);     int mainleft = 0;//main设定的left     int mainright = r - l;//main设定的right     int maintop = 0;//main设定的top     int mainbottom = b - t;//main设定的bottom     //布局mainView ---------------控件.....你妈逼方向---------方向是left,top,right,bottom     mainView.layout(mainleft, maintop, mainright, mainbottom);     System.out.println(menuViewWidth--);//原来这这里减减了;    }

通过onTouch()方法,以及scrollX()和getScrollX()方法获取边界值,动态改变去实现滑动。
这里需要注意的是scrollX(),getScrollX()得到的值是相对于布局起始点的,所以需要重新封装;
平滑动画,需要在构造函数中创建一个Scroll 类,然后通过ComplentScroll..方法,判断设定的平滑动画是否结束。

最后通过,动画结束后的边界值,判断是否打开,关闭状态。

  /**    * 由于系统scrollTo是取反操作,所以需要封装一下    *    * @param distance    */   private void scrollTo(int distance) {     super.scrollTo(-distance, 0);   }    public int getMyScrollX() {     return -getScrollX();   }    /**    * 控件触莫状态    *    * @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();         //动态的移动点和按下点的间距绝对值         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;         }         //设定移动后的距离         scrollTo(lastUp_dot);         break;       case MotionEvent.ACTION_UP:         //当前抬起手指点         up_dot = (int) event.getX();         //设定最终的状态         setFinalScroll();         break;     }     return true;//将事件消费掉   }    /**    * 当手指抬起后,记录最终的状态;    */   private void setFinalScroll() {     //得到当前距离左边界的距离     currrentScroll = getMyScrollX();     if (currrentScroll >= menuViewWidth / 2) {       //scrollTo(menuViewWidth);       rightAnimation();     } else {       leftAnimation();      }   }    /**    * 平滑向左的移动动画    */   private void leftAnimation() {     //scrollTo(0);     int dx = 0 - currrentScroll;//要移动的距离     //设定平滑动画     msScroller.startScroll(currrentScroll, 0, dx, 0, 300);     invalidate();     //设定一下抬起点     up_dot = 0;     //调用接口的关闭状态     mOnDragstateListener.onDragClose();   }   /**    * 平滑向右移动的动画    */   private void rightAnimation() {     int dx = menuViewWidth - currrentScroll;//要移动的距离     //设定平滑动画     msScroller.startScroll(currrentScroll, 0, dx, 0, 300);     invalidate();     //设定一下抬起点     up_dot = menuViewWidth;     //调用接口的开启状态     mOnDragStateListener.onDragOpen();   }    /**    * 平滑移动动画是否结束    */   @Override   public void computeScroll() {     super.computeScroll();     if (msScroller.computeScrollOffset()) {       int currX = msScroller.getCurrX();//模拟出来的数值       scrollTo(currX);       invalidate();     }   }

创建监听,以及回调接口

  /**    * 拖拽的监听    */   public void setOnDragStateListener(onDragStateListener listener) {     mOnDragStateListener = listener;   }    /**    * 回调修改状态    *    * @param dragState    */   public void setStateChange(boolean dragState) {     if (dragState) {       currrentScroll = 0;       rightAnimation();     } else {       currrentScroll = menuViewWidth;       leftAnimation();     }   }     /**    * 创建拖拽的回调接口    */   public interface onDragStateListener {     /**      * 被拖拽开      */     void onDragOpen();      /**      * 被关闭      */     void onDragClose();   }

主Activity中实现监听效果

 iv_showmenu.setOnClickListener(new View.OnClickListener() {       @Override       public void onClick(View v) {         //图片点击后触发改变状态         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源码地址

android教程
脚本网站
android studio

脚本宝典总结

以上是脚本宝典为你收集整理的Android自定义实现侧滑菜单效果全部内容,希望文章能够帮你解决Android自定义实现侧滑菜单效果所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。