前言
上一篇Android 属性动画拓展（二）中，我们已经了解到，通过监听滑动事件，根据滑动的距离可以动态的修改视图中View的属性，从而实现一些好玩的动画。
但是Android系统中可滑动的控件并不是很多，之前的内容已经就ViewPager，ScrollView结合属性动画如何使用做了分析，感觉已经没有其余可拓展的内容了。因此。这里就结合一个自定义的侧滑菜单，再来看看如何使用属性动画的特性，让我们的侧滑菜单变得高大上。
LiteSwipeMenu
侧滑菜单，每一个开发者应该都很熟悉，从SlideMenu到DrawerLayout，再到NavigationView，Google为侧滑菜单的实现，也是提供了一系列支持。看来这种侧滑显示的方式颇受用户的青睐。下面，我们就以手Q 的侧滑菜单为例，看看如何实现一个侧滑菜单。
- 效果图
为了读代码时有一个直观认识，首先看一下我们最终的效果图。
qq.gif
这样的一个侧滑菜单其实很容易实现
- 代码实现
public class LiteSwipeMenu extends ViewGroup {
private float xLastIntercept = 0;
private float yLastIntercept = 0;
private float xLast = 0;
private Scroller mScroller;
private int mScreenWidth;
private int mScreenHeight;
private View mMenuView; //菜单视图
private View mContentView; //内容视图
private int mMenuOffset; //菜单距右边的距离
private boolean isMeasured = false; //是否已经测量过
private int mTouchSlop; //系统可识别最小滑动距离
private onMenuSwipeListener mListener;
public LiteSwipeMenu(Context context) {
super(context);
init(context);
}
public LiteSwipeMenu(Context context, AttributeSet attrs) {
super(context, attrs);
init(context);
}
public LiteSwipeMenu(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
private void init(Context context) {
mScroller = new Scroller(context);
mScreenWidth = LiteMenuHelper.getScreenWidth(context);
mScreenHeight = LiteMenuHelper.getScreenHeight(context);
mTouchSlop= ViewConfiguration.get(context).getScaledTouchSlop();
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
float x = ev.getX();
float y = ev.getY();
//是否拦截事件
boolean intercept = false;
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
intercept = false;
break;
case MotionEvent.ACTION_MOVE:
float xDelta = x - xLastIntercept;
float yDelta = y - yLastIntercept;
//视图总滑动距离小于屏幕宽度
if (x + getScrollX() < mScreenWidth) {
//1.消除纵向滑动冲突；2.忽略小于系统级别的滑动
if (Math.abs(xDelta) > Math.abs(yDelta) && Math.abs(xDelta) > mTouchSlop) { //X滑动主导
intercept = true;
} else {
intercept = false;
}
}
break;
case MotionEvent.ACTION_UP:
intercept = false;
break;
}
xLast = x;
xLastIntercept = x;
yLastIntercept = y;
return intercept;
}
@Override
public boolean onTouchEvent(MotionEvent event) {
int action = event.getAction();
float x = event.getX();
switch (action) {
case MotionEvent.ACTION_DOWN:
if (mScroller.isFinished()) {
mScroller.abortAnimation();
}
break;
case MotionEvent.ACTION_MOVE:
float offset = x - xLast;
if (getScrollX() - offset <= 0) {
offset = 0;
} else if (getScrollX() + mScreenWidth - offset > mScreenWidth * 2 - mMenuOffset) {
offset = 0;
}
//整个视图按照滑动变化，步进式的滑动
scrollBy((int) (-offset), 0);
// 获取菜单视图在横向滑动中的比例
float progress = 1 - getScrollX() * 1.0f / (mScreenWidth - mMenuOffset);
if (mListener != null) {
mListener.onProgressChange(progress, getScrollX());
}
break;
case MotionEvent.ACTION_UP:
//横向滑动的距离小于菜单宽度的一半时，菜单依旧保持打开
if (getScrollX() < (mScreenWidth - mMenuOffset) / 2) {
openMenu();
} else {
closeMenu();
}
break;
}
xLast = x;
return false;
}
@Override
public void computeScroll() {
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
postInvalidate();
}
super.computeScroll();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (!isMeasured) {
mMenuView = getChildAt(0);
mContentView = getChildAt(1);
mMenuView.getLayoutParams().width = mScreenWidth - mMenuOffset;
mMenuView.getLayoutParams().height = mScreenHeight;
mContentView.getLayoutParams().width = mScreenWidth;
mContentView.getLayoutParams().height = mScreenHeight;
measureChild(mMenuView, widthMeasureSpec, heightMeasureSpec);
measureChild(mContentView, widthMeasureSpec, heightMeasureSpec);
isMeasured = true;
}
setMeasuredDimension(mScreenWidth * 2 - mMenuOffset, mScreenHeight);
}
@Override
protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
if (b) {
mContentView.setClickable(true);
mMenuView.setClickable(true);
mMenuView.setBackgroundColor(Color.TRANSPARENT);
mMenuView.layout(0, 0, mScreenWidth - mMenuOffset, mScreenHeight);
mContentView.layout(mScreenWidth - mMenuOffset, 0, mScreenWidth - mMenuOffset + mScreenWidth, mScreenHeight);
//将视图向左移动，保持菜单隐藏
scrollTo(mScreenWidth - mMenuOffset, 0);
}
}
public void openMenu() {
mScroller.startScroll(getScrollX(), 0, 0 - getScrollX(), 0, 500);
if (mListener != null) {
mListener.onProgressChange(1, 0);
}
invalidate();
}
public void closeMenu() {
mScroller.startScroll(getScrollX(), 0, mScreenWidth - mMenuOffset - getScrollX(), 0);
if (mListener != null) {
mListener.onProgressChange(0, mScreenWidth - mMenuOffset);
}
invalidate();
}
/**
* 设置菜单右边距，这里按屏幕宽度 百分比取值
* @param factor 百分比系数（0-1.0 之前)
*/
public void setMenuOffset(float factor) {
if (Math.abs(factor) > 1.0) {
factor = 1.0f;
}
mMenuOffset = (int) (mScreenWidth * Math.abs(factor));
}
/**
* 获取视图的Activity实例，同时设置状态栏为透明色,保持菜单栏和视图内容可以沉寝式的显示。
* @param activity
*/
public void attachWithActivity(Activity activity) {
LiteMenuHelper.addStatusBar(activity);
}
public interface onMenuSwipeListener {
void onProgressChange(float progress, int scrollX);
}
public void setOnSwipeProgressListener(onMenuSwipeListener listener) {
this.mListener = listener;
}
}
一个标准的自定义ViewGroup实现。
首先说明一下，这个LiteSwipeMenu 在xml 布局文件中的使用规范
规范
在LiteSwipeMenu 内必须有两个直接的根布局，分别代表菜单内容和视图内容。
结合这个使用规则，来看代码就清晰很多了。在onMeasure和onLayout 方法中根据这两个直接子视图mMenuView和mContentView 完成整个控件的测量和布局工作。
- init中，初始化了对象，获取了屏幕的宽高。LiteMenuHelper是一个辅助类，内部是对工具类的封装；接下来就是滑动事件分发。
-
在onInterceptTouchEvent方法中，只有一种情况我们会拦截滑动事件，结合注释应该很容易理解。
-
在onTouchEvent 方法中，在ACTION_MOVE和ACTION_UP时的实现，结合注释很容易理解，这里为了方便，在ACTION_MOVE时我们通过接口把当前滑动的比例和整个视图的左边距暴露了出去，方便后续的实现。
-
attachWithActivity 方法是为了获取视图所在的Activity实例，在这个Activity实例的基础上，将状态栏设置为透明色，同时确保菜单滑动是不会被状态栏遮挡。
添加一个透明的状态栏
/**
* 在根视图基础上添加一个透明的状态栏
* @param activity
*/
public static void addStatusBar(Activity activity) {
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
// 设置状态栏透明
activity.getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
// 生成一个状态栏大小的矩形
// 添加 statusView 到布局中
View statusView = createStatusBarView(activity, Color.TRANSPARENT);
ViewGroup decorView = (ViewGroup) activity.getWindow().getDecorView();
if (decorView.getChildAt(decorView.getChildCount() - 1).getId() != Integer.valueOf(1)) {
decorView.addView(statusView, decorView.getChildCount());
}
// 设置根布局的参数
ViewGroup rootView = (ViewGroup) ((ViewGroup) activity.findViewById(android.R.id.content)).getChildAt(0);
rootView.setFitsSystemWindows(false);
rootView.setClipToPadding(false);
}
}
到这里，已经实现了侧滑菜单的整体效果，下面就看看如何结合接口实现滑动是的效果。
当LiteSwipeMenu遇见属性动画。
首先，看看如何实现上图中 QQ 侧滑菜单的效果。
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mContext = this;
setContentView(R.layout.activity_my_slide_view);
ButterKnife.bind(this);
LiteSwipeMenu mSwipeMenu = (LiteSwipeMenu) findViewById(R.id.mSwipeMenu);
mSwipeMenu.setMenuOffset(0.2f);
mSwipeMenu.attachWithActivity(this);
mSwipeMenu.setOnSwipeProgressListener(new LiteSwipeMenu.onMenuSwipeListener() {
@Override
public void onProgressChange(float progress, int scrollX) {
//结合滑动比，视图区域变暗效果
ViewCompat.setAlpha(mCover, progress / 2);
switch (mAnimations.getCheckedRadioButtonId()) {
case R.id.qq:
//菜单视图按比例进行轻微移动，呈现滑动时菜单栏和内容区域的视差移动效果
ViewCompat.setTranslationX(menuView, scrollX * progress);
if (progress > 0.5) {
//滑动到一半时，修改标题栏背景色
mToolbar.setBackgroundResource(R.color.white);
} else {
mToolbar.setBackgroundResource(R.color.colorPrimary);
}
break;
default:
break;
}
}
});
}
这里我们根据滑动比例，修改菜单栏的左边距及内容区域中色值，模仿了手Q的侧滑菜单效果。
结合之前的实践，我们可以做很多的实现更有趣的效果。
menu_3d.gif
menu_scale.gif
每一中效果，结合代码中注释，应该很好理解，也很简单。
mSwipeMenu.setOnSwipeProgressListener(new LiteSwipeMenu.onMenuSwipeListener() {
@Override
public void onProgressChange(float progress, int scrollX) {
//结合滑动比，视图区域变暗效果
ViewCompat.setAlpha(mCover, progress / 2);
switch (mAnimations.getCheckedRadioButtonId()) {
case R.id.scale:
//修改参考点为菜单栏中心，实现缩放动画
ViewCompat.setPivotX(menuView, menuView.getWidth() / 2);
ViewCompat.setPivotY(menuView, menuView.getHeight() / 2);
ViewCompat.setScaleX(menuView, progress);
ViewCompat.setScaleY(menuView, progress);
break;
case R.id.threeD:
// 以x轴菜单宽度1/3处为结点，沿着y轴做旋转
int base = 60;
ViewCompat.setPivotX(menuView, menuView.getWidth() / 3);
ViewCompat.setRotationY(menuView, -progress * (90 - base) + (90 - base));
break;
case R.id.contentScale:
// 内容视图做缩放动画
ViewCompat.setPivotX(mContent, mContent.getWidth() / 2);
ViewCompat.setPivotY(mContent, mContent.getHeight() / 2);
ViewCompat.setScaleX(mContent, 1 - progress / 4);
ViewCompat.setScaleY(mContent, 1 - progress / 4);
break;
case R.id.drawerLayout:
//将菜单栏上移至内容视图上层，实现DrawerLayout 效果
ViewCompat.setTranslationZ(menuView, 1);
float space = LiteMenuHelper.getScreenWidth(mContext) * 0.8f;
//内容视图反向滑动，抵消整个控件的滑动，使得内容视图看起来保持不同，而菜单栏滑动
ViewCompat.setTranslationX(mContent, scrollX - space);
ViewCompat.setTranslationX(menuView, -scrollX);
break;
default:
break;
}
}
});
mAnimations.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, @IdRes int checkedId) {
mToolbar.setBackgroundResource(R.color.colorPrimary);
if (checkedId == R.id.drawerLayout) {
ViewCompat.setTranslationZ(menuView, 1);
} else {
ViewCompat.setTranslationZ(menuView, 0);
}
}
});
DrawerLayout.gif
这里在强调一下最后一种效果，这里使用到了setTranslationZ这个方法，通过这个方法使View的层级发生变化，这里我们就通过ViewCompat.setTranslationZ(menuView, 1)，让菜单栏上移了一层，从而让SwipeMenu变成了DrawerLayout。
可以看到，集合属性动画的特点，我们可以通过滑动实现各种效果。
好了，关于属性动画的实践到这里就结束了。最后文中所有源码地址AndroidAnimationExercise。有兴趣的同学欢迎star & fork。
网友评论