Android学习笔记 ：自定义HorizontalScrollView实现侧滑菜单

    最近项目比较忙，没有多少时间看视屏学习，昨天晚上抽点时间看了点视屏，学习了如何自定义实现仿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>

最难看的效果：