android 侧滑菜单的简单实现

偏执的太偏执、 2022-08-06 12:25 189阅读 0赞

先定义出菜单的XML

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:layout_centerVertical="true"
            >
    
            <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
    
                <ImageView
                    android:id="@+id/id_img1"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="20dp"
                    android:layout_centerVertical="true"
                    android:src="@drawable/b" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@id/id_img1"
                    android:textSize="20sp"
                    android:layout_centerVertical="true"
                    android:text="第一个Item"
                    android:textColor="#ff0000"
                     />
            </RelativeLayout> <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
    
                <ImageView
                    android:id="@+id/id_img2"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="20dp"
                    android:layout_centerVertical="true"
                    android:src="@drawable/b" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@id/id_img2"
                    android:textSize="20sp"
                    android:layout_centerVertical="true"
                    android:text="第二个Item"
                    android:textColor="#ff0000"
                     />
            </RelativeLayout> <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
    
                <ImageView
                    android:id="@+id/id_img3"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="20dp"
                    android:layout_centerVertical="true"
                    android:src="@drawable/b" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@id/id_img3"
                    android:textSize="20sp"
                    android:layout_centerVertical="true"
                    android:text="第三个Item"
                    android:textColor="#ff0000"
                     />
            </RelativeLayout> <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
    
                <ImageView
                    android:id="@+id/id_img4"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="20dp"
                    android:layout_centerVertical="true"
                    android:src="@drawable/b" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@id/id_img4"
                    android:textSize="20sp"
                    android:layout_centerVertical="true"
                    android:text="第四个Item"
                    android:textColor="#ff0000"
                     />
            </RelativeLayout> <RelativeLayout
                android:layout_width="fill_parent"
                android:layout_height="wrap_content" >
    
                <ImageView
                    android:id="@+id/id_img5"
                    android:layout_width="50dp"
                    android:layout_height="50dp"
                    android:layout_marginLeft="20dp"
                    android:layout_marginTop="20dp"
                    android:layout_centerVertical="true"
                    android:src="@drawable/b" />
    
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@id/id_img5"
                    android:textSize="20sp"
                    android:layout_centerVertical="true"
                    android:text="第五个Item"
                    android:textColor="#ff0000"
                     />
            </RelativeLayout>
        </LinearLayout>
    
    </RelativeLayout>

再定义出主界面的xml

上面代码中倒数第二个RelativeLayout的布局是主界面的布局

然后是自定义的侧滑控件类

package com.baoxiu123.view;
    
    import android.content.Context;
    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;
    
    public class SlidingMenu extends HorizontalScrollView {
    	private LinearLayout mWapper;
    	private ViewGroup mMenu;
    	private ViewGroup mContent;
    	private int mScreenWidth;
    	// private int mScreenHeight;
    
    	private int mMenuWidth;
    
    	// 这里的单位是50dp
    	private int mMenuRightPadding = 50;
    
    	private boolean once;
    	
    	private boolean isOpen = false;
    
    	public SlidingMenu(Context context, AttributeSet attrs) {
    		super(context, attrs);
    
    		WindowManager wm = (WindowManager) context
    				.getSystemService(Context.WINDOW_SERVICE);
    		DisplayMetrics outMetrics = new DisplayMetrics();
    		wm.getDefaultDisplay().getMetrics(outMetrics);
    		mScreenWidth = outMetrics.widthPixels;
    		// mScreenHeight = outMetrics.heightPixels;
    
    		// 把dp转化为px
    		mMenuRightPadding = (int) TypedValue.applyDimension(
    				TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources()
    						.getDisplayMetrics());
    
    	}
    
    	@Override
    	protected void onMeasure(int widthMeasureSpec, int 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;
    		}
    
    		// mWapper.getLayoutParams().width = mScreenWidth;
    		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    	}
    
    	/**
    	 * 
    	 */
    	@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();
    			
    			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;
    		this.smoothScrollTo(0, 0);
    	}
    	
    	//关闭菜单 
    	public void closeMeun(){
    		if(!isOpen)return;
    		this.smoothScrollTo(mMenuWidth,0);
    		isOpen = false;
    	}
    	//切换菜单
    	public void toggle(){
    		if(isOpen){
    			closeMeun();
    		}else
    		{
    			openMenu();
    		}
    	}
    }

就这样，就可以实现了