仿QQ侧滑

模仿QQ的侧滑菜单

仿QQ侧滑菜单主要用到开源控件SlidingMenu。

自定义控件SlidingMenu

/**
* 侧滑
*
* @author Administrator
*
*/
public class SlidingMenu extends HorizontalScrollView {
private LinearLayout mWapper;
private ViewGroup mMenu;
private ViewGroup mContent;
private int mScreenWidth;

private int mMenuWidth;
// dp
private int mMenuRightPadding = 50;

private boolean once;

public  boolean isOpen;
public static final int[] SlidingMenu = { 0x7f010000 };

/**
* 未使用自定义属性时，调用
*
* @param context
* @param attrs
*/
public SlidingMenu(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}

/**
* 当使用了自定义属性时，会调用此构造方法
*
* @param context
* @param attrs
* @param defStyle
*/
public SlidingMenu(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// 获取我们定义的属性
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);
switch (attr) {
case R.styleable.SlidingMenu_rightPadding:
mMenuRightPadding = a.getDimensionPixelSize(attr,
(int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 50, context
.getResources().getDisplayMetrics()));
break;
}
}
a.recycle();

WindowManager wm = (WindowManager) context
.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics outMetrics = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(outMetrics);
mScreenWidth = outMetrics.widthPixels;

}

public SlidingMenu(Context context) {
this(context, null);
}

/**
* 设置子View的宽和高 设置自己的宽和高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (!once) {
mWapper = (LinearLayout) getChildAt(0);
mMenu = (ViewGroup) mWapper.getChildAt(0);
mContent = (ViewGroup) mWapper.getChildAt(1);
mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth
- mMenuRightPadding;
mContent.getLayoutParams().width = mScreenWidth;
once = true;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

/**
* 通过设置偏移量，将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);
}
}

@Override
public boolean onTouchEvent(MotionEvent ev) {

int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_UP:
// 隐藏在左边的宽度
int scrollX = getScrollX();
if (scrollX >= mMenuWidth / 4) {//scrollX >= 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;
}

/**
* 切换菜单
*/
p
4000
ublic 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);
float scale = l * 1.0f / mMenuWidth; // 1 ~ 0

/**
* 区别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 leftAlpha = 0.6f + 0.4f * (1 - scale);

// 调用属性动画，设置TranslationX
ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.8f);

ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
ViewHelper.setAlpha(mMenu, leftAlpha);
// 设置content的缩放的中心点
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);

}

}

SlidingMenu需要在values文件夹创建attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

<attr name="rightPadding" format="dimension"></attr>

<declare-styleable name="SlidingMenu">
<attr name="rightPadding"></attr>
</declare-styleable>

</resources>

自定义控件SlidingMenu还需要jar包 nineoldandroids-2.4.0.jar

布局文件

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:hyman="http://schemas.android.com/apk/res/com.example.sideslipe"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<com.example.sideslipe.SlidingMenu
android:id="@+id/slidingmenu"
android:layout_width="match_parent"
android:layout_height="match_parent"
hyman:rightPadding="100dp"
android:background="#fefefe"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
>
<include layout="@layout/left"/>
<include layout="@layout/middle"/>
</LinearLayout>

</com.example.sideslipe.SlidingMenu>

</RelativeLayout>

侧滑菜单布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<include android:id="@+id/left" layout="@layout/leftmenu" android:visibility="gone"/>

</LinearLayout>

leftmenu.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center_vertical"
>
<LinearLayout
android:id="@+id/start"
android:layout_width="match_parent"
android:layout_height="45dp"
android:orientation="horizontal"
>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="开始"
android:layout_gravity="center_vertical"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/end"
android:layout_width="match_parent"
android:layout_height="45dp"
android:orientation="horizontal"
>

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="结束"
android:layout_gravity="center_vertical"
/>
</LinearLayout>
</LinearLayout>

middle.xml布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fefefe"
android:orientation="vertical" >

<LinearLayout
android:layout_width="match_parent"
android:layout_height="50dp"
android:orientation="horizontal"
android:background="#626262"
>

<ImageView
android:id="@+id/img"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@drawable/ic_launcher"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="QQ侧滑"
android:layout_gravity="center_vertical|center_horizontal"
/>
</LinearLayout>
<ScrollView
android:id="@+id/scrollview"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fefefe"
android:orientation="vertical"
android:scrollbars="none"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:background="@drawable/qq"
>
</LinearLayout>
</ScrollView>
</LinearLayout>

程序代码

public class MainActivity extends Activity implements OnClickListener{
private SlidingMenu slidingMenu;
private LinearLayout li_s,li_end;
private ImageView
d3c5
img;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
slidingMenu=(SlidingMenu) findViewById(R.id.slidingmenu);
ScrollView scroll = (ScrollView) findViewById(R.id.scrollview);
scroll.smoothScrollTo(0, 0);
li_s=(LinearLayout) findViewById(R.id.start);
li_end=(LinearLayout) findViewById(R.id.end);
img=(ImageView) findViewById(R.id.img);
img.setOnClickListener(this);
li_s.setOnClickListener(this);
li_end.setOnClickListener(this);
findViewById(R.id.left).setVisibility(View.VISIBLE);
}

@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) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.img:
slidingMenu.toggle();
break;
case R.id.start:
Toast.makeText(getApplicationContext(), "开始", 0).show();
break;
case R.id.end:
Toast.makeText(getApplicationContext(), "结束", 0).show();
break;
default:
break;
}
}

}

特别注意：

**如果主页布局不用ScrollView包裹，代码里面没有ScrollView scroll = (ScrollView) findViewById(R.id.scrollview);

scroll.smoothScrollTo(0, 0); 在主页可以响应侧滑菜单的点击事件！**

仿QQ侧滑demo下载地址：

http://download.csdn.net/detail/yy471101598/9110805