扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
本篇文章给大家分享的是有关如何在Android项目中自定义侧滑菜单栏,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。
创新互联是一家专注于网站建设、成都网站设计与策划设计,息烽网站建设哪家好?创新互联做网站,专注于网站建设10年,网设计领域的专业建站公司;建站业务涵盖:息烽等地区。息烽做网站价格咨询:13518219792
自定义侧滑菜单的简单实现
不少APP中都有这种侧滑菜单,例如QQ这类的,比较有名开源库如slidingmenu。
有兴趣的可以去研究研究这个开源库。
这里我们将一种自己的实现方法,把学习的 东西做个记录,O(∩_∩)O!
首先看效果图:
这里我们实现的侧滑菜单,是将左侧隐藏的菜单和主面板看作一个整体来实现的,而左侧隐藏的菜单和主面板相当于是这个自定义View的子View。
首先来构造该自定义View的布局:
自定义的SlideMenuView包含两个子view,一个是menuView,另一个是mainView(主面板)。
接着我们需要实现SlideMenuView的 java代码。
自定义VIew,需要继承某个父类,通过重写父类的某些方法来增强父类的功能。
这里我们选择继承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()); } /** * 当一级的子View全部加载玩后调用,可以用于初始化子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是系统测量SlideMenu时传入的参数, * 这2个参数测量出的宽高能让SlideMenu充满窗体,其实是正好等于屏幕宽高 */ @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); // 测量所有子view的宽高 // 通过getLayoutParams方法可以获取到布局文件中指定宽高 menuView.measure(widthMeasureSpec, heightMeasureSpec); // 直接使用SlideMenu的测量参数,因为它的宽高都是充满父窗体 mainView.measure(widthMeasureSpec, heightMeasureSpec); } /** * 重新摆放子View的位置 * l: 当前子view的左边在父view的坐标系中的x坐标 * t: 当前子view的顶边在父view的坐标系中的y坐标 */ @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不会滑动出界 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: //①.使用自定义动画 // ScrollAnimation scrollAnimation; // if(getScrollX()>-menuWidth/2){ // //关闭菜单 //// scrollTo(0, 0); // scrollAnimation = new ScrollAnimation(this, 0); // }else { // //打开菜单 //// scrollTo(-menuWidth, 0); // scrollAnimation = new ScrollAnimation(this, -menuWidth); // } // startAnimation(scrollAnimation); //②使用Scroller if(getScrollX()>-menuWidth/2){ // //关闭菜单 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不主动去调用这个方法 * 而invalidate()可以掉这个方法 * invalidate->draw->computeScroll */ @Override public void computeScroll() { super.computeScroll(); if(scroller.computeScrollOffset()){//返回true,表示动画没结束 scrollTo(scroller.getCurrX(), 0); invalidate(); } } //用于在Activity中来控制菜单的状态 public void switchMenu() { if(getScrollX() == 0) { openMenu(); } else { closeMenu(); } } }
关于平滑滚动
我们可以采用Scroller类中的startScroll来实现平滑滚动,同样我们可以使用自定义动画的方式来实现。
package com.wind.view; import android.view.View; import android.view.animation.Animation; import android.view.animation.Transformation; /** * 让指定view在一段时间内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); } /** * 在指定的时间内一直执行该方法,直到动画结束 * 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); view.scrollTo(currentScrollX, 0); } }
如上面的代码:
通过自定义动画来让View在一段时间内重复执行这个动作。
关于getScrollX
将View向右移动的时候,通过View.getScrollX得到的值是负的。
其实可以这样理解:
*getScrollX()表示的是当前的屏幕x坐标的最小值-移动的距离(向右滑动时移动的距离为正值,
向左滑动时移动的距离为负值)。*
对scrollTo和scrollBy的理解
我们查看View的源码发现,scrollBy其实调用的就是scrollTo,scrollTo就是把View移动到屏幕的X和Y位置,也就是绝对位置。而scrollBy其实就是调用的scrollTo,但是参数是当前mScrollX和mScrollY加上X和Y的位置,所以ScrollBy调用的是相对于mScrollX和mScrollY的位置。
我们在上面的代码中可以看到当我们手指不放移动屏幕时,就会调用scrollBy来移动一段相对的距离。而当我们手指松开后,会调用mScroller.startScroll(mUnboundedScrollX, 0, delta, 0, duration);来产生一段动画来移动到相应的页面,在这个过程中系统回不断调用computeScroll(),我们再使用scrollTo来把View移动到当前Scroller所在的绝对位置。
/** * 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); }
以上就是如何在Android项目中自定义侧滑菜单栏,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流