5.0侧滑菜单(仿QQ)
来源:互联网 发布:ant脚本编译java 编辑:程序博客网 时间:2024/06/06 13:01
效果图:这个效果是类似QQ客户端滑动那样的效果, 应该说差不多一样把.
实现原理: 自定义一个 view 继承 HorizontalScrollView(因为它可左右滑动). view 里面包含 两个布局, 一个在左边(菜单layout),另一个右边(主layout), 通过重写父类方法 来实现 侧滑功能
下面贴布局文件:
<pre name="code" class="html"><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:it="http://schemas.android.com/apk/res/com.it.sideslipmenu" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" tools:context="com.it.sideslipmenu.MainActivity" > <com.it.sideslipmenuview.MyView android:layout_width="match_parent" android:layout_height="match_parent" android:clickable="false" android:scrollbars="none" it:rightPadding="100dp" > <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:background="@drawable/ic_launcher" android:orientation="horizontal" > <include layout="@layout/menu" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <include android:id="@+id/aa" layout="@layout/messagetop" /> <com.it.sideslipmenuview.mViewPager android:id="@+id/vp1" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" android:background="#FFFFFF" > </com.it.sideslipmenuview.mViewPager> <include layout="@layout/bottom" /> </LinearLayout> </LinearLayout> </com.it.sideslipmenuview.MyView><p></RelativeLayout></p><p></p>
最外层是一个RelativeLayout, 它里面只有一个 继承了 horizontalScroll 的 custom view. 因为 horizontalScroll 内 只能有一个子view, 所以我们写一个 linearlayout, 里面包含了 一个左menu, 右边是一个linearlayout 里面 组成的一个 主页面.
自定义属性it:rightPadding: 作用是滑动过后, 让内容区域显示多少的值!
左右布局在这里就不贴了, 左侧就是一些 linearlayout + relativelaout 写出来的., 而右侧 是 头部 +自定义viewpager +底部 组成 也没什么说的
下面来说说程序的核心, 我们的custom view
/** * 5.0新特性 侧滑菜单 * * @author accer * */public class MyView extends HorizontalScrollView {private LinearLayout mWapper;private ViewGroup menu; // menu layoutprivate ViewGroup content; // content layoutprivate int mMenuPaddingRight;private int screenWidth;private boolean once; //是否分配过大小private int menuWidth;/** * 当使用自定义属性的时候 * * @param context * @param attrs */public MyView(Context context, AttributeSet attrs) {super(context, attrs);DisplayMetrics outMetrics = new DisplayMetrics();WindowManager wm = (WindowManager) context.getSystemService(context.WINDOW_SERVICE);wm.getDefaultDisplay().getMetrics(outMetrics);screenWidth = outMetrics.widthPixels;// 获取自定义的属性TypedArray array = context.getTheme().obtainStyledAttributes(attrs,R.styleable.MyView, 0, 0);// 查看有多少个属性int attributeNumber = array.getIndexCount();// 遍历每个属性for (int i = 0; i < attributeNumber; i++) {int attribute = array.getIndex(i);// 判断属性值switch (attribute) {case R.styleable.MyView_rightPadding:mMenuPaddingRight = array.getDimensionPixelSize(attribute,(int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));break;}}array.recycle();}@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {if (!once) { mWapper = (LinearLayout) getChildAt(0); // horizontal 下的 linearlayoutmenu = (ViewGroup) mWapper.getChildAt(0);// linearlayout 下的 left menucontent = (ViewGroup) mWapper.getChildAt(1);// linearlayout home pagemenuWidth = menu.getLayoutParams().width = screenWidth- mMenuPaddingRight;content.getLayoutParams().width = screenWidth;once = true;}super.onMeasure(widthMeasureSpec, heightMeasureSpec);}@Overrideprotected void onLayout(boolean changed, int l, int t, int r, int b) {super.onLayout(changed, l, t, r, b);if (changed) {this.scrollTo(menuWidth, 0);}}/** * 实现抽屉式菜单. 第一个参数 l 就相当于 getScrollX 当滚动条改变的时候 不停的计算偏移量 */@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);float scale = l * 1.0f / menuWidth; // 1 ~ 0 变化ViewHelper.setTranslationX(menu, menuWidth * scale * 0.7f);/** * * QQ侧滑菜单与抽屉式侧滑区别.. * * 1, 内容区域 1.0 ~ 0.7的缩放效果 * * scale : 1.0~0.0 0.7 + 0.3 * scale * * 2, 菜单的偏移量需要修改 * * 3, 菜单显示的时候有缩放以及透明度变化 缩放: 0.7~ 1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0 0.6 * + 0.4 * (1 -scale) ; **/float rightScale = 0.7f + 0.3f * scale;float leftScale = 1.0f - scale * 0.3f;float alpha = 0.6f + 0.4f * (1f - scale);ViewHelper.setPivotX(content, 0);ViewHelper.setPivotY(content, content.getHeight() / 2);ViewHelper.setScaleX(content, rightScale);ViewHelper.setScaleY(content, rightScale);ViewHelper.setScaleX(menu, leftScale);ViewHelper.setScaleY(menu, leftScale);ViewHelper.setAlpha(menu, alpha);}@Overridepublic boolean onTouchEvent(MotionEvent ev) {int action = ev.getAction();switch (action) {case MotionEvent.ACTION_UP:int scrollX = getScrollX();if (scrollX >= menuWidth / 2) {this.smoothScrollTo(menuWidth, 0);} else {this.smoothScrollTo(0, 0);}return true;}return super.onTouchEvent(ev);}}
下面来说每个方法的作用 .
onMeasure 中 需要计算子View 的宽和高, 以及设置自己的宽和高.
onLayout 中 计算 子 view 的位置
onTouchEvent 触摸时间,根据 offset 判断是否 切换
onScrollChanged 监听滑动状态, 方法内用到ViewHelper 是一个动画切换的jar包 (nineOldAndroids)
写的不好 忘见谅.
0 0
- 5.0侧滑菜单(仿QQ)
- 5.0侧滑菜单(仿QQ)
- 仿QQ侧滑菜单
- 仿QQ侧滑菜单
- 仿 qq 侧滑菜单
- 仿QQ侧滑菜单
- 仿QQ侧滑菜单
- 仿QQ侧滑菜单
- 仿QQ侧滑菜单
- 仿qq最新侧滑菜单
- 【IOS】仿QQ侧滑菜单
- 仿QQ侧滑菜单效果
- 仿QQ侧滑菜单效果
- 仿SlidingMenu自定义QQ侧滑菜单
- DrawableLayout实现仿QQ侧滑菜单
- Android仿QQ侧滑菜单
- iOS QQ侧滑菜单(高仿)
- Android 仿QQ侧滑菜单
- FLV with H264 AAC Intro
- 开始cocos-2d引擎的认知
- 秒杀多线程第四篇 一个经典的多线程同步问题
- Java+PHP整合,创业网站初期选型发展之路
- 关于使用sts-bundle开发SpringMVC工程时如何应用复制而不是下载的repository
- 5.0侧滑菜单(仿QQ)
- 秒杀多线程第五篇 经典线程同步 关键段CS
- C++继承(3) - 多重继承
- 最简单快捷的安装firefox&chromium的flash player插件
- 秒杀多线程第六篇 经典线程同步 事件Event
- (八)Unity5.0新特性------IL2CPP Internals: 生成的代码之旅
- 自定义ListView适配器继承BaseAdapter
- 秒杀多线程第七篇 经典线程同步 互斥量Mutex
- 孙鑫第一课