android仿QQ的SlideMenu

这其实很简单就可以实现,只需要自定义一个View继承自HorizontalScrollView

1,新建一个项目,再新建一个MySlideMenu继承HorizontalScrollView

public class MySlideMenu extends HorizontalScrollView {  //继承自横向可滚动ScrollView

private int mScreenWidth;  //屏幕宽度

private int mMenuRightPadding;  //菜单栏的右边距

//菜单栏的宽度

private int mMenuWidth;

private int mMenuHalfWidth;  //菜单栏的半边宽度

private boolean isOpen;  //标志当前菜单栏是否打开

private boolean isOnce;  //是否第一次打开

private ViewGroup mContent;  //内容页面

private ViewGroup mMenu;   //菜单页面

public MySlideMenu(Context context, AttributeSet attrs){

this(context, attrs, 0);

}

public MySlideMenu(Context context, AttributeSet attrs, int defStyle) {

super(context, attrs, defStyle);

mScreenWidth=ScreenUtils.getScreenWidth(context);

TypedArray a=context.getTheme().obtainStyledAttributes(attrs,

R.styleable.SlidingMenu, defStyle, 0);

int n = a.getIndexCount();

for (int i = 0; i < n; i++) {

int attr=a.getIndex(i);

if(attr==R.styleable.SlidingMenu_rightPadding){

mMenuRightPadding = a.getDimensionPixelSize(attr,

(int) TypedValue.applyDimension(

TypedValue.COMPLEX_UNIT_DIP, 50f,

getResources().getDisplayMetrics()));// 默认为10DP

}

}

a.recycle();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

if(!isOnce){  //只允许获得第一次的  测量结果

LinearLayout ll=(LinearLayout) getChildAt(0);

mMenu=(ViewGroup) ll.getChildAt(0);  //从线性布局中获得 Menu布局

mContent=(ViewGroup) ll.getChildAt(1);

mMenuWidth=mScreenWidth-mMenuRightPadding;

mMenuHalfWidth=mMenuWidth/2;

mMenu.getLayoutParams().width=mMenuWidth;

mContent.getLayoutParams().width=mScreenWidth;

}

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

}

@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);    //将菜单隐藏

isOnce=true;

}

}

//打开菜单

public void openMenu(){

if(isOpen){

return;

}

this.scrollTo(0, 0);

isOpen=true;

}

//关闭菜单

public void closeMenu(){

if(!isOpen){

return;

}

this.scrollTo(mMenuWidth,0);

isOpen=false;

}

//切换菜单开关状态

public void toggle(){

if(isOpen){

closeMenu();

}

else{

openMenu();

}

}

//监听手势滑动

@Override

public boolean onTouchEvent(MotionEvent ev) {

switch (ev.getAction()) {

case MotionEvent.ACTION_UP:

int scrollX=getScrollX(); //获取滑动的横坐标

if(scrollX>mMenuHalfWidth){   //判断 有没有滑倒一半的距离

this.smoothScrollTo(mMenuWidth, 0);  //隐藏

isOpen=false;

}

else{

this.smoothScrollTo(0, 0);//展开

isOpen=true;

}

return true;

}

return super.onTouchEvent(ev);

}

//监听滑动时   菜单视图 和 滑动视图出现相应的放大缩小的特效

@Override

protected void onScrollChanged(int l, int t, int oldl, int oldt) {

super.onScrollChanged(l, t, oldl, oldt);

float scale = l * 1.0f / mMenuWidth;

float leftScale = 1 - 0.3f * scale;

float rightScale = 0.8f + scale * 0.2f;

ViewHelper.setScaleX(mMenu, leftScale);

ViewHelper.setScaleY(mMenu, leftScale);

ViewHelper.setAlpha(mMenu, 0.6f + 0.4f * (1 - scale));

ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.7f);

ViewHelper.setPivotX(mContent, 0);

ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);

ViewHelper.setScaleX(mContent, rightScale);

ViewHelper.setScaleY(mContent, rightScale);

}

}

这里面其实就是用到了一个横向的ScrollView,并且在滑动时加入了一些动画效果而已,但ViewHelper并不是andorid API提供的,而是需要下载nineoldandroids-2.4.0.jar包.

2,新建一个屏幕辅助类

/**

* 获得屏幕相关的辅助类

*

* @author zhy

*

*/

public class ScreenUtils

{

private ScreenUtils()

{

/* cannot be instantiated */

throw new UnsupportedOperationException("cannot be instantiated");

}

/**

* 获得屏幕高度

*

* @param context

* @return

*/

public static int getScreenWidth(Context context)

{

WindowManager wm = (WindowManager) context

.getSystemService(Context.WINDOW_SERVICE);

DisplayMetrics outMetrics = new DisplayMetrics();

wm.getDefaultDisplay().getMetrics(outMetrics);

return outMetrics.widthPixels;

}

/**

* 获得屏幕宽度

*

* @param context

* @return

*/

public static int getScreenHeight(Context context)

{

WindowManager wm = (WindowManager) context

.getSystemService(Context.WINDOW_SERVICE);

DisplayMetrics outMetrics = new DisplayMetrics();

wm.getDefaultDisplay().getMetrics(outMetrics);

return outMetrics.heightPixels;

}

/**

* 获得状???栏的高??

*

* @param context

* @return

*/

public static int getStatusHeight(Context context)

{

int statusHeight = -1;

try

{

Class<?> clazz = Class.forName("com.android.internal.R$dimen");

Object object = clazz.newInstance();

int height = Integer.parseInt(clazz.getField("status_bar_height")

.get(object).toString());

statusHeight = context.getResources().getDimensionPixelSize(height);

} catch (Exception e)

{

e.printStackTrace();

}

return statusHeight;

}

/**

* 获取当前屏幕截图，包含状态栏

*

* @param activity

* @return

*/

public static Bitmap snapShotWithStatusBar(Activity activity)

{

View view = activity.getWindow().getDecorView();

view.setDrawingCacheEnabled(true);

view.buildDrawingCache();

Bitmap bmp = view.getDrawingCache();

int width = getScreenWidth(activity);

int height = getScreenHeight(activity);

Bitmap bp = null;

bp = Bitmap.createBitmap(bmp, 0, 0, width, height);

view.destroyDrawingCache();

return bp;

}

/**

* 获取当前屏幕截图，不包含状???栏

*

* @param activity

* @return

*/

public static Bitmap snapShotWithoutStatusBar(Activity activity)

{

View view = activity.getWindow().getDecorView();

view.setDrawingCacheEnabled(true);

view.buildDrawingCache();

Bitmap bmp = view.getDrawingCache();

Rect frame = new Rect();

activity.getWindow().getDecorView().getWindowVisibleDisplayFrame(frame);

int statusBarHeight = frame.top;

int width = getScreenWidth(activity);

int height = getScreenHeight(activity);

Bitmap bp = null;

bp = Bitmap.createBitmap(bmp, 0, statusBarHeight, width, height

- statusBarHeight);

view.destroyDrawingCache();

return bp;

}

}

其实就用到了一个获取屏幕宽度的方法.

3.看看activity_main.xml

<com.example.mytest.MySlideMenu xmlns:android="http://schemas.android.com/apk/res/android"

android:id="@+id/id_menu"

xmlns:tools="http://schemas.android.com/tools"

xmlns:zhy="http://schemas.android.com/apk/res/com.example.mytest"

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:background="@drawable/img_frame_background"

android:scrollbars="none"

zhy:rightPadding="100dp" >

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="fill_parent"

android:orientation="horizontal" >

<include layout="@layout/layout_menu" />

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/qq" >

<Button

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:onClick="toggleMenu"

android:text="切换菜单" />

</LinearLayout>

</LinearLayout>

</com.example.mytest.MySlideMenu>

xml视图中就包含了两个View,一个是Menu,一个是Content.

4,再看Menu视图

<?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"

android:background="#0000" >

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:orientation="vertical" >

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content" >

<ImageView

android:id="@+id/one"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_marginTop="20dp"

android:src="@drawable/img_1" />

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_toRightOf="@id/one"

android:text="第1个Item"

android:textColor="#f0f0f0"

android:textSize="20sp" />

</RelativeLayout>

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content" >

<ImageView

android:id="@+id/two"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_marginTop="20dp"

android:src="@drawable/img_2" />

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_toRightOf="@id/two"

android:text="第2个Item"

android:textColor="#f0f0f0"

android:textSize="20sp" />

</RelativeLayout>

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content" >

<ImageView

android:id="@+id/three"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_marginTop="20dp"

android:src="@drawable/img_3" />

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_toRightOf="@id/three"

android:text="第3个Item"

android:textColor="#f0f0f0"

android:textSize="20sp" />

</RelativeLayout>

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content" >

<ImageView

android:id="@+id/four"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_marginTop="20dp"

android:src="@drawable/img_4" />

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_toRightOf="@id/four"

android:text="第一个Item"

android:textColor="#f0f0f0"

android:textSize="20sp" />

</RelativeLayout>

<RelativeLayout

android:layout_width="match_parent"

android:layout_height="wrap_content" >

<ImageView

android:id="@+id/five"

android:layout_width="50dp"

android:layout_height="50dp"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_marginTop="20dp"

android:src="@drawable/img_5" />

<TextView

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_centerVertical="true"

android:layout_marginLeft="20dp"

android:layout_toRightOf="@id/five"

android:text="第5个Item"

android:textColor="#f0f0f0"

android:textSize="20sp" />

</RelativeLayout>

</LinearLayout>

</RelativeLayout>

也就是一些简单的线性排列而已.

5,最后一步,打开MainActivity.java

public class MainActivity extends Activity

{

private MySlideMenu mMenu;

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);

mMenu = (MySlideMenu) findViewById(R.id.id_menu);

}

public void toggleMenu(View view)

{

mMenu.toggle();

}

}

如此,轻松实现QQ侧滑效果.

来自为知笔记(Wiz)

时间： 2024-08-28 00:29:27

android仿QQ的SlideMenu的相关文章

Android 仿QQ浏览器WebView，滑动隐藏显示ActionBar效果

Android 仿QQ浏览器,滑动隐藏显示ActionBar效果. 往上推,是一个ScrollView会将,actionbar以及内容往上推,当actionbar消失后,将滚动Webview的内容. 此效果是基于QuickReturnHeader源码,修改而来的,代码也不多,实现方法比较简单. 直接上demo:http://download.csdn.net/detail/xufeifandj/8388493 直接看效果图:

android 仿QQ手机版

千人2群开启,欢迎大家围观打酱油,群号145667827 您当前位置 : JavaApk-安卓应用游戏源码服务专家 » QQ » Android项目源码界面超级华丽的仿QQ最新版本 Android项目源码界面超级华丽的仿QQ最新版本 05 2014.05 作者:JavaApk   发布:2014-05-05 12:40   字符数:222   分类:QQ, VIP源码, 即时聊天   阅读: 2,392 次   18条评论 本项目是一个高仿QQ最新版本的项目,界面超级华丽,使用了大量的自定义控件

Android仿qq回弹阻尼ScrollView

仿qq写一个可以来回弹的ScrollView. 只需要重写ScrollView: public class MyScrollView extends ScrollView {     // y方向上当前触摸点的前一次记录位置     private int previousY = 0;     // y方向上的触摸点的起始记录位置     private int startY = 0;     // y方向上的触摸点当前记录位置     private int currentY = 0;    

Android 仿QQ、新浪相册的实现

在移动应用中,很多时候都会用到图片选择.图片裁剪等功能.最近我也在准备一个开源的相册项目,以方便以后开发应用的时候使用,也尽可能的方便需要的人.一个完整的相册,应该包含相册列表.图片列表.图片的单选和多选.图片的裁剪.拍照.多选图片的大图预览等功能.这也是我这个项目将要包含的功能.在本篇博客中,将会讲述下我在这个项目中相册列表和图片列表的大致实现. 实现效果 结合几个常用的APP中的相册效果,当前项目中已经实现了一些基本的功能和UI,在后续完善的过程中还会有所变动.项目在Github上开源,欢迎

android 仿QQ气泡聊天界面

1.现在的QQ,微信等一些APP的聊天界面都是气泡聊天界面,左边是接收到的消息,右边是发送的消息, 这个效果其实就是一个ListView在加载它的Item的时候,分别用了不同的布局xml文件. 2.效果图(其中的聊天信息框是采用了.9.png的图片): 3.对中间聊天的的listView进行说明: 左边Item的xml文件效果如下: 右边Item的xml文件效果如下: 4.在加载ListView当中重写getView()方法,通过判断消息传入类型,来使item加载哪一个xml文件: 自定义ada

Android 仿QQ消息界面

values 下面 dimens.xml <resources> <!-- Default screen margins, per the Android Design guidelines. --> <dimen name="activity_horizontal_margin">16dp</dimen> <dimen name="activity_vertical_margin">16dp</di

Android仿QQ界面

最近这几天,一直跟着朋友们聚会什么的,没怎么做项目,今天总算是有时间开电脑继续做我的项目了.下面我就把我做的效果展示一下. 这是模仿了qq的界面效果.因为代码比较长就不粘贴代码了.需要的小伙伴可以跟我私聊.

Android 仿QQ首页的消息和电话的切换，首页的头部(完全用布局控制)

首先贴上七个控制布局代码 1.title_text_sel.xml 字体颜色的切换 放到color文件夹下面 <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_checked="true" a

Android仿qq下拉刷新及向左滑动列表----PullToRefresh, SwipeMenuListView开源项目整合

Github链接:https://github.com/licaomeng/Android-PullToRefresh-SwipeMenuListView-Sample PullToRefresh是一个非常完美的下拉刷新的开源项目,SwipeMenuListView是一个向左滑动ListView中item实现可以删除功能的开源项目.笔者在此将两套开源项目整合形成一套,类似于手机qq那样同时支持下拉刷新和向左滑动的列表.效果如下: 版权声明:本文为博主原创文章,未经博主允许不得转载.