仿QQ侧滑菜单栏的使用

1.在activity中执行初始化侧边菜单栏的方法        

/**

* 设置侧边栏显示样式
*/
private void initslidingView() {
// attach to current activity;
slidingMenu = new SlidingMenu(this);
NinePatchDrawable background = (NinePatchDrawable) getResources().getDrawable(R.drawable.menu_bkg);
slidingMenu.setBackgroundDrawable(background);
slidingMenu.attachToActivity(this);
// create menu items;
String[] mMenu_Text_Array = getApplicationContext().getResources()
.getStringArray(R.array.item_text_array);
int icon[] = new int[] { R.drawable.ico_home, R.drawable.ico_create,
R.drawable.ico_production, R.drawable.ico_role,
R.drawable.settingicon };
for (int i = 0; i < mMenu_Text_Array.length; i++) {
SlidingMenuItem item = new SlidingMenuItem(this, icon[i],
mMenu_Text_Array[i]);
item.setTag(i);// 设置选中的item标记
item.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
// 首页
if ((v.getTag() + "").equals("0")) {
if (null != mContent
&& mContent instanceof HomePageFragment) {
closeMenu();
} else {
switchContent(-1);
}
// 创作
} else if ((v.getTag() + "").equals("1")) {
/** 王永迪 add */
// 将数据保存到全局
Common.JumpActivity(HomePageAct.this,
TakePictureAct.class, true);
// 作品
} else if ((v.getTag() + "").equals("2")) {
Common.JumpActivity(HomePageAct.this, ModelEnginActivity.class);
// 角色
} else if ((v.getTag() + "").equals("3")) {
Common.JumpActivity(HomePageAct.this, ModLibrary.class, true);
// 设置页面
} else if ((v.getTag() + "").equals("4")) {
Common.JumpActivity(HomePageAct.this,
SettingActivity.class, true);
}
}
});
slidingMenu.addMenuItem(item);
}
menuItems = slidingMenu.getMenuItems();

}

2.侧边滑动菜单栏类

/**
 * User: special Date: 13-12-10 Time: 下午10:44 Mail: [email protected]
 */
public class SlidingMenu extends FrameLayout implements
GestureDetector.OnGestureListener {



private String TAG = "SlidingMenu";


private ImageView iv_shadow;
private ImageView iv_background;
private LinearLayout layout_menu;
private ScrollView sv_menu;
private AnimatorSet scaleUp_shadow;
private AnimatorSet scaleUp_activity;
private AnimatorSet scaleDown_activity;
private AnimatorSet scaleDown_shadow;
/** the activity that view attach to */
private Activity activity;
/** the decorview of the activity */
private ViewGroup view_decor;
/** the viewgroup of the activity */
private ViewGroup view_activity;
/** the flag of menu open status */
public static boolean isOpened;
private GestureDetector gestureDetector;
private float shadow_ScaleX;
/** the view which don't want to intercept touch event */
private List<View> ignoredViews;
/** 侧边栏的item集合 */
private List<SlidingMenuItem> menuItems;
private DisplayMetrics displayMetrics = new DisplayMetrics();
private OnMenuListener menuListener;
/** 设置禁止侧边栏滑动 */
public static boolean NoOpenSliding = false;
private Context context;

public SlidingMenu(Context context) {
super(context);
this.context = context;
initViews(context);
}


private void initViews(Context context) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.residemenu, this);
sv_menu = (ScrollView) findViewById(R.id.sv_menu);
iv_shadow = (ImageView) findViewById(R.id.iv_shadow);
layout_menu = (LinearLayout) findViewById(R.id.layout_menu);
iv_background = (ImageView) findViewById(R.id.iv_background);
}

/**
* use the method to set up the activity which residemenu need to show;
* 设置在activity上面的显示
* 
* @param activity
*/
public void attachToActivity(Activity activity) {
initValue(activity);
setShadowScaleXByOrientation();
buildAnimationSet();
}


/**
* 设置显示的值
* 
* @param activity
*/
private void initValue(Activity activity) {
this.activity = activity;
menuItems = new ArrayList<SlidingMenuItem>();
gestureDetector = new GestureDetector(this);
ignoredViews = new ArrayList<View>();
view_decor = (ViewGroup) activity.getWindow().getDecorView();
view_activity = (ViewGroup) view_decor.getChildAt(0);
}


/**
* 设置坐标的值
* 
* @param activity
*/
private void setShadowScaleXByOrientation() {
int orientation = getResources().getConfiguration().orientation;
if (orientation == Configuration.ORIENTATION_LANDSCAPE) {
shadow_ScaleX = 0.5335f;
// shadow_ScaleX = 0.76f;
} else if (orientation == Configuration.ORIENTATION_PORTRAIT) {
shadow_ScaleX = 0.56f;
// shadow_ScaleX = 0.76f;
}
}


/**
* set the menu background picture; 设置背景图片
* 
* @param imageResrouce
*/
public void setBackground(int imageResrouce) {
iv_background.setImageResource(imageResrouce);
}


/**
* the visiblity of shadow under the activity view;
* 
* @param isVisible
*/
public void setShadowVisible(boolean isVisible) {
if (isVisible)
iv_shadow.setImageResource(R.drawable.shadow);
else
iv_shadow.setImageBitmap(null);
}


/**
* add a single items; 添加item数量
* 
* @param menuItem
*/
public void addMenuItem(SlidingMenuItem menuItem) {
this.menuItems.add(menuItem);
}


/**
* set the menu items by array list; 设置item数组显示
* 
* @param menuItems
*/
public void setMenuItems(List<SlidingMenuItem> menuItems) {
this.menuItems = menuItems;
}


/**
* 获取item数组
* 
* @return
*/
public List<SlidingMenuItem> getMenuItems() {
return menuItems;
}


/**
* if you need to do something on the action of closing or opening menu, set
* the listener here.
* 
* @return
*/
public void setMenuListener(OnMenuListener menuListener) {
this.menuListener = menuListener;
}


public OnMenuListener getMenuListener() {
return menuListener;
}


/**
* we need the call the method before the menu show, because the padding of
* activity can't get at the moment of onCreateView();
*/
private void setViewPadding() {
this.setPadding(view_activity.getPaddingLeft(),
view_activity.getPaddingTop(), view_activity.getPaddingRight(),
view_activity.getPaddingBottom());
}


/**
* 打开侧边栏
*/
public long mTime;


public void openMenu() {
if (!isOpened) {
// IrrlichtGLView Glview = new IrrlichtGLView(context);
// Glview.CloseListen();
sv_menu.setVisibility(View.VISIBLE);
isOpened = true;
mTime = 0;
mTime = System.currentTimeMillis();
showOpenMenuRelative();
}
}


private void removeMenuLayout() {
ViewGroup parent = ((ViewGroup) sv_menu.getParent());
parent.removeView(sv_menu);
}


/**
* 关闭侧边栏
*/
public void closeMenu() {
if (isOpened && System.currentTimeMillis() - mTime > 500) {
isOpened = false;
sv_menu.setVisibility(View.INVISIBLE);
scaleUp_activity.start();
}
}


/**
* return the flag of menu status， is open or not;
* 
* @return
*/
public boolean isOpened() {
return isOpened;
}


/**
* call the method relative to open menu; 添加显示的sv_menu 滑动view 侧边栏属性
*/
private void showOpenMenuRelative() {
setViewPadding();
scaleDown_activity.start();
// remove self if has not remove
if (getParent() != null)
view_decor.removeView(this);
if (sv_menu.getParent() != null)
removeMenuLayout();
showMenuDelay();
view_decor.addView(this, 0);
view_decor.addView(sv_menu);
}


/**
* 动画动作的监听
* 
*/
private Animator.AnimatorListener animationListener = new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
if (isOpened) {
layout_menu.removeAllViews();
// showMenuDelay();
if (menuListener != null)
menuListener.openMenu();
}
}


@Override
public void onAnimationEnd(Animator animation) {
// reset the view;
if (!isOpened) {
view_decor.removeView(SlidingMenu.this);
view_decor.removeView(sv_menu);
if (menuListener != null)
menuListener.closeMenu();
}
}


@Override
public void onAnimationCancel(Animator animation) {


}


@Override
public void onAnimationRepeat(Animator animation) {


}
};


/**
* 显示菜单延迟
*/
private void showMenuDelay() {
layout_menu.removeAllViews();
for (int i = 0; i < menuItems.size(); i++)
showMenuItem(menuItems.get(i), i);
}


/**
* 
* @param menuItem
* @param menu_index
*            the position of the menu;
* @return
*/
private void showMenuItem(SlidingMenuItem menuItem, int menu_index) {


layout_menu.addView(menuItem);
ViewHelper.setAlpha(menuItem, 0);
AnimatorSet scaleUp = new AnimatorSet();
scaleUp.playTogether(
ObjectAnimator.ofFloat(menuItem, "translationX", -100.f, 0.0f),
ObjectAnimator.ofFloat(menuItem, "alpha", 0.0f, 1.0f));


scaleUp.setInterpolator(AnimationUtils.loadInterpolator(activity,
android.R.anim.anticipate_overshoot_interpolator));
// with animation;
scaleUp.setStartDelay(50 * menu_index);
scaleUp.setDuration(400).start();
}


/**
* 
* 设置显示的动作
*/
private void buildAnimationSet() {
scaleUp_activity = buildScaleUpAnimation(view_activity, 1.0f, 1.0f);
scaleUp_shadow = buildScaleUpAnimation(iv_shadow, 1.0f, 1.0f);
// scaleDown_activity = buildScaleDownAnimation(view_activity, 0.7f,
// 0.7f);
scaleDown_activity = buildScaleDownAnimation(view_activity, 0.6f, 0.6f);
scaleDown_shadow = buildScaleDownAnimation(iv_shadow, shadow_ScaleX,
0.59f);
scaleUp_activity.addListener(animationListener);
scaleUp_activity.playTogether(scaleUp_shadow);
scaleDown_shadow.addListener(animationListener);
scaleDown_activity.playTogether(scaleDown_shadow);
}


/**
* a helper method to build scale down animation; 加载动作显示 用于调节缩放的大小
* 
* @param target
*            要执行缩小动画的view
* @param targetScaleX
*            X方向缩小的比率
* @param targetScaleY
*            Y方向缩小的比率
* @return
*/
private AnimatorSet buildScaleDownAnimation(View target,
float targetScaleX, float targetScaleY) {


// set the pivotX and pivotY to scale;
int pivotX = (int) (getScreenWidth() * 1.5);
int pivotY = (int) (getScreenHeight() * 0.5);


ViewHelper.setPivotX(target, pivotX);
ViewHelper.setPivotY(target, pivotY);
AnimatorSet scaleDown = new AnimatorSet();
scaleDown.playTogether(
ObjectAnimator.ofFloat(target, "scaleX", targetScaleX),
ObjectAnimator.ofFloat(target, "scaleY", targetScaleY));


scaleDown.setInterpolator(AnimationUtils.loadInterpolator(activity,
android.R.anim.decelerate_interpolator));
scaleDown.setDuration(150);
return scaleDown;
}


/**
* a helper method to build scale up animation; 关闭动作
* 
* @param target
*            要执行放大动画的view
* @param targetScaleX
*            X方向缩小的比率
* @param targetScaleY
*            Y方向缩小的比率
* @return
*/
private AnimatorSet buildScaleUpAnimation(View target, float targetScaleX,
float targetScaleY) {


AnimatorSet scaleUp = new AnimatorSet();
scaleUp.playTogether(
ObjectAnimator.ofFloat(target, "scaleX", targetScaleX),
ObjectAnimator.ofFloat(target, "scaleY", targetScaleY));


scaleUp.setDuration(150);
return scaleUp;
}


/**
* 这部分的view视图是不可以移动切换的 if there ware some view you don't want reside menu to
* intercept their touch event,you can use the method to set.
* 
* @param v
*/
public void addIgnoredView(View v) {
ignoredViews.add(v);
}


/**
* remove the view from ignored view list;
* 
* @param v
*            删除不可见区域
*/
public void removeIgnoredView(View v) {
ignoredViews.remove(v);
}


/**
* clear the ignored view list; 清除不可见区域集合
*/
public void clearIgnoredViewList() {
ignoredViews.clear();
}


/**
* if the motion evnent was relative to the view which in ignored view
* list,return true;
* 
* @param ev
*            判断是否是不可滑动区域
* @return
*/
private boolean isInIgnoredView(MotionEvent ev) {
Rect rect = new Rect();
for (View v : ignoredViews) {
v.getGlobalVisibleRect(rect);
if (rect.contains((int) ev.getX(), (int) ev.getY()))
return true;
}
return false;
}


// --------------------------------------------------------------------------
//
// GestureListener
//
// --------------------------------------------------------------------------
@Override
public boolean onTouchEvent(MotionEvent event) {
return gestureDetector.onTouchEvent(event);
}


@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
gestureDetector.onTouchEvent(ev);
return super.onInterceptTouchEvent(ev);
}


@Override
public boolean onDown(MotionEvent motionEvent) {
return false;
}


@Override
public void onShowPress(MotionEvent motionEvent) {


}


@Override
public boolean onSingleTapUp(MotionEvent motionEvent) {
return false;
}


@Override
public boolean onScroll(MotionEvent motionEvent, MotionEvent motionEvent2,
float v, float v2) {
return false;
}


@Override
public void onLongPress(MotionEvent motionEvent) {


}


/**
* 滑动距离的监听
* 
*/
@Override
public boolean onFling(MotionEvent motionEvent, MotionEvent motionEvent2,
float v, float v2) {
if (NoOpenSliding)
return false;


if (isInIgnoredView(motionEvent) || isInIgnoredView(motionEvent2))
return false;


int distanceX = (int) (motionEvent2.getX() - motionEvent.getX());
int distanceY = (int) (motionEvent2.getY() - motionEvent.getY());
int screenWidth = (int) getScreenWidth();
// 如果Y轴移动超过1/3视为无效滑动
if (Math.abs(distanceY) > screenWidth * 0.3)
return false;
/**
* 对滑动的距离进行判断是打开还是关闭
*/
if (Math.abs(distanceX) > screenWidth * 0.17) {
if (distanceX > 0 && !isOpened
&& (int) (motionEvent.getX() - 0) < screenWidth * 0.17
&& Math.abs(distanceX) > screenWidth * 0.3) {
// from left to right;
openMenu();
} else if (distanceX < 0 && isOpened) {
// from right th left;
closeMenu();
}
}


return false;
}


public int getScreenHeight() {
activity.getWindowManager().getDefaultDisplay()
.getMetrics(displayMetrics);
return displayMetrics.heightPixels;
}


public int getScreenWidth() {
activity.getWindowManager().getDefaultDisplay()
.getMetrics(displayMetrics);
return displayMetrics.widthPixels;
}


/**
* 监听菜单变化 打开侧边栏 和关闭 侧边
* 
* @author 王永迪
* 
*/
public interface OnMenuListener {


/**
* the method will call on the finished time of opening menu's
* animation.
*/
public void openMenu();


/**
* the method will call on the finished time of closing menu's animation
* .
*/
public void closeMenu();
}


}

3.item项的初始化数据  设置图标以及图标类型文字显示

/**
 * User: special Date: 13-12-10 Time: 下午11:05 Mail: [email protected]
 */
public class SlidingMenuItem extends LinearLayout {


/** menu item icon */
private ImageView iv_icon;
/** menu item title */
private TextView tv_title;


public SlidingMenuItem(Context context) {
super(context);
initViews(context);
}


public SlidingMenuItem(Context context, int icon, int title) {
super(context);
initViews(context);
iv_icon.setImageResource(icon);
tv_title.setText(title);
}


public SlidingMenuItem(Context context, int icon, String title) {
super(context);
initViews(context);
iv_icon.setImageResource(icon);
tv_title.setText(title);

}


private void initViews(Context context) {
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
inflater.inflate(R.layout.residemenu_item, this);
iv_icon = (ImageView) findViewById(R.id.iv_icon);
tv_title = (TextView) findViewById(R.id.tv_title);
}


/**
* set the icon color;
* 
* @param icon
*/
public void setIcon(int icon) {
iv_icon.setImageResource(icon);
}


/**
* set the title with resource ;
* 
* @param title
*/
public void setTitle(int title) {
tv_title.setText(title);
}


/**
* set the title with string;
* 
* @param title
*/
public void setTitle(String title) {
tv_title.setText(title);
}

}