QQ左侧滑动显示之按钮切换_移动开发_编程开发_程序员俱乐部

　　上一篇为大家介绍了关于自定义属性设置方法，本篇我将为大家介绍一下如何通过按钮来控制Menu的显示和隐藏，为了达到这个效果我们需要在SlidingMenu中添加三个方法，用来达到实现上述效果的目的。

　　我们的SlidingMenu代码：

public class SlidingMenu extends HorizontalScrollView {

    private LinearLayout mWapper;
    private ViewGroup mMenu;
    private ViewGroup mContent;
    private int mScreenWidth;//屏幕的宽度
    private int mMenuWidth;//设置Menu的宽度
    
    //dp
    private int mMenuRightPadding;
    private boolean once = false;
    private boolean isOpen = false;//标示菜单的状态：隐藏   or 显示
    

    public SlidingMenu(Context context) {
        this(context, null);
    }
    
    /**
     * 未使用自定义属性时调用此方法
     * @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;
        
    }
    
    /**
     * 设置内部View的宽和高，以及自己的宽和高
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, 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;
        }
        
    }

    /**
     * 设置子View的放置位置
     * 通过设置偏移量来隐藏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();//Menu左侧隐藏的区域宽度
            if(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;
        }else{
            this.smoothScrollTo(0, 0);
            isOpen = true;
        }
    }
    
    /**
     * 关闭菜单
     */
    public void CloseMenu(){
        if(isOpen){
            this.smoothScrollTo(mMenuWidth, 0);
            isOpen = false;
        }else{
            return;
        }
    }
    
    /**
     * 切换菜单
     */
    public void Toggle(){
        if(isOpen){
            CloseMenu();
        }else{
            OpenMenu();
        }
    }
    
}

　　与之前代码不同的地方我已经为大家特别标注，相信大家不难理解。

　　我们布局文件代码：

<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.android_qq_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity" >

    <com.example.menu.SlidingMenu 
        android:id="@+id/slidingMenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        hyman:rightPadding="100dp" >
        <LinearLayout 
            android:layout_width="wrap_content"
            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/qq"
                >
                <Button 
                    android:id="@+id/button"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="切换按钮"
                    />
            </LinearLayout>
            
        </LinearLayout>
    </com.example.menu.SlidingMenu>
    
</RelativeLayout>

　　我们的MainActivity:

public class MainActivity extends Activity {
    private Button button;
    private SlidingMenu sm ;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        sm = (SlidingMenu) findViewById(R.id.slidingMenu);
        button = (Button) findViewById(R.id.button);
        button.setOnClickListener(new OnClickListener() {
            
            @Override
            public void onClick(View arg0) {
                sm.Toggle();
            }
        });
    }
}

　　到这里我们的切换效果就已经实现了。