最近项目比较忙,没有多少时间看视屏学习,昨天晚上抽点时间看了点视屏,学习了如何自定义实现仿QQ侧滑菜单效果。在网上随便截了两张图,把学习的东西做个笔记。自定义HorizontalScrollView:
public class SideSlipMenu extends HorizontalScrollView {
// SideSlipMenu中的外层LinearLayout
private LinearLayout mWapper;
// SideSlipMenu中外层LinearLayout中的左侧ViewGroup
private ViewGroup mLeftMenu;
// SideSlipMenu中外层LinearLayout中的右侧ViewGroup
private ViewGroup mContent;
// 屏幕宽度
private int mScreenWidth;
// 滑出菜单后右侧可见宽度(距离)
private int mMenuRightPadding = 50;
// 是否是第一次执行onMeasure方法
private boolean isFirst = false;
// 左侧菜单宽度
private int mMenuWidth;
// 当前菜单是否打开
private boolean isOpen;
public SideSlipMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
DisplayMetrics dm = new DisplayMetrics();
wm.getDefaultDisplay().getMetrics(dm);
mScreenWidth = dm.widthPixels;
// 单位处理:把dp转换为Px
mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.slidemenu, defStyleAttr, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.slidemenu_rightPadding:
mMenuRightPadding = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics()));
break;
}
}
a.recycle();
}
public SideSlipMenu(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public SideSlipMenu(Context context) {
this(context, null);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (!isFirst) {
mWapper = (LinearLayout) getChildAt(0);
mLeftMenu = (ViewGroup) mWapper.getChildAt(0);
mContent = (ViewGroup) mWapper.getChildAt(1);
mMenuWidth = mScreenWidth - mMenuRightPadding;
mLeftMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
mContent.getLayoutParams().width = mScreenWidth;
isFirst = true;
}
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
// TODO Auto-generated method stub
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 / 2 >= 0) {
this.scrollTo(mMenuWidth, 0);
isOpen = false;
}
else {
this.scrollTo(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 switchMenu() {
if (isOpen) {
closeMenu();
}
else {
openMenu();
}
}
}
直接放在而已文件中使用:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:ldm="http://schemas.android.com/apk/res/com.ldm.learn"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff" >
<com.ldm.learn.flow.SideSlipMenu
android:id="@+id/slide_menu_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
ldm:rightPadding="80dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<include layout="@layout/left_menu" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@drawable/fang_qq_right" >
<Button
android:id="@+id/switch_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:background="#E12228"
android:text="切换开关"
android:textColor="#FFFFFF"
android:textSize="16sp" >
</Button>
</LinearLayout>
</LinearLayout>
</com.ldm.learn.flow.SideSlipMenu>
</RelativeLayout>
在Activity中进行切换操作:
public class MainActivity extends Activity {
private SideSlipMenu slide_menu_view;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
slide_menu_view = (SideSlipMenu) findViewById(R.id.slide_menu_view);
findViewById(R.id.switch_btn).setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
slide_menu_view.switchMenu();
}
});
}
}
最后还用到了自定义属性文件,位于项目res/values/attrs.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
<attr name="rightPadding" format="dimension" />
<declare-styleable name="slidemenu">
<attr name="rightPadding"></attr>
</declare-styleable>
</resources>
最难看的效果: