QQ菜单侧滑4种动画效果

转载请注明出处：http://blog.csdn.net/mr_leixiansheng/article/details/69556968

（默认效果） 

 


动画效果一



动画效果二



动画效果三



需要导入第三方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" />

&
d5a0
lt;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();
}
});
}
}