转载请注明出处: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();
}
});
}
}