- 浏览: 15532 次
- 性别:
- 来自: 上海
文章分类
最新评论
Android UI开发第二十七篇——实现左右划出菜单
年前就想写左右滑动菜单,苦于没有时间,一直拖到现在,这篇代码实现参考了网上流行的SlidingMenu,使用的FrameLayout布局,不是扩展的HorizontalScrollView。
程序中自定义了菜单view:SlidingView,继承自ViewGroup,使用FrameLayout布局。重写了onInterceptTouchEvent(MotionEvent ev)方法实现ontouch的分发拦截,重写了onTouchEvent(MotionEvent ev)方法,实现左右滑动。
public class SlidingView extends ViewGroup { private FrameLayout mContainer; private Scroller mScroller; private VelocityTracker mVelocityTracker; private int mTouchSlop; private float mLastMotionX; private float mLastMotionY; private static final int SNAP_VELOCITY = 1000; private View mLeftView; private View mRightView; public SlidingView(Context context) { super(context); init(); } public SlidingView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public SlidingView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mContainer.measure(widthMeasureSpec, heightMeasureSpec); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int width = r - l; final int height = b - t; mContainer.layout(0, 0, width, height); } private void init() { mContainer = new FrameLayout(getContext()); mContainer.setBackgroundColor(0xff000000); mScroller = new Scroller(getContext()); mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop(); super.addView(mContainer); } public void setView(View v) { if (mContainer.getChildCount() > 0) { mContainer.removeAllViews(); } mContainer.addView(v); } @Override public void scrollTo(int x, int y) { super.scrollTo(x, y); postInvalidate(); } @Override public void computeScroll() { if (!mScroller.isFinished()) { if (mScroller.computeScrollOffset()) { int oldX = getScrollX(); int oldY = getScrollY(); int x = mScroller.getCurrX(); int y = mScroller.getCurrY(); if (oldX != x || oldY != y) { scrollTo(x, y); } // Keep on drawing until the animation has finished. invalidate(); } else { clearChildrenCache(); } } else { clearChildrenCache(); } } private boolean mIsBeingDragged; /** * 实现了ontouch的分发拦截 */ @Override public boolean onInterceptTouchEvent(MotionEvent ev) { final int action = ev.getAction(); final float x = ev.getX(); final float y = ev.getY(); switch (action) { case MotionEvent.ACTION_DOWN: mLastMotionX = x; mLastMotionY = y; mIsBeingDragged = false; break; case MotionEvent.ACTION_MOVE: final float dx = x - mLastMotionX; final float xDiff = Math.abs(dx); final float yDiff = Math.abs(y - mLastMotionY); if (xDiff > mTouchSlop && xDiff > yDiff) { mIsBeingDragged = true; mLastMotionX = x; } Log.d("Sliding", "SlidingView_Touch:"+x+"|"+y); Log.d("Sliding", "SlidingView_Touch:"+xDiff+"|"+mTouchSlop+"|"+yDiff+"|"+mLastMotionY); Log.d("Sliding", "SlidingView_Touch:"+mIsBeingDragged); break; } return mIsBeingDragged; } @Override public boolean onTouchEvent(MotionEvent ev) { if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain(); } mVelocityTracker.addMovement(ev); final int action = ev.getAction(); final float x = ev.getX(); final float y = ev.getY(); switch (action) { case MotionEvent.ACTION_DOWN: if (!mScroller.isFinished()) { mScroller.abortAnimation(); } mLastMotionX = x; mLastMotionY = y; if (getScrollX() == -getLeftMenuWidth() && mLastMotionX < getLeftMenuWidth()) { return false; } if (getScrollX() == getRightMenuWidth() && mLastMotionX > getLeftMenuWidth()) { return false; } break; case MotionEvent.ACTION_MOVE: if (mIsBeingDragged) { enableChildrenCache(); final float deltaX = mLastMotionX - x; mLastMotionX = x; float oldScrollX = getScrollX(); float scrollX = oldScrollX + deltaX; if (deltaX < 0 && oldScrollX < 0) { // left view final float leftBound = 0; final float rightBound = -getLeftMenuWidth(); if (scrollX > leftBound) { scrollX = leftBound; } else if (scrollX < rightBound) { scrollX = rightBound; } } else if (deltaX > 0 && oldScrollX > 0) { // right view final float rightBound = getRightMenuWidth(); final float leftBound = 0; if (scrollX < leftBound) { scrollX = leftBound; } else if (scrollX > rightBound) { scrollX = rightBound; } } scrollTo((int) scrollX, getScrollY()); if (scrollX > 0) { mLeftView.setVisibility(View.GONE); mLeftView.clearFocus(); mRightView.setVisibility(View.VISIBLE); mRightView.requestFocus(); } else { mLeftView.setVisibility(View.VISIBLE); mLeftView.requestFocus(); mRightView.setVisibility(View.GONE); mRightView.clearFocus(); } } break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: if (mIsBeingDragged) { final VelocityTracker velocityTracker = mVelocityTracker; velocityTracker.computeCurrentVelocity(1000); int velocityX = (int) velocityTracker.getXVelocity(); velocityX = 0; int oldScrollX = getScrollX(); int dx = 0; if (oldScrollX < 0) { // 左边 if (oldScrollX < -getLeftMenuWidth() / 2 || velocityX > SNAP_VELOCITY) { // 左侧页面划出 dx = -getLeftMenuWidth() - oldScrollX; } else if (oldScrollX >= -getLeftMenuWidth() / 2 || velocityX < -SNAP_VELOCITY) { // 左侧页面关闭 dx = -oldScrollX; } } else { // 右边 if (oldScrollX > getRightMenuWidth() / 2 || velocityX < -SNAP_VELOCITY) { // 右侧页面划出 dx = getRightMenuWidth() - oldScrollX; } else if (oldScrollX <= getRightMenuWidth() / 2 || velocityX > SNAP_VELOCITY) { // 右侧页面关闭 dx = -oldScrollX; } } smoothScrollTo(dx); clearChildrenCache(); } break; } if (mVelocityTracker != null) { mVelocityTracker.recycle(); mVelocityTracker = null; } return true; } private int getLeftMenuWidth() { if (mLeftView == null) { return 0; } return mLeftView.getWidth(); } private int getRightMenuWidth() { if (mRightView == null) { return 0; } return mRightView.getWidth(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); } public View getRightView() { return mRightView; } public void setRightView(View mRightView) { this.mRightView = mRightView; } public View getMenuView() { return mLeftView; } public void setLeftView(View mLeftView) { this.mLeftView = mLeftView; } void toggle() { int menuWidth = mLeftView.getWidth(); int oldScrollX = getScrollX(); if (oldScrollX == 0) { smoothScrollTo(-menuWidth); } else if (oldScrollX == -menuWidth) { smoothScrollTo(menuWidth); } } /** * 打开(关闭)左侧页面 */ public void showLeftView() { mLeftView.setVisibility(View.VISIBLE); mRightView.setVisibility(View.GONE); int menuWidth = mLeftView.getWidth(); int oldScrollX = getScrollX(); if (oldScrollX == 0) { smoothScrollTo(-menuWidth); } else if (oldScrollX == -menuWidth) { smoothScrollTo(menuWidth); } } /** * 打开(关闭)右侧页面 */ public void showRightView() { mLeftView.setVisibility(View.GONE); mLeftView.clearFocus(); mRightView.setVisibility(View.VISIBLE); mRightView.requestFocus(); int menuWidth = mRightView.getWidth(); int oldScrollX = getScrollX(); if (oldScrollX == 0) { smoothScrollTo(menuWidth); } else if (oldScrollX == menuWidth) { smoothScrollTo(-menuWidth); } } /** * 显示中间页面 */ public void showCenterView() { int menuWidth = mRightView.getWidth(); int oldScrollX = getScrollX(); if (oldScrollX == menuWidth) { showRightView(); } else if (oldScrollX == -menuWidth) { showLeftView(); } } void smoothScrollTo(int dx) { int duration = 500; int oldScrollX = getScrollX(); mScroller.startScroll(oldScrollX, getScrollY(), dx, getScrollY(), duration); invalidate(); } void enableChildrenCache() { final int count = getChildCount(); for (int i = 0; i < count; i++) { final View layout = (View) getChildAt(i); layout.setDrawingCacheEnabled(true); } } void clearChildrenCache() { final int count = getChildCount(); for (int i = 0; i < count; i++) { final View layout = (View) getChildAt(i); layout.setDrawingCacheEnabled(false); } } }
SlidingMenu对SlidingView做了进一步封装处理:
public class SlidingMenu extends RelativeLayout { private SlidingView mSlidingView; private View mLeftView; private View mRightView; // menu width private int alignScreenWidth; public SlidingMenu(Context context) { super(context); } public SlidingMenu(Context context, AttributeSet attrs) { super(context, attrs); } public SlidingMenu(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } public void setAlignScreenWidth(int alignScreenWidth) { this.alignScreenWidth = alignScreenWidth; } public void setLeftView(View view) { LayoutParams behindParams = new LayoutParams(alignScreenWidth, LayoutParams.MATCH_PARENT); addView(view, behindParams); mLeftView = view; } public void setRightView(View view) { LayoutParams behindParams = new LayoutParams(alignScreenWidth, LayoutParams.MATCH_PARENT); behindParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT); addView(view, behindParams); mRightView = view; } public void setCenterView(View view) { LayoutParams aboveParams = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT); mSlidingView = new SlidingView(getContext()); addView(mSlidingView, aboveParams); mSlidingView.setView(view); mSlidingView.invalidate(); mSlidingView.setLeftView(mLeftView); mSlidingView.setRightView(mRightView); } public void showLeftView() { mSlidingView.showLeftView(); } public void showRightView() { mSlidingView.showRightView(); } public void showCenterView() { mSlidingView.showCenterView(); } }
SlidingMenu的使用代码
public class SlidingActivity extends Activity implements OnClickListener{ SlidingMenu mSlidingMenu; @Override protected void onCreate(Bundle arg0) { super.onCreate(arg0); setContentView(R.layout.main); DisplayMetrics dm = new DisplayMetrics(); getWindowManager().getDefaultDisplay().getMetrics(dm); mSlidingMenu = (SlidingMenu) findViewById(R.id.slidingMenu); mSlidingMenu.setAlignScreenWidth((dm.widthPixels / 5) * 2); View leftView=getLayoutInflater().inflate(R.layout.left_menu, null); View rightView=getLayoutInflater().inflate(R.layout.right_menu, null); View centerView=getLayoutInflater().inflate(R.layout.center, null); mSlidingMenu.setLeftView(leftView); mSlidingMenu.setRightView(rightView); mSlidingMenu.setCenterView(centerView); Button showLeftMenu=(Button)centerView.findViewById(R.id.center_left_btn); showLeftMenu.setOnClickListener(this); Button showRightMenu=(Button)centerView.findViewById(R.id.center_right_btn); showRightMenu.setOnClickListener(this); } @Override public void onClick(View v) { // TODO Auto-generated method stub switch (v.getId()) { case R.id.center_left_btn: mSlidingMenu.showLeftView(); break; case R.id.center_right_btn: mSlidingMenu.showRightView(); break; default: break; } } }
代码:http://download.csdn.net/detail/xyz_lmn/5109965
/*** @author 张兴业
* android开发进阶群:278401545
*/
相关推荐
UI开发第六篇——仿QQ的滑动TabUI开发第六篇——仿QQ的滑动Tab
UI开发第八篇——ViewFlipper 左右滑动效果UI开发第八篇——ViewFlipper 左右滑动效果
Android UI开发第二十一篇——下拉刷新列表实现(pull to refresh) http://blog.csdn.net/xyz_lmn/article/details/8101360
UI开发第九篇——SlidingDrawer 抽屉效果 UI开发第九篇——SlidingDrawer 抽屉效果
Android UI开发第十六篇——分享一个popuwindow实例 http://blog.csdn.net/xyz_lmn/article/details/6921097
Android UI开发——SlidingDrawer 抽屉效果~~
Android UI开发专题 Android UI开发专题(一) 之界面设计 近期很多网友对Android用户界面的设计表示很感兴趣,对于Android UI开发自绘控件和游戏制作而言掌握好绘图基础是必不可少的。本次专题分10节来讲述,有关...
安卓Android源码——QQ_UI分类菜单DEMO.zip
安卓Android源码——ui开发类库示例源码.zip
android UI开发推荐颜色 android UI开发推荐颜色 android UI开发推荐颜色
本示例利用了Jquery-UI实现Web桌面系统jWebOS,左侧菜单和桌面菜单的链接都是动态设置。整体效果非常棒。大家可以用于自己的网站建设。 建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发...
《Android应用程序开发教程(第2版)》教学课件02Android UI设计.pdf《Android应用程序开发教程(第2版)》教学课件02Android UI设计.pdf《Android应用程序开发教程(第2版)》教学课件02Android UI设计.pdf《Android应用...
Android开发笔记,UI基础编程,PDF文档。
Android开发与应用——张荣 原书配套例程代码, 由于书籍的前三章是介绍Android和开发环境的搭建的 所以例程代码从第四章开始到第九章。 原书目录如下。 第1章 Android简介 1.1 手机操作系统 1.2 Android起源 1.3...
QMUI 团队出品,一个致力于提高 Android 项目 UI 开发效率的解决方案
安卓Android源码——UI界面源码.zip
UI开发第七篇之Android gallery实现图片的循环旋转UI开发第七篇之Android gallery实现图片的循环旋转
Android UI开发经典资料,学习设计Android界面的必备资料
详细信息可见博客,Android:shape开发详解-UI设计