前面已经讲过通过三方开源库SlideMenu来实现这种效果,请参考Android实现网易新闻客户端侧滑菜单(一)
今天通过自定义View来实现这种功能。
代码如下:
SlideMenu.java
package com.jackie.slidemenu.view; import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.ViewConfiguration; import android.view.ViewGroup; import android.widget.Scroller; public class SlideMenu extends ViewGroup { private int mMostRecentX; // 最后一次x轴的偏移量 private final int MENU_SCREEN = 0; // 菜单界面 private final int MAIN_SCREEN = 1; // 主界面 private int mCurrentScreen = MAIN_SCREEN; // 当前屏幕显示的是主界面 private Scroller mScroller; private int touchSlop; public SlideMenu(Context context, AttributeSet attrs) { super(context, attrs); mScroller = new Scroller(context); touchSlop = ViewConfiguration.get(context).getScaledTouchSlop(); } /** * 测量出所有子布局的宽和高 */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); measureView(widthMeasureSpec, heightMeasureSpec); } /** * 测量所有子布局的宽和高 * @param widthMeasureSpec 父布局也就是ViewGroup的宽度测量规格 * @param heightMeasureSpec 父布局也就是ViewGroup的高度测量规格 */ private void measureView(int widthMeasureSpec, int heightMeasureSpec) { // 测量菜单的宽和高 View menuView = getChildAt(0); menuView.measure(menuView.getLayoutParams().width, heightMeasureSpec); // 测量主界面的宽和高 View mainView = getChildAt(1); mainView.measure(widthMeasureSpec, heightMeasureSpec); // 主界面的宽和高和父控件viewgroup的宽高一样 } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { // 布置菜单的位置 View menuView = getChildAt(0); menuView.layout(-menuView.getMeasuredWidth(), 0, 0, b); // 布置主界面的位置 View mainView = getChildAt(1); mainView.layout(0, 0, r, b); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: mMostRecentX = (int) event.getX(); break; case MotionEvent.ACTION_MOVE: // 最新的x轴偏移量 int moveX = (int) event.getX(); // 增量值 int deltaX = mMostRecentX - moveX; // 把最新的x轴偏移量赋值给成员变量 mMostRecentX = moveX; // 得到x轴移动后的偏移量 int newScrollX = getScrollX() + deltaX; if(newScrollX < -getChildAt(0).getWidth()) { // 当前屏幕x轴的偏移量超过了菜单的左边界 // 回到菜单的左边界位置 scrollTo(-getChildAt(0).getWidth(), 0); } else if(newScrollX > 0) { // 超过了主界面的右边界 // 回到主界面的右边界 scrollTo(0, 0); } else { scrollBy(deltaX, 0); } break; case MotionEvent.ACTION_UP: int scrollX = getScrollX(); // x轴最新的偏移量 int menuXCenter = -getChildAt(0).getWidth() / 2; // 菜单x轴的中心点 if(scrollX > menuXCenter) { // 切换到主界面 mCurrentScreen = MAIN_SCREEN; } else { // 切换到菜单界面 mCurrentScreen = MENU_SCREEN; } switchScreen(); break; default: break; } return true; } /** * 根据mCurrentScreen切换屏幕 */ private void switchScreen() { int scrollX = getScrollX(); // 当前x轴的偏移量 int dx = 0; if(mCurrentScreen == MAIN_SCREEN) { // 切换到主界面 // scrollTo(0, 0); dx = 0 - scrollX; } else if(mCurrentScreen == MENU_SCREEN) { // 切换到菜单界面 // scrollTo(-getChildAt(0).getWidth(), 0); dx = -getChildAt(0).getWidth() - scrollX; } mScroller.startScroll(scrollX, 0, dx, 0, Math.abs(dx) * 5); invalidate(); // invalidate -> drawChild -> child.draw -> computeScroll } /** * invalidate出发此方法, 更新屏幕的x轴的偏移量 */ @Override public void computeScroll() { if(mScroller.computeScrollOffset()) { // 判断是否正在模拟数据中, true 正在进行 false 数据模拟完毕 scrollTo(mScroller.getCurrX(), 0); invalidate(); // 引起computeScroll的调用 } } /** * 是否显示菜单 * @return */ public boolean isShowMenu() { return mCurrentScreen == MENU_SCREEN; } /** * 隐藏菜单 */ public void hideMenu() { mCurrentScreen = MAIN_SCREEN; switchScreen(); } /** * 显示菜单 */ public void showMenu() { mCurrentScreen = MENU_SCREEN; switchScreen(); } /** * 拦截事件的方法 */ @Override public boolean onInterceptTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: mMostRecentX = (int) ev.getX(); break; case MotionEvent.ACTION_MOVE: int diffX = (int) (ev.getX() - mMostRecentX); if(Math.abs(diffX) > touchSlop) { return true; } break; default: break; } return super.onInterceptTouchEvent(ev); } }
MainActivity.java
package com.jackie.slidemenu; import com.jackie.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.TextView; import android.widget.Toast; public class MainActivity extends Activity implements OnClickListener { private SlideMenu mSlideMenu; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // 去除标题, 需要在setContentView之前调用 requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); mSlideMenu = (SlideMenu) findViewById(R.id.slidemenu); findViewById(R.id.iv_slidemenu_main_back).setOnClickListener(this); } @Override public boolean onCreateOptionsMenu(Menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getMenuInflater().inflate(R.menu.main, menu); return true; } @Override public void onClick(View v) { if(mSlideMenu.isShowMenu()) { mSlideMenu.hideMenu(); } else { mSlideMenu.showMenu(); } } public void click(View v) { TextView tv = (TextView) v; Toast.makeText(this, tv.getText(), 0).show(); } }
系列文章:
Android实现网易新闻客户端效果
Android实现网易新闻客户端侧滑菜单(1)
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。
本文向大家介绍Android实现网易新闻客户端侧滑菜单(1),包括了Android实现网易新闻客户端侧滑菜单(1)的使用技巧和注意事项,需要的朋友参考一下 Android中很多产品(比如360手机助手、网易菜单...)都采用侧滑菜单的展现形式,采用这种展现形式 1、能把更多的展现内容都存放在菜单中 2、设计上也能体现出视觉效果 现在这种交互方式越来越流行了,虽然这种交互方式可以通过自定义组件的方式
本文向大家介绍Android实现网易新闻客户端首页效果,包括了Android实现网易新闻客户端首页效果的使用技巧和注意事项,需要的朋友参考一下 关于实现网易新闻客户端的界面,以前写过很多博客,请参考: Android实现网易新闻客户端效果 Android实现网易新闻客户端侧滑菜单(一) Android实现网易新闻客户端侧滑菜单(二) 今天用ViewPager + FragmentAdapter +
本文向大家介绍Android实现侧滑菜单DrawerLayout,包括了Android实现侧滑菜单DrawerLayout的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android实现侧滑菜单的具体代码,供大家参考,具体内容如下 点击左侧滑动 效果如下 代码实现过程: 1.导入框架build.gradle中 2.xml文件 主要的界面放在DrawerLayout 中,需要强调的是
本文向大家介绍Android中DrawerLayout实现侧滑菜单效果,包括了Android中DrawerLayout实现侧滑菜单效果的使用技巧和注意事项,需要的朋友参考一下 众所周知,android里面我们很熟悉的一个功能,侧滑菜单效果在以前我们大部分都是用的slidingmenu这个开源框架,自从谷歌官方新出的一个DrawerLayout控件之后,越来越多的应用开始使用谷歌的官方的控件写这个效
本文向大家介绍Android实现类似网易新闻选项卡动态滑动效果,包括了Android实现类似网易新闻选项卡动态滑动效果的使用技巧和注意事项,需要的朋友参考一下 本文会实现一个类似网易新闻(不说网易新闻大家可能不知道大概是什么样子)点击超多选项卡,选项卡动态滑动的效果。 首先来看看布局,就是用HorizontalScrollView控件来实现滑动的效果,里面包含了一个布局。 接下来我们在onCre
本文向大家介绍Android实现原生侧滑菜单的超简单方式,包括了Android实现原生侧滑菜单的超简单方式的使用技巧和注意事项,需要的朋友参考一下 先来看看效果图 当你点击菜单可以更改图标,例如点击happy,首页就会变一个笑脸,这个实现的过程超级简单 你需要使用ToolBar与DrawableLayout两个比较新的控件 首先要写三个xml布局文件,我这里的布局文件是使用了include标签嵌入