侧滑菜单的实现(1.简单的侧滑菜单)

侧滑菜单的实现,利用HorizontalScrollView,就是水平滚动条,平时打开时,让内容页面为初始页面,所以菜单隐藏在左侧。

左侧菜单布局的Xml,假定了4个选项~


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000000"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical">


        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/image1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/image1"
                android:text="第一个item"
                android:textColor="#ffffff"
                android:layout_marginLeft="20dp"
                android:textSize="20sp" />

        RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/image2"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/image2"
                android:text="第二个item"
                android:textColor="#ffffff"
                android:layout_marginLeft="20dp"
                android:textSize="20sp" />

        RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/image3"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/image3"
                android:text="第三个item"
                android:textColor="#ffffff"
                android:layout_marginLeft="20dp"
                android:textSize="20sp" />

        RelativeLayout>

        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/image4"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/ic_launcher" />

            <TextView
                android:layout_centerVertical="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_toRightOf="@id/image4"
                android:text="第四个item"
                android:textColor="#ffffff"
                android:layout_marginLeft="20dp"
                android:textSize="20sp" />

        RelativeLayout>


    LinearLayout>


RelativeLayout>

下面是activiy_main的Xml,其中view.SlidingMenu是一个自定义的HorizontalScrollView。


<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <view.SlidingMenu
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentTop="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="horizontal">
            
            <include layout="@layout/leftmenu" />

            
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="#34df45">

            LinearLayout>
        LinearLayout>

    view.SlidingMenu>


RelativeLayout>

新建View包来自定义HorizontalScrollView类

package 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;

/**
 * Created by Chase on 2016/11/7.
 */

public class SlidingMenu extends HorizontalScrollView {
    //下面的属性匹配了activity_main替换掉的horizonalScrollView 因为这里是自定义的
    private LinearLayout mWapper;
    private ViewGroup mMenu;
    private ViewGroup mContent;
    private int mScreenWidth;
    private int mMenuRightPadding = 50;//露出Content Page的宽度 也就是滑到菜单页时 内容页露出的宽度
    private boolean once;//onMeasure方法用

    private int mMenuWidth;

    /**
     * 未使用自定义属性调用
     */
    public SlidingMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取屏幕宽高
        WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outM = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outM);
        mScreenWidth = outM.widthPixels;

        //转化50为像素值 把dp转化为px
        mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50,
                context.getResources().getDisplayMetrics());
    }

    /**
     * 设置子view的宽高
     * 设置自己的宽高
     *自定义子View和前面Xml的布局有关
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (!once) {
            mWapper = (LinearLayout) getChildAt(0);//得到layout对象
            mMenu = (ViewGroup) mWapper.getChildAt(0);//layout对象里的menu
            mContent = (ViewGroup) mWapper.getChildAt(1);//layout对象里的内容
            mMenuWidth = mMenu.getLayoutParams().width = mScreenWidth - mMenuRightPadding;
            mContent.getLayoutParams().width = mScreenWidth;
            once = true;//只调用一次 不要多次设置宽高
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }


    //效果是Content显示在内容区域 所以要有偏移量 通过设置偏移量 将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);
        }
    }

//触摸事件,只要考虑up的情况即可
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int action = ev.getAction();
        switch (action){
            case MotionEvent.ACTION_UP:
                //如果滑动的多余菜单宽度的一半就显示菜单 少于就隐藏
                int scrollX = getScrollX();//scrollX是隐藏在左边的宽度
                if (scrollX >= mMenuWidth/2)
                {
                    this.smoothScrollTo(mMenuWidth,0);
                }else {
                    this.smoothScrollTo(0,0);
                }
                return  true;
        }
        return super.onTouchEvent(ev);
    }
}

以上写完,可以运行了,去掉titleBar更美观~

package com.chase.cn.demon;

import android.app.Activity;
import android.os.Bundle;
import android.view.Window;


public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
    }


}

你可能感兴趣的:(侧滑菜单的实现(1.简单的侧滑菜单))