MainActivity.java
package com.heima52.slidemenu; import com.heima52.slidemenu.view.SlideMenu; import android.os.Bundle; import android.app.Activity; import android.view.Menu; import android.view.View; import android.view.View.OnClickListener; import android.view.Window; import android.widget.ImageView; public class MainActivity extends Activity { private ImageView btn_back; private SlideMenu slideMenu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); //setContentView(R.layout.XXX); 前设置requestWindowFeature(XXXX)。表示软件全屏显示且没有标题 requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); } }
activity_main.xml
<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=".MainActivity" > <!-- 自定义子View, --> <com.heima52.slidemenu.view.SlideMenu 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.heima52.slidemenu.view.SlideMenu> </RelativeLayout>
layout_main.xml
<?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:background="#55666666" 666666是灰色背景色，55是透明度 android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:background="@drawable/top_bar_bg" android:gravity="center_vertical" android:layout_height="60dp"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/btn_back" android:background="@drawable/main_back"/> <!-- 图片和文字中间的竖直的线 --> <View android:layout_width="1dp" android:layout_height="match_parent" android:layout_marginTop="5dp" android:layout_marginBottom="5dp" android:background="@drawable/top_bar_divider"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#ffffff" android:textSize="22sp" android:layout_marginLeft="15dp" android:text="黑马新闻"/> </LinearLayout> <TextView android:layout_width="match_parent" android:text="钓鱼岛是中国的..." android:textColor="#000000" android:textSize="30sp" android:gravity="center" android:layout_height="match_parent"/> </LinearLayout>
layout_menu.xml
<?xml version="1.0" encoding="utf-8"?> <!-- ScrollView可以滚动的，ScrollView必须且只有一个子view --> <ScrollView xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="240dp" android:layout_height="match_parent" android:background="@drawable/menu_bg" 背景图片 android:orientation="vertical" > <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingBottom="300dp" android:orientation="vertical" > <!-- 很多样式都是一样的则抽取出一个样式： <style name="MenuTabText"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">wrap_content</item> <item name="android:textColor">#ffffff</item> <item name="android:gravity">center_vertical</item> <item name="android:drawablePadding">15dp</item> <item name="android:padding">15dp</item> <item name="android:textSize">22sp</item> </style> --> <TextView style="@style/MenuTabText" android:background="#33aa9900" 带有透明度的 android:drawableLeft="@drawable/tab_news" 左边图片右边文字 android:text="新闻"/> <TextView style="@style/MenuTabText" android:drawableLeft="@drawable/tab_read" android:text="订阅"/> <TextView style="@style/MenuTabText" android:drawableLeft="@drawable/tab_ties" android:text="跟帖"/> <TextView style="@style/MenuTabText" android:drawableLeft="@drawable/tab_pics" android:text="图片"/> <TextView style="@style/MenuTabText" android:drawableLeft="@drawable/tab_ugc" android:text="话题"/> <TextView style="@style/MenuTabText" android:drawableLeft="@drawable/tab_vote" android:text="投票"/> <TextView style="@style/MenuTabText" android:drawableLeft="@drawable/tab_focus" android:text="聚合阅读"/> </LinearLayout> </ScrollView>
自定义的侧滑菜单类SlideMenu.java
package com.heima52.slidemenu.view; import android.content.Context; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; import android.view.animation.Animation; import android.view.animation.Transformation; import android.widget.FrameLayout; import android.widget.Scroller; //自定义的侧滑菜单类 public class SlideMenu extends FrameLayout{//FrameLayout extends ViewGroup，FrameLayout所有添加到这个布局中的视图都以层叠的方式显示。第一个添加的控件被放在最底层，最后一个添加到框架布局中的视图显示在最顶层，上一层的控件会覆盖下一层的控件。 private View menuView,mainView;//里面的2个子view, private int menuWidth = 0; private Scroller scroller;//滚动动画，不真正改变view的位置， public SlideMenu(Context context, AttributeSet attrs) { super(context, attrs); init(); } public SlideMenu(Context context) { super(context); init(); } private void init(){ scroller = new Scroller(getContext()); } /** * 加载完自定义的控件SlideMenu的xml后会执行,然后执行测量和onLayout方法， * * 当1级的子view全部加载完调用，可以用初始化子view的引用 * 注意，这里无法获取子view的宽高 */ @Override protected void onFinishInflate() { super.onFinishInflate(); menuView = getChildAt(0);//一级子view,layout/layout_menu mainView = getChildAt(1);//二级子view,layout/layout_main menuWidth = menuView.getLayoutParams().width; } /**自定义的控件SlideMenu要调用测量方法才能绘制，里面调用子view的测量方法。 * <com.heima52.slidemenu.view.SlideMenu android:id="@+id/slideMenu" android:layout_width="match_parent" android:layout_height="match_parent" >因为宽和高是match_parent， * 所以widthMeasureSpec和heightMeasureSpec是系统根据UI的写法测量SlideMenu时传入的参数， * 如果<com.heima52.slidemenu.view.SlideMenu/>的宽高是充满父窗体则会计算父窗体的宽高然后传给参数widthMeasureSpec和heightMeasureSpec， * 如果宽高是包裹内容则系统会计算子View的宽高然后赋给widthMeasureSpec和heightMeasureSpec。 * 这2个参数测量出的宽高能让SlideMenu充满父窗体，其实是正好等于屏幕宽高 */ // @Override // protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // super.onMeasure(widthMeasureSpec, heightMeasureSpec); // //精确计算高度 // int measureSpec = MeasureSpec.makeMeasureSpec(menuWidth, MeasureSpec.EXACTLY); // // //测量所有子view的宽高 // //通过getLayoutParams方法可以获取到布局文件中指定宽高 // menuView.measure(measureSpec, heightMeasureSpec); // 宽度通过getLayoutParams方法获得，由于高度是充满父窗体所以是heightMeasureSpec // menuView.measure(menuView.getLayoutParams().width, heightMeasureSpec); // //直接使用SlideMenu的测量参数，因为它的宽高都是充满父窗体 // mainView.measure(widthMeasureSpec, heightMeasureSpec); // // } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: downX = (int) ev.getX(); break; case MotionEvent.ACTION_MOVE: int deltaX = (int) ( ev.getX()- downX); if(Math.abs(deltaX)>8){ return true; } break; } return super.onInterceptTouchEvent(ev); // return super.onInterceptTouchEvent(ev); } /** * FrameLayout的方法 * 自定义的控件SlideMenu调用测量方法方法后要调用绘制方法才能显示，里面调用子view的绘制方法。 * * 如果不重写这个方法，则2个子view就会叠加在一起。 * * l: 当前子view的左边在父view的坐标系中的x坐标 * t: 当前子view的顶边在父view的坐标系中的y坐标 * b：控件底边的坐标 * r: 控件右边的坐标 */ @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // Log.e("MAIN", "L: "+l+" t: "+t +" r: "+r + " b: "+b); //初始化的时候布局menuView隐藏， menuView.layout(-menuWidth, 0, 0, menuView.getMeasuredHeight()); //初始化的时候布局mainView显示， mainView.layout(0, 0, r, b);//r传进来的是屏幕的宽，b传进来的是屏幕的高，因为自定义控件SlideMenu的宽高属性是填充父窗体。 } 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 = (int) ( moveX- downX);//手指滑动的距离 //getScrollX()初始化是0，由于滑动的是控件的外层边框，所以外层边框应该向左滑动控件里面的内容才能向右移动。 int newScrollX = getScrollX() - deltaX; //不能滑的太远 if(newScrollX<-menuWidth) newScrollX = -menuWidth; if(newScrollX>0) newScrollX = 0; Log.e("Main", "scrollX: "+getScrollX()); scrollTo(newScrollX, 0);//自定义控件整体的滑动到哪里，y是0不变。 downX = moveX; break; case MotionEvent.ACTION_UP: //1.使用自定义动画 // ScrollAnimation scrollAnimation; // if(getScrollX()>-menuWidth/2){ 滑动的过程中getScrollX()一直为负 // //关闭菜单 //// scrollTo(0, 0); 这个是瞬间移动 // scrollAnimation = new ScrollAnimation(this, 0);//目标位置是0 // }else { // //打开菜单 //// scrollTo(-menuWidth, 0); 这个是瞬间移动 // scrollAnimation = new ScrollAnimation(this, -menuWidth);//目标位置是-menuWidth // } // startAnimation(scrollAnimation); //2.使用Scroller if(getScrollX()>-menuWidth/2){ // //关闭菜单 closeMenu(); }else { //打开菜单 openMenu(); } break; } return true; } private void closeMenu(){ scroller.startScroll(getScrollX(), 0, 0-getScrollX(), 0, 400);//0-getScrollX()是偏移量，400是执行的时间。 invalidate(); } private void openMenu(){ scroller.startScroll(getScrollX(), 0, -menuWidth-getScrollX(), 0, 400); invalidate();//上面是startScroll开始滚动，invalidate()方法会调用computeScroll()方法，里面的scrollTo是真正的滑动方法，里面再调用invalidate()方法是为了递归执行computeScroll()方法。 } /** * Scroller不主动去调用这个方法 * 而invalidate()可以掉这个方法 * invalidate->draw->computeScroll */ @Override public void computeScroll() { super.computeScroll(); if(scroller.computeScrollOffset()){//返回true,表示动画没结束 scrollTo(scroller.getCurrX(), 0); invalidate(); } } /** * 切换菜单的开和关 */ public void switchMenu() { if(getScrollX()==0){//没有滑动则getScrollX()==0， //需要打开 openMenu(); }else { //需要关闭 closeMenu(); } } }
自定义滑动动画ScrollAnimation.java
package com.heima52.slidemenu.view; import android.view.View; import android.view.animation.Animation; import android.view.animation.Transformation; /** * 让指定view在一段时间内scrollTo到指定位置 * 自定义滑动动画 * */ public class ScrollAnimation extends Animation{ private View view; private int targetScrollX;//终点位置 private int startScrollX;//起点位置 private int totalValue;//要移动的距离 public ScrollAnimation(View view, int targetScrollX) {//targetScrollX是终点位置 super(); this.view = view; this.targetScrollX = targetScrollX; startScrollX = view.getScrollX(); //getScrollX()一直为负 totalValue = this.targetScrollX - startScrollX; int time = Math.abs(totalValue); setDuration(time);//动画执行的时间，totalValue小则执行的时间小，totalValue大则执行的时间大。 } /** * 在指定的时间内一直执行该方法，直到动画结束 * interpolatedTime：0-1 标识动画执行的进度或者百分比 * time : 0 - 0.5 - 0.7 - 1 * value: 10 - 60 - 80 - 110 * 当前的值 = 起始值 + 总的差值*interpolatedTime */ @Override protected void applyTransformation(float interpolatedTime,Transformation t) { super.applyTransformation(interpolatedTime, t); int currentScrollX = (int) (startScrollX + totalValue*interpolatedTime);//关闭时currentScrollX从-menuWidth/2到0，打开时currentScrollX从-menuWidth/2到-menuWidth。 view.scrollTo(currentScrollX, 0); } }
侧滑菜单--- github-SlidingMenu(类库) 1.在ViewGroup中，让自己内容移动有以下几个方法： 1.1修改：menuView.layout(-menuWidth, 0, 0, menuView.getMeasuredHeight()); 1.2offsetTopAndBottom(offset)和offsetLeftAndRight(offset); 1.3scrollTo和scrollBy方法; 注意：滚动的并不是viewgroup内容本身，而是它的矩形边框 它是瞬间移动， 2.在自定义ViewGroup中一般不需要去实现onMeasure, 我们去实现系统已有的ViewGroup,比如FrameLayout, 它会帮我们区实现onMeasure方法 3.让view在一段时间内移动到某个位置 a.使用自定义动画ScrollAnimation b.使用Scroller(模拟一个执行流程，)