Android QQ5.0侧滑菜单
2015-06-27 00:00
579 查看
摘要: 地上有100块钱,你捡不捡,那你还等什么,赶紧的mark
2.自定义viewgroup
3.给注册监听事件,添加动画效果
ps:布局随意发挥,不用讲究,只要布局样式出来就好
ps:这里有一个include布局,也是很简单的,如果有的朋友不懂,可以去上一篇博客http://blog.csdn.net/u011546655/article/details/46507591 这里有详细解释,相信你能有意外收获。
ps:自定义控件中,很多注释,我这里也不多说了,已经非常清楚了
这里有一个东西,忘记了解释,那就是有后面用到了一个封装成jar的动画包,里面包含了很多动画,当然,如果你说,你想自己动手写,那也是可以的,分分钟ok,如果你不怎么懂,那么也是分分钟OK的,拿起你的小手,copy 这个jar包,复制黏贴,its ok ,那不也是很简单的,当然,我也写了一篇关于动画的博客,内容很初级,也有很多没有概括的,你也可以去看看,我后期也会维护这篇博客:http://blog.csdn.net/u011546655/article/details/46483271
Demo 下载地址:http://download.csdn.net/detail/u011546655/8823439
转载请标明出处:http://blog.csdn.net/u011546655/article/details/46564709
背景
相信大家用过QQ的人,都会知道QQ有这样的一个功能,那就是他的菜单,感觉就像抽屉一样被拉出来的感觉,感觉很拉风啊,酷酷的,如果你有一种想要把它给弄清楚,想明白,这是一个好东西,你要把它变成自己的,那么现在就是你的机会,也在此恭喜你,你终于初步具有一个向中级工程师迈进的门票了,因为你已经跨出第一步了。一:效果图,走一走,天下我有
二:实现步骤
1.菜单和内容布局的实现2.自定义viewgroup
3.给注册监听事件,添加动画效果
三:示例源码
①菜单布局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:layout_width="70dp" android:layout_height="70dp" android:layout_above="@+id/layout" android:layout_marginBottom="20dp" android:layout_marginLeft="60dp" android:src="@drawable/qq_head" /> <LinearLayout android:id="@+id/layout" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:layout_marginLeft="20dp" android:orientation="vertical" > <RelativeLayout android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginTop="20dp" > <ImageView android:id="@+id/iamge1" android:layout_width="50dp" android:layout_height="50dp" android:src="@drawable/img_1" /> <TextView android:id="@+id/left_menu_message1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:layout_toRightOf="@id/iamge1" android:text="我是第一个item" android:textColor="#ffffff" android:textSize="12sp" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginTop="20dp" > <ImageView android:id="@+id/iamge2" android:layout_width="50dp" android:layout_height="50dp" android:src="@drawable/img_2" /> <TextView android:id="@+id/left_menu_message2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:layout_toRightOf="@id/iamge2" android:text="我是第二个item" android:textColor="#ffffff" android:textSize="12sp" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginTop="20dp" > <ImageView android:id="@+id/iamge3" android:layout_width="50dp" android:layout_height="50dp" android:src="@drawable/img_3" /> <TextView android:id="@+id/left_menu_message3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:layout_toRightOf="@id/iamge3" android:text="我是第三个item" android:textColor="#ffffff" android:textSize="12sp" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginTop="20dp" > <ImageView android:id="@+id/iamge4" android:layout_width="50dp" android:layout_height="50dp" android:src="@drawable/img_4" /> <TextView android:id="@+id/left_menu_message4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:layout_toRightOf="@id/iamge4" android:text="我是第四个item" android:textColor="#ffffff" android:textSize="12sp" /> </RelativeLayout> <RelativeLayout android:layout_width="match_parent" android:layout_height="20dp" android:layout_marginTop="20dp" > <ImageView android:id="@+id/iamge5" android:layout_width="50dp" android:layout_height="50dp" android:src="@drawable/img_5" /> <TextView android:id="@+id/left_menu_message5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerInParent="true" android:layout_toRightOf="@id/iamge5" android:text="我是第五个item" android:textColor="#ffffff" android:textSize="12sp" /> </RelativeLayout> </LinearLayout> </RelativeLayout>
ps:布局随意发挥,不用讲究,只要布局样式出来就好
②内容布局
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <com.qq_50.view.SideSlipping android:id="@+id/menu" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/background" android:scrollbars="none" > <LinearLayout android:layout_width="wrap_content" android:layout_height="match_parent" android:orientation="horizontal" > <include layout="@layout/left_meun" /> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/qq" > <Button android:id="@+id/left_menu" android:layout_width="80dp" android:layout_height="40dp" android:layout_marginTop="20dp" android:text="菜单" android:textColor="#f5f5f5" android:textSize="12sp" /> </LinearLayout> </LinearLayout> </com.qq_50.view.SideSlipping> </RelativeLayout>
ps:这里有一个include布局,也是很简单的,如果有的朋友不懂,可以去上一篇博客http://blog.csdn.net/u011546655/article/details/46507591 这里有详细解释,相信你能有意外收获。
③自定义控件
package com.qq_50.view; import android.annotation.SuppressLint; import android.content.Context; import android.util.AttributeSet; import android.util.DisplayMetrics; import android.view.MotionEvent; import android.view.ViewGroup; import android.view.WindowManager; import android.widget.HorizontalScrollView; import android.widget.LinearLayout; import com.nineoldandroids.view.ViewHelper; import com.qq_50.tools.ConverterUtils; /** * 自定义的侧滑控件 * * @author zengtao 2015年5月6日 下午8:43:12 */ @SuppressLint("ClickableViewAccessibility") public class SideSlipping extends HorizontalScrollView { private LinearLayout mLayout; private ViewGroup mMenu;// 侧面菜单 private ViewGroup mContent;// 正面内容 private int mScreenWidth; // 屏幕宽度 private int mMenuRightPadding = 30; // 菜单距离右边的距离 private int mMenuWidth; // 菜单的宽度 private boolean once; // 使得onMeasure只被加载一次 private boolean isOpen; // 是否开启菜单 public SideSlipping(Context context) { super(context); } public SideSlipping(Context context, AttributeSet attrs) { super(context, attrs); init(context); } public SideSlipping(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } /** * 未使用自定义属性的时候,调用 * * @param context 上下文 */ private void init(Context context) { WindowManager wManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE); DisplayMetrics mDisplayMetrics = new DisplayMetrics(); wManager.getDefaultDisplay().getMetrics(mDisplayMetrics); mScreenWidth = mDisplayMetrics.widthPixels; mMenuRightPadding = ConverterUtils.dpToSp(context, 100); } /** * 1.设置子view的宽和高 设置自己的宽和高 */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 防止Measure被多次调用 if (!once) { // 布局HorizontalScrollView下有一个LinearLayout,LinearLayout下中有一个Menu和Content mLayout = (LinearLayout) getChildAt(0); mMenu = (ViewGroup) mLayout.getChildAt(0); mContent = (ViewGroup) mLayout.getChildAt(1); // 设置子view的宽和高 mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding; mContent.getLayoutParams().width = mScreenWidth; once = true; } super.onMeasure(widthMeasureSpec, heightMeasureSpec); } /** * 2.决定view的位置,通过设置偏移量,将menu隐藏 */ @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { super.onLayout(changed, l, t, r, b); if (changed) { this.scrollTo(mMenuWidth, 0); } } /** * 3.根据手势判断,到底是菜单隐藏还是内容隐藏 */ @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_UP: int x = getScrollX(); if (x > mMenuWidth / 2) { this.smoothScrollTo(mMenuWidth, 0); isOpen = false; } else { this.smoothScrollTo(0, 0); isOpen = true; } return true; } return super.onTouchEvent(ev); } /** * 打开菜单 */ public void openMenu() { if (isOpen) return; this.smoothScrollTo(0, 0); isOpen = true; } /** * 关闭菜单 */ public void closeMenu() { if (!isOpen) return; this.smoothScrollTo(mMenuWidth, 0); isOpen = false; } /** * 切换菜单功能 */ public void toggle() { if (isOpen) { closeMenu(); } else { openMenu(); } } /** * 滑动的时候的动画效果 */ @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); /* * 区别1:内容区域1.0-0.7 scale:1.0 ~ 0.0 公式:0.7 + 0.3 * scale * * 区别2:菜单偏移量需要修改 * * 区别3:菜单缩放:0.7 ~ 1.0 公式:1.0f - scale * 0.3f * * 区别4:菜单透明度 0.6 ~ 1.0 公式:0.6 + 0.4 *(1 - scale) */ // 1.计算的的偏移值 float scale = l * 1.0f / mMenuWidth; // 计算出偏移量 float rightScale = 0.7f + 0.3f * scale; // 内容区域 float leftScale = 1.0f - scale * 0.3f; // 菜单缩放 float leftAlpha = 0.6f + 0.4f * (1 - scale); // 菜单透明度 // 2.设置内容区域偏移 ViewHelper.setTranslationX(mMenu, mMenuWidth * scale); // 设置动画属性,偏移=总过宽度*偏移量 ViewHelper.setPivotX(mContent, 0); ViewHelper.setPivotY(mContent, mContent.getHeight() / 2); ViewHelper.setScaleX(mContent, rightScale); ViewHelper.setScaleY(mContent, rightScale); // 3.设置菜单区域 ViewHelper.setScaleX(mMenu, leftScale); ViewHelper.setScaleY(mMenu, leftScale); ViewHelper.setAlpha(mMenu, leftAlpha); } }
ps:自定义控件中,很多注释,我这里也不多说了,已经非常清楚了
④主界面调用:
package com.qq_50.ui; import android.app.Activity; import android.os.Bundle; import android.view.View.OnClickListener; import android.view.View; import android.view.Window; import android.widget.Button; import com.qq_50.view.SideSlipping; /** * 主界面 * * @author zengtao 2015年5月7日 下午3:10:04 */ public class MainActivity extends Activity { private Button left_menu; private SideSlipping mSideSlipping; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initView(); initLinstener(); } // 初始化试图 private void initView() { left_menu = (Button) findViewById(R.id.left_menu); mSideSlipping = (SideSlipping) findViewById(R.id.menu); } // 初始化监听事件 private void initLinstener() { left_menu.setOnClickListener(onClickListener); } // 点击事件 OnClickListener onClickListener = new OnClickListener() { @Override public void onClick(View v) { switch (v.getId()) { case R.id.left_menu: mSideSlipping.toggle(); break; default: break; } } }; }
四:总结
其实以上就分分钟完成了一个QQ5.0侧滑菜单的实现,看起来非常简单,如果我告诉你,地上有100块钱,你会去捡起来么,如果是,那么,你还在等什么,赶紧把这个玩意拿到手吧。这里有一个东西,忘记了解释,那就是有后面用到了一个封装成jar的动画包,里面包含了很多动画,当然,如果你说,你想自己动手写,那也是可以的,分分钟ok,如果你不怎么懂,那么也是分分钟OK的,拿起你的小手,copy 这个jar包,复制黏贴,its ok ,那不也是很简单的,当然,我也写了一篇关于动画的博客,内容很初级,也有很多没有概括的,你也可以去看看,我后期也会维护这篇博客:http://blog.csdn.net/u011546655/article/details/46483271
Demo 下载地址:http://download.csdn.net/detail/u011546655/8823439
相关文章推荐
- 从源码安装Mysql/Percona 5.5
- asp.net 抓取网页源码三种实现方法
- JS小游戏之仙剑翻牌源码详解
- JS小游戏之宇宙战机源码详解
- jQuery源码分析之jQuery中的循环技巧详解
- 本人自用的global.js库源码分享
- java中原码、反码与补码的问题分析
- PHP网页游戏学习之Xnova(ogame)源码解读(六)
- C#获取网页HTML源码实例
- PHP网页游戏学习之Xnova(ogame)源码解读(八)
- PHP网页游戏学习之Xnova(ogame)源码解读(四)
- JS小游戏之极速快跑源码详解
- JS小游戏之象棋暗棋源码详解
- Android开源组件SlidingMenu侧滑菜单使用介绍
- 基于Android设计模式之--SDK源码之策略模式的详解
- Android游戏源码分享之2048
- C语言借助EasyX实现的生命游戏源码
- C实现的非阻塞方式命令行端口扫描器源码
- PHP网页游戏学习之Xnova(ogame)源码解读(七)
- PHP网页游戏学习之Xnova(ogame)源码解读(一)