侧滑菜单（三）

摘要: 仿qq5.0版本

CustomSidingView.class

/**
*
*/
package com.test.sildingmenu.view;

import com.nineoldandroids.view.ViewHelper;
import com.test.sildingmenu.R;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.view.MotionEvent;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;

/**
* @author wanggenping
* 自定义属性(普通侧滑菜单)
*/
public class CustomSidingView extends HorizontalScrollView {

private LinearLayout layout;// 包含在SidingView内的LinearLayout
private ViewGroup mMenu;// 左侧菜单
private ViewGroup mContent;// 主页面
private int mScreenWidth;// 屏幕宽度

private int mMenuWidth;

// dp
private int mMenuRightPadding;

private boolean once;
private boolean isOpen;

/**
* 未使用自定义属性时调用此构造方法
*
* @param context
* @param attrs
*            (属性)
*/
public CustomSidingView(Context context, AttributeSet attrs) {
this(context, attrs, 0);

}

/**
* 当使用了自定义的属性时会调用此构造方法
*
* @param context
* @param attrs
* @param defStyle
*/

public CustomSidingView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// 获取我们定义的属性
TypedArray array = context.getTheme().obtainStyledAttributes(attrs,
R.styleable.SildingMenu, defStyle, 0);

//自定义属性中的个数
int n = array.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = array.getIndex(i);
switch (attr) {
case R.styleable.SildingMenu_rightPadding:
mMenuRightPadding = array.getDimensionPixelSize(attr,
(int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, 50, context
.getResources().getDisplayMetrics()));

break;

default:
break;
}
}

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

public CustomSidingView(Context context) {
this(context, null);

}

/**
* 设置子View的宽和高 设置自己的宽和高
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 由于onMeasure()方法可能被多长调用，所以我们这里只设置一次宽和高，不多长设置
if (!once) {
layout = (LinearLayout) getChildAt(0);
// layout中的第一个元素（即：menu）
mMenu = (ViewGroup) layout.getChildAt(0);
// layout中的第二个元素（即：主界面）
mContent = (ViewGroup) layout.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) {
// menu初始状态，隐藏
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 / 2) {
// 带有动画的滑动
this.smoothScrollTo(mMenuWidth, 0);
isOpen = false;
} else {
// 显示menu
this.smoothScrollTo(0, 0);
isOpen = true;
}
return true;

}
return super.onTouchEvent(ev);
}
/**
*打开菜单
*/
public void openMenu(){
if(isOpen){
return;
}else{
this.smoothScrollTo(0, 0);
isOpen = true;
}
}
/**
*关闭菜单
*/
public void closeMenu(){
if(!isOpen){
return;
}else{
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) {
//        l = getScrollX();
super.onScrollChanged(l, t, oldl, oldt);
float scale = l*1.0f/mMenuWidth;//1-0
//引入属性动画的jar包（由于属性动画支持3.0以上，所以需要向下兼容的话需要引入nineoldandroids-2.4.0.jar包）

/*
qq版侧滑与抽屉式侧滑的区别
区别1；内容区域1.0-0.7的缩放
scale:1.0-0.0
0.7+0.3*scale

区别2：菜单的偏移量需要修改

区别3：菜单显示时有缩放及透明度的变化
缩放0.7-1.0
1.0-0.3*scale
透明度：0.6-1.0
1。0-0.4*scale
*/

ViewHelper.setTranslationX(mMenu, mMenuWidth*scale*0.7f);//qq方式的偏移量
//内容区域的缩放
float rightScale = 0.7f+0.3f*scale;
//设置缩放中心点，如果不设置会平移到屏幕右边缘（由于缩放的原因）
ViewHelper.setPivotX(mContent, 0);
ViewHelper.setPivotY(mContent, mContent.getHeight()/2);
ViewHelper.setScaleX(mContent, rightScale);
ViewHelper.setScaleY(mContent, rightScale);
//菜单的缩放
float leftScale = 1.0f-0.3f*scale;
ViewHelper.setScaleX(mMenu, leftScale);
ViewHelper.setScaleY(mMenu, leftScale);
//菜单的透明度
float leftAlpha = 1.0f-0.4f*scale;
ViewHelper.setAlpha(mMenu, leftAlpha);

}

}

attrs.xml

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

<declare-styleable name="SildingMenu">
<attr name="rightPadding" format="dimension"/>

</declare-styleable>
</resources>

左侧菜单布局文件 view_side_menu.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">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/view_side_menu_one_layout"
android:padding="15dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/view_side_menu_image1"
android:src="@drawable/icon_base_info"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/view_side_menu_text1"
android:layout_toRightOf="@+id/view_side_menu_image1"
android:layout_marginLeft="7dp"
android:text="第一个item"
android:layout_centerVertical="true"
android:textColor="#fff"
android:textSize="20sp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/view_side_menu_two_layout"
android:padding="15dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/view_side_menu_image2"
android:src="@drawable/icon_borrow_description"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/view_side_menu_text2"
android:layout_toRightOf="@+id/view_side_menu_image2"
android:layout_marginLeft="7dp"
android:text="第二个item"
android:layout_centerVertical="true"
android:textColor="#fff"
android:textSize="20sp"/>
</RelativeLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/view_side_menu_three_layout"
android:padding="15dp">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/view_side_menu_image3"
android:src="@drawable/icon_borrow_user_info"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/view_side_menu_text3"
android:layout_toRightOf="@+id/view_side_menu_image3"
android:layout_marginLeft="7dp"
android:text="第三个item"
android:layout_centerVertical="true"
android:textColor="#fff"
android:textSize="20sp"/>
</RelativeLayout>

</LinearLayout>

MainActivity.class

package com.test.sildingmenu;

import com.test.sildingmenu.view.CustomSidingView;

import android.support.v7.app.ActionBarActivity;
import android.view.View;
import android.os.Bundle;

public class MainActivity extends ActionBarActivity {
private CustomSidingView menu;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
menu = (CustomSidingView) findViewById(R.id.activity_main_scrollview);
}

public void toggleMenu(View view){
menu.toggle();
}

}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.test.sildingmenu"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/main_bg">
<com.test.sildingmenu.view.CustomSidingView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/activity_main_scrollview"
android:scrollbars="none"
app:rightPadding="80dp">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/activity_main_layout"
android:orientation="horizontal">
<include
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/activity_main_side_menu"
layout="@layout/view_side_menu"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/activity_main_main_layout"
android:background="@drawable/loading_bg"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:onClick="toggleMenu"
android:text="切换菜单"/>
</LinearLayout>

</LinearLayout>
</com.test.sildingmenu.view.CustomSidingView >

</RelativeLayout>