Android自定义控件----继承ViewGroup侧滑菜单5，抽屉式侧滑，QQ5.0效果（完结）

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

效果图：

项目结构：

QQ5.0的侧滑
和抽屉菜单的区别
简单的说就是在onScrollChanged方法中加入了缩放，偏移，渐变属性动画效果

区别1：内容1：内容区域 1.0到0.7 缩放效果
scale：1.0 到 0.0
0.7+0.3 * scale

区别2：菜单的偏移量需要修改

区别3：菜单显示是有缩放以及透明度的变化
缩放：0.7到1.0
1.0 - scale * 0.3
透明度 0.6 到 1.0

注意这个在写之前引入了一个属性动画的jar包nineoldandroids-2.4.0.jar
下载源码中找到

自定义控件 SlidingMenu

package com.zhh.app.view;

import android.content.Context;
import android.content.res.TypedArray;
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;

import com.nineoldandroids.view.ViewHelper;
import com.zhh.app.R;

/**
 * QQ5.0的侧滑
 * 和抽屉菜单的区别
 * 区别1：内容1：内容区域 1.0到0.7 缩放效果
 * scale：1.0 到 0.0
 * 0.7+0.3 * scale
 * 区别2：菜单的偏移量需要修改
 * 区别3：菜单显示是有缩放以及透明度的变化
 * 缩放：0.7到1.0
 * 1.0 - scale * 0.3
 * 透明度 0.6 到 1.0
 * 0.6 + 0.4 * （1 - scale）；
 */
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 = false;

    /**
     * 在代码中new的时候调用此构造方法
     *
     * @param context
     */
    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:
//                 默认值，把50dp装化成px
                    int defaultValue = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 50, context.getResources().getDisplayMetrics());
                    mMenuRightPadding = a.getDimensionPixelSize(attr, defaultValue);
                    break;
            }
        }
        a.recycle();


//     拿到屏幕的宽度，并赋值
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        mScreenWidth = outMetrics.widthPixels;
    }

    /**
     * 设置子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);
                    isOpen = false;
                } else {
//                  菜单打开
                    this.smoothScrollTo(0, 0);
                    isOpen = true;
                }
                return true;

        }
        return super.onTouchEvent(event);
    }

    /**
     * 打开菜单
     */
    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 toggle() {
        if (isOpen) {
            closeMenu();
        } else {
            openMenu();
        }
    }

    /**
     * 监听滚动
     * 滚动式发生
     */
    @Override
    protected void onScrollChanged(int getScrollX, int t, int oldl, int oldt) {
        super.onScrollChanged(getScrollX, t, oldl, oldt);
        float scale = getScrollX * 1.0f / mMenuWidth; // 1 ~ 0

        /**
         * 区别1：内容区域1.0~0.7 缩放的效果 scale : 1.0~0.0 0.7 + 0.3 * scale
         *
         * 区别2：菜单的偏移量需要修改
         *
         * 区别3：菜单的显示时有缩放以及透明度变化 缩放：0.7 ~1.0 1.0 - scale * 0.3 透明度 0.6 ~ 1.0
         * 0.6+ 0.4 * (1- scale) ;
         *
         */
//      内容区域缩放
        float rightScale = 0.7f + 0.3f * scale;
//      菜单缩放
        float leftScale = 1.0f - scale * 0.3f;
//      菜单透明度的变化
        float leftAlpha = 0.6f + 0.4f * (1 - scale);

        // 设置菜单的动画
        // 设置菜单的偏移量
        // 调用属性动画，设置TranslationX
        ViewHelper.setTranslationX(mMenu, mMenuWidth * scale * 0.8f);
        // 设置菜单的缩放
        ViewHelper.setScaleX(mMenu, leftScale);
        ViewHelper.setScaleY(mMenu, leftScale);
        // 设置菜单的透明度
        ViewHelper.setAlpha(mMenu, leftAlpha);

        // 设置内容的动画
        // 设置content的缩放的中心点，在左边线的中心
        ViewHelper.setPivotX(mContent, 0);
        ViewHelper.setPivotY(mContent, mContent.getHeight() / 2);
        // 缩放
        ViewHelper.setScaleX(mContent, rightScale);
        ViewHelper.setScaleY(mContent, rightScale);

    }
}

MainActivity

package com.zhh.app;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.zhh.app.view.SlidingMenu;

public class MainActivity extends Activity {

    //  侧滑控件
    private SlidingMenu mLeftMenu;
    //  按钮
    private Button btnQieHuan;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mLeftMenu = (SlidingMenu)findViewById(R.id.mLeftMenu);
        btnQieHuan = (Button)findViewById(R.id.btnQieHuan);
//      点击事件
        btnQieHuan.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
//              切换菜单，当打开时关闭，当关闭时，打开
                mLeftMenu.toggle();
            }
        });
    }


}

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:zhh="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <!--HorizontalScrollView中只有一个子类-->
    <com.zhh.app.view.SlidingMenu
        android:id="@+id/mLeftMenu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/img_frame_background"
        zhh:rightPadding="150dp">
        <!--左边是菜单，右边是内容 -->
        <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">

                <Button
                    android:id="@+id/btnQieHuan"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:onClick="toggleMenu"
                    android:text="切换菜单" />
            </LinearLayout>

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


</RelativeLayout>

left_menu.xml

扫描二维码关注公众号，回复： 3758702 查看本文章

<?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="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>

attr.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- 此文件链接SlidingMenu类和布局文件-->
    <!--rightPadding 属性名称-->
    <!-- format 格式支持px,dp,ps-->
    <attr name="rightPadding" format="dimension"></attr>

    <!-- SlidingMenu 控件名称-->
    <!-- rightPadding 属性名称-->
    <declare-styleable name="SlidingMenu">
        <attr name="rightPadding"></attr>
    </declare-styleable>

</resources>

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