QQ菜单侧滑4种动画效果

Mr_Leixiansheng

已于 2023-06-29 16:55:09 修改

阅读量577

点赞数 1

分类专栏：小项目开发文章标签： android java

于 2017-04-07 15:26:23 首次发布

本文链接：https://blog.csdn.net/mr_leixiansheng/article/details/69556968

版权

小项目开发专栏收录该内容

18 篇文章 1 订阅

订阅专栏

转载请注明出处：QQ菜单侧滑4种动画效果_Mr_Leixiansheng的博客-CSDN博客

（默认效果）

动画效果一

动画效果二

动画效果三

需要导入第三方jar包 nineoldandroids-2.4.0.jar

步骤：

1、新建类继承HorizontalScrollView

1）重写构造得到屏幕宽度

 WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(displayMetrics);
        mSreenWidth = displayMetrics.widthPixels;

2）设置菜单距离右侧距离

mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mMenuRightPadding,
                context.getResources().getDisplayMetrics());

3）onMeasure设置子View大小、自己大小

  //设置菜单宽度
            mMenuWidth = mMenu.getLayoutParams().width = mSreenWidth - mMenuRightPadding;
            //设置内容宽度
            mContent.getLayoutParams().width = mSreenWidth;

4）重写偏移量

5）onTouchEvent 设置滑动动作

6）设置动画效果

2、设置菜单显示界面

3、主布局引用自定义侧滑和菜单

4、主程序实现功能

代码如下：

1、新建类继承HorizontalScrollView

package com.example.leixiansheng.slidingmenu;

import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.Log;
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;

/**
 * Created by Leixiansheng on 2017/4/6.
 */

public class SlidingMenu extends HorizontalScrollView {

    private LinearLayout mWapper;
    //菜单
    private ViewGroup mMenu;
    //内容
    private ViewGroup mContent;
    //屏幕宽度
    private int mSreenWidth;
    //菜单宽度
    private int mMenuWidth;
    //菜单例右侧边距
    private int mMenuRightPadding = 80;
    //滑动灵敏度
    private int slidingBoundary = 2;
    private boolean onec;
    private boolean isOpen;

    public SlidingMenu(Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取屏幕宽度
        WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics displayMetrics = new DisplayMetrics();
        manager.getDefaultDisplay().getMetrics(displayMetrics);
        mSreenWidth = displayMetrics.widthPixels;

        /**
         * 把 mMenuRightPadding dp转换成px
         * TypedValue.COMPLEX_UNIT_DIP  DP
         * TypedValue.COMPLEX_UNIT_SP  SP
         */
        mMenuRightPadding = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, mMenuRightPadding,
                context.getResources().getDisplayMetrics());
    }


    //设置宽高
    //设置子View大小
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        if (!onec) {
            mWapper = (LinearLayout) getChildAt(0);
            mMenu = (ViewGroup) mWapper.getChildAt(0);
            mContent = (ViewGroup) mWapper.getChildAt(1);

            //设置菜单宽度
            mMenuWidth = mMenu.getLayoutParams().width = mSreenWidth - mMenuRightPadding;
            //设置内容宽度
            mContent.getLayoutParams().width = mSreenWidth;
            onec = true;
        }
        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) {

        switch (ev.getAction()) {
            case MotionEvent.ACTION_UP:
                int scrollX = getScrollX();
                float touchWhere =  ev.getX();
                Log.i("MMM", "touchWhere ：" + touchWhere);
                Log.i("MMM", "scrollX ：" + scrollX);

                //点击内容区域隐藏菜单
                if (isOpen) {
                    if (touchWhere > mMenuWidth) {
                        clooseMenu();
                        return true;
                    }
                }
                if (scrollX >= mMenuWidth / slidingBoundary) {
                    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);
        isOpen = true;
    }

    public void clooseMenu() {
        if(!isOpen) return;
        this.smoothScrollTo(mMenuWidth, 0);
        isOpen = false;
    }

    public void toggle() {
        if (isOpen) {
            clooseMenu();
        } else {
            openMenu();
        }
    }

    /**
     * 第一种动画效果（不加则是默认动画）
     */
//    @Override
//    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
//        super.onScrollChanged(l, t, oldl, oldt);
//        float scroll = l * 1.0f / mMenuWidth;
//        ViewHelper.setTranslationX(mMenu, mMenuWidth * scroll);
//    }



    /**
     * 第二种动画效果（不加则是默认动画）
     */
//    @Override
//    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
//        super.onScrollChanged(l, t, oldl, oldt);
//        float scroll = l * 1.0f / mMenuWidth;
//        ViewHelper.setTranslationX(mMenu, mMenuWidth * scroll * 0.8f);
//    }
//

    /**
     * 第三种动画效果 （不加则是默认动画）
     */
    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt)
    {
        super.onScrollChanged(l, t, oldl, oldt);
        float scroll = l * 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 * scroll;
        float leftScale = 1.0f - scroll * 0.3f;
        float leftAlpha = 0.6f + 0.4f * (1 - scroll);

        // 调用属性动画，设置TranslationX
        ViewHelper.setTranslationX(mMenu, mMenuWidth * scroll * 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);

    }
}

2、设置菜单显示界面

<?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="@drawable/img_frame_background">

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

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

            <ImageView
                android:id="@+id/image_1"
                android:layout_centerVertical="true"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp"
                android:src="@drawable/img_1"
                android:layout_width="50dp"
                android:layout_height="50dp" />

            <TextView
                android:text="这是第一个元素"
                android:textSize="20dp"
                android:textColor="#ffffffff"
                android:layout_marginLeft="20dp"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/image_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>

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

            <ImageView
                android:id="@+id/image_2"
                android:layout_centerVertical="true"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp"
                android:src="@drawable/img_2"
                android:layout_width="50dp"
                android:layout_height="50dp" />

            <TextView
                android:text="这是第二个元素"
                android:textSize="20dp"
                android:textColor="#ffffffff"
                android:layout_marginLeft="20dp"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/image_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>

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

            <ImageView
                android:id="@+id/image_3"
                android:layout_centerVertical="true"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp"
                android:src="@drawable/img_3"
                android:layout_width="50dp"
                android:layout_height="50dp" />

            <TextView
                android:text="这是第三个元素"
                android:textSize="20dp"
                android:textColor="#ffffffff"
                android:layout_marginLeft="20dp"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/image_3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>

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

            <ImageView
                android:id="@+id/image_4"
                android:layout_centerVertical="true"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp"
                android:src="@drawable/img_4"
                android:layout_width="50dp"
                android:layout_height="50dp" />

            <TextView
                android:text="这是第四个元素"
                android:textSize="20dp"
                android:textColor="#ffffffff"
                android:layout_marginLeft="20dp"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/image_4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>

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

            <ImageView
                android:id="@+id/image_5"
                android:layout_centerVertical="true"
                android:layout_marginTop="20dp"
                android:layout_marginLeft="20dp"
                android:src="@drawable/img_5"
                android:layout_width="50dp"
                android:layout_height="50dp" />

            <TextView
                android:text="这是第五个元素"
                android:textSize="20dp"
                android:textColor="#ffffffff"
                android:layout_marginLeft="20dp"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/image_5"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RelativeLayout>

    </LinearLayout>
</RelativeLayout>

3、主布局引用自定义侧滑和菜单

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

    <com.example.leixiansheng.slidingmenu.SlidingMenu
        android:id="@+id/sliding_menu"
        android:scrollbars="none"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="match_parent">

            <include layout="@layout/left_manu"/>

            <LinearLayout
                android:background="@drawable/qq"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

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

        </LinearLayout>
    </com.example.leixiansheng.slidingmenu.SlidingMenu>
</RelativeLayout>

4、主程序实现功能

package com.example.leixiansheng.slidingmenu;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    private SlidingMenu slidingMenu;
    private Button changeMenu;

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

        changeMenu = (Button) findViewById(R.id.btn_change_menu);
        slidingMenu = (SlidingMenu) findViewById(R.id.sliding_menu);

        changeMenu.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                slidingMenu.toggle();
            }
        });
    }
}

Mr_Leixiansheng

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
QQ菜单侧滑4种动画效果

（默认效果）动画效果一动画效果二动画效果三步骤：1、新建类继承HorizontalScrollView1）重写构造得到屏幕宽度 WindowManager manager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
复制链接

扫一扫