Android自定义控件----继承ViewGroup侧滑菜单1，普通侧滑菜单，实现侧滑

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/82740536

效果图：

实现思路：
1 在布局中写一个 HorizontalScrollView（自定义控件SlidingMenu继承 HorizontalScrollView）

2 HorizontalScrollView的子布局是一个水平线性布局，
水平线性布局里面一个布局作为菜单，一个布局作为内容

3 SlidingMenu继承HorizontalScrollView左右滑动已经自带实现，
我们只要在onTouchEvent的ACTION_UP中判断滑动是否超过菜单宽度的一半
如果超过一半，显示菜单，如果没有超过，隐藏菜单

实现代码：
自定义侧滑控件：SlidingMenu

package com.zhh.cehuacaidai.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;

/**
 * 自定义普通侧滑菜单
 * 思路：
 * 1在布局中写一个 HorizontalScrollView
 * 2HorizontalScrollView的子布局是一个水平线性布局，
 * 水平线性布局里面一个布局作为菜单，一个布局作为内容
 * 3继承HorizontalScrollView左右滑动已经自带实现，
 * 我们只要在onTouchEvent的ACTION_UP中判断滑动是否超过菜单宽度的一半
 * 如果超过一半，显示菜单，如果没有超过，隐藏菜单
 */
public class SlidingMenu extends HorizontalScrollView {
    //  里面的线性布局
    private LinearLayout mWapper;
    //  菜单布局
    private ViewGroup mMenu;
    //  内容布局
    private ViewGroup mContent;
    //  屏幕宽度
    private int mScreenWidth;
    //  菜单宽度
    private int mMenuWidth;
    //  菜单里右边的距离   dp
    private int mMenuRightPadding = 50;
    // 宽高只设置一次
    private boolean once = false;

    private boolean isOpen;


    public SlidingMenu(Context context) {
//      调两个参数的构造方法
        this(context, null);
    }

    public SlidingMenu(Context context, AttributeSet attrs) {
//      调三个参数的构造方法
        this(context, attrs, 0);
    }

    public SlidingMenu(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
//     拿到屏幕的宽度，并赋值
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        mScreenWidth = outMetrics.widthPixels;
//      把dp装化成px,android内部使用的是px
        mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
    }

    /**
     * 设置子view的宽高，和设置自己的宽高
     *
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @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);
        }
    }

    /**
     * 事件处理
     *
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
//          当手指离开时
            case MotionEvent.ACTION_UP:
//             隐藏在左边的宽度
                int scrollX = getScrollX();
//              隐藏在左边的宽度大于菜单宽度的1/2时，让菜单隐藏
                if(scrollX>=mMenuWidth/2) {
//                  带有动画效果
                    this.smoothScrollTo(mMenuWidth, 0);
                }else{
                    this.smoothScrollTo(0,0);
                }
               return true;

        }
        return super.onTouchEvent(event);
    }
}

在布局activity_main.xml中引用

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!--HorizontalScrollView中只有一个子类-->
    <com.zhh.cehuacaidai.view.SlidingMenu
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <!--左边是菜单，右边是内容 -->
        <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="@mipmap/qq">
            </LinearLayout>

        </LinearLayout>
    </com.zhh.cehuacaidai.view.SlidingMenu>


</RelativeLayout>

菜单布局left_menu.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"
    android:background="@mipmap/img_frame_background" >

    <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/id_img1"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_1" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img1"
                android:text="第一个Item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </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_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_2" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img2"
                android:text="第二个Item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </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_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_3" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img3"
                android:text="第三个Item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </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_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_4" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img4"
                android:text="第四个Item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </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_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_marginTop="20dp"
                android:src="@mipmap/img_5" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_marginLeft="20dp"
                android:layout_toRightOf="@id/id_img5"
                android:text="第五个Item"
                android:textColor="#ffffff"
                android:textSize="20sp" />
        </RelativeLayout>

    </LinearLayout>

</RelativeLayout>

源码下载：
https://download.csdn.net/download/zhaihaohao1/10671937
参考视频：
http://www.imooc.com/learn/211
参考文章：
https://blog.csdn.net/lmj623565791/article/details/39185641
Android自带控件DrawerLayout，实现侧滑
https://blog.csdn.net/student9128/article/details/53247491