Android编写界面交互代码,android仿音悦台页面交互效果实例代码

概述

新版的音悦台 APP 播放页面交互非常有意思，可以把播放器往下拖动，然后在底部悬浮一个小框，还可以左右拖动，然后回弹的时候也会有相应的效果，这种交互效果在头条视频和一些专注于视频的app也是很常见的。

前几天看网友有仿这个 效果，觉得不错，现在分享出来，代码可以再优化，这里的播放器使用的是B站的ijkplayer，先上两张动图。

当图片到达底部后，左右拖动

实现的思路

首先，要是拖动视图缩小的效果，我们肯定需要自定义一个View，而根据我们项目的场景我们这里需要两个View，一个是拖动的View，另一个是浮动上下的View(可以缩小的View)，为了实现拖动，我们知道必定会用到ViewDragHelper这个类，这个类专门为了拖动而设计的。

然后，对于拖动到底部的View，我们需要实现左右拖动的效果，这个其实也是比较容易实现的，我们通过ViewDragHelper的onViewPositionChanged方法来判断当前视图的状况，就可以做View进行缩放和渐变了。

代码分析

首先我们会自定义一个容器，容器的init方法会初始化两个View：mFlexView (到底拖动的View)和mFollowView (跟随触摸缩放的View)

private void init(Context context, AttributeSet attrs) {

final float density = getResources().getDisplayMetrics().density;

final float minVel = MIN_FLING_VELOCITY * density;

ViewGroupCompat.setMotionEventSplittingEnabled(this, false);

FlexCallback flexCallback = new FlexCallback();

mDragHelper = ViewDragHelper.create(this, 1.0f, flexCallback);

// 最小拖动速度

mDragHelper.setMinVelocity(minVel);

post(new Runnable() {

@Override

public void run() {

// 需要添加的两个子View，其中mFlexView作为拖动的响应View，mLinkView作为跟随View

mFlexView = getChildAt(0);

mFollowView = getChildAt(1);

mDragHeight = getMeasuredHeight() - mFlexView.getMeasuredHeight();

mFlexWidth = mFlexView.getMeasuredWidth();

mFlexHeight = mFlexView.getMeasuredHeight();

}

});

}

ViewDragHelper 的回调需要做的事情比较多，在 mFlexView 拖动的时候需要同时设置 mFlexView 和 mFollowView 的相应变化效果，在 mFlexView 释放的时候需要处理关闭或收起等效果。所以这里我们需要对ViewDragHelper个各种回调事件进行监听。这也是本功能最核心的：

private class FlexCallback extends ViewDragHelper.Callback {

@Override

public boolean tryCaptureView(View child, int pointerId) {

// mFlexView来响应触摸事件

return mFlexView == child;

}

@Override

public int clampViewPositionHorizontal(View child, int left, int dx) {

return Math.max(Math.min(mDragWidth, left), -mDragWidth);

}

@Override

public int getViewHorizontalDragRange(View child) {

return mDragWidth * 2;

}

@Override

public int clampViewPositionVertical(View child, int top, int dy) {

if (!mVerticalDragEnable) {

// 不允许垂直拖动的时候是mFlexView在底部水平拖动一定距离时设置的，返回mDragHeight就不能再垂直做拖动了

return mDragHeight;

}

return Math.max(Math.min(mDragHeight, top), 0);

}

@Override

public int getViewVerticalDragRange(View child) {

return mDragHeight;

}

@Override

public void onViewReleased(View releasedChild, float xvel, float yvel) {

if (mHorizontalDragEnable) {

// 如果水平拖动有效，首先根据拖动的速度决定关闭页面，方向根据速度正负决定

if (xvel > 1500) {

mDragHelper.settleCapturedViewAt(mDragWidth, mDragHeight);

mIsClosing = true;

} else if (xvel < -1500) {

mDragHelper.settleCapturedViewAt(-mDragWidth, mDragHeight);

mIsClosing = true;

} else {

// 速度没到关闭页面的要求，根据透明度来决定关闭页面，方向根据releasedChild.getLeft()正负决定

float alpha = releasedChild.getAlpha();

if (releasedChild.getLeft() < 0 && alpha <= 0.4f) {

mDragHelper.settleCapturedViewAt(-mDragWidth, mDragHeight);

mIsClosing = true;

} else if (releasedChild.getLeft() > 0 && alpha <= 0.4f) {

mDragHelper.settleCapturedViewAt(mDragWidth, mDragHeight);

mIsClosing = true;

} else {

mDragHelper.settleCapturedViewAt(0, mDragHeight);

}

}

} else {

// 根据垂直方向的速度正负决定布局的展示方式

if (yvel > 1500) {

mDragHelper.settleCapturedViewAt(0, mDragHeight);

} else if (yvel < -1500) {

mDragHelper.settleCapturedViewAt(0, 0);

} else {

// 根据releasedChild.getTop()决定布局的展示方式

if (releasedChild.getTop() <= mDragHeight / 2) {

mDragHelper.settleCapturedViewAt(0, 0);

} else {

mDragHelper.settleCapturedViewAt(0, mDragHeight);

}

}

}

invalidate();

}

@Override

public void onViewPositionChanged(final View changedView, int left, int top, int dx, int dy) {

float fraction = top * 1.0f / mDragHeight;

// mFlexView缩放的比率

mFlexScaleRatio = 1 - 0.5f * fraction;

mFlexScaleOffset = changedView.getWidth() / 20;

// 设置缩放基点

changedView.setPivotX(changedView.getWidth() - mFlexScaleOffset);

changedView.setPivotY(changedView.getHeight() - mFlexScaleOffset);

// 设置比例

changedView.setScaleX(mFlexScaleRatio);

changedView.setScaleY(mFlexScaleRatio);

// mFollowView透明度的比率

float alphaRatio = 1 - fraction;

// 设置透明度

mFollowView.setAlpha(alphaRatio);

// 根据垂直方向的dy设置top，产生跟随mFlexView的效果

mFollowView.setTop(mFollowView.getTop() + dy);

// 到底部的时候，changedView的top刚好等于mDragHeight，以此作为水平拖动的基准

mHorizontalDragEnable = top == mDragHeight;

if (mHorizontalDragEnable) {

// 如果水平拖动允许的话，由于设置缩放不会影响mFlexView的宽高(比如getWidth)，所以水平拖动距离为mFlexView宽度一半

mDragWidth = (int) (changedView.getMeasuredWidth() * 0.5f);

// 设置mFlexView的透明度，这里向左右水平拖动透明度都随之变化

changedView.setAlpha(1 - Math.abs(left) * 1.0f / mDragWidth);

// 水平拖动一定距离的话，垂直拖动将被禁止

mVerticalDragEnable = left < 0 && left >= -mDragWidth * 0.05;

} else {

// 不是水平拖动的处理

changedView.setAlpha(1);

mDragWidth = 0;

mVerticalDragEnable = true;

}

if (mFlexLayoutPosition == null) {

// 创建子元素位置缓存

mFlexLayoutPosition = new ChildLayoutPosition();

mFollowLayoutPosition = new ChildLayoutPosition();

}

// 记录子元素的位置

mFlexLayoutPosition.setPosition(mFlexView.getLeft(), mFlexView.getRight(), mFlexView.getTop(), mFlexView.getBottom());

mFollowLayoutPosition.setPosition(mFollowView.getLeft(), mFollowView.getRight(), mFollowView.getTop(), mFollowView.getBottom());

// Log.e("FlexCallback", "225行-onViewPositionChanged(): 【" + mFlexView.getLeft() + ":" + mFlexView.getRight() + ":" + mFlexView.getTop() + ":" + mFlexView

// .getBottom() + "】 【" + mFollowView.getLeft() + ":" + mFollowView.getRight() + ":" + mFollowView.getTop() + ":" + mFollowView.getBottom() + "】");

}

}

接下来是处理测量和定位，我们实现的排列效果类似 LinearLayout 垂直排列的效果，这里需要对 measureChildWithMargins 的 heightUse 重新设置；onLayout 的时候在位置缓存不为空的时候直接定位是因为 ViewDragHelper 在处理触摸事件子元素在做一些平移之类的，若是有元素更新了 UI 会导致重新 Layout，因此在 FlexCallback 的 onViewPositionChanged 方法记录位置，然后在回弹的时候需要通过Layout 恢复之前的视图。

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int desireHeight = 0;

int desireWidth = 0;

int tmpHeight = 0;

if (getChildCount() != 2) {

throw new IllegalArgumentException("只允许容器添加两个子View！");

}

if (getChildCount() > 0) {

for (int i = 0; i < getChildCount(); i++) {

final View child = getChildAt(i);

// 测量子元素并考虑外边距

// 参数heightUse：父容器竖直已经被占用的空间，比如被父容器的其他子 view 所占用的空间；这里我们需要的是子View垂直排列，所以需要设置这个值

measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, tmpHeight);

// 获取子元素的布局参数

final MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

// 计算子元素宽度，取子控件最大宽度

desireWidth = Math.max(desireWidth, child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin);

// 计算子元素高度

tmpHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;

desireHeight += tmpHeight;

}

// 考虑父容器内边距

desireWidth += getPaddingLeft() + getPaddingRight();

desireHeight += getPaddingTop() + getPaddingBottom();

// 尝试比较建议最小值和期望值的大小并取大值

desireWidth = Math.max(desireWidth, getSuggestedMinimumWidth());

desireHeight = Math.max(desireHeight, getSuggestedMinimumHeight());

}

// 设置最终测量值

setMeasuredDimension(resolveSize(desireWidth, widthMeasureSpec), resolveSize(desireHeight, heightMeasureSpec));

}

@Override

protected void onLayout(boolean changed, int l, int t, int r, int b) {

if (mFlexLayoutPosition != null) {

// 因为在用到ViewDragHelper处理布局交互的时候，若是有子View的UI更新导致重新Layout的话，需要我们自己处理ViewDragHelper拖动时子View的位置，否则会导致位置错误

// Log.e("YytLayout1", "292行-onLayout(): " + "自己处理布局位置");

mFlexView.layout(mFlexLayoutPosition.getLeft(), mFlexLayoutPosition.getTop(), mFlexLayoutPosition.getRight(), mFlexLayoutPosition.getBottom());

mFollowView.layout(mFollowLayoutPosition.getLeft(), mFollowLayoutPosition.getTop(), mFollowLayoutPosition.getRight(), mFollowLayoutPosition.getBottom());

return;

}

final int paddingLeft = getPaddingLeft();

final int paddingTop = getPaddingTop();

int multiHeight = 0;

int count = getChildCount();

if (count != 2) {

throw new IllegalArgumentException("此容器的子元素个数必须为2！");

}

for (int i = 0; i < count; i++) {

// 遍历子元素并对其进行定位布局

final View child = getChildAt(i);

MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

int left = paddingLeft + lp.leftMargin;

int right = child.getMeasuredWidth() + left;

int top = (i == 0 ? paddingTop : 0) + lp.topMargin + multiHeight;

int bottom = child.getMeasuredHeight() + top;

child.layout(left, top, right, bottom);

multiHeight += (child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin);

}

}

触摸事件的处理，由于缩放不会影响 mFlexView 真实宽高，ViewDragHelper 仍然会阻断 mFlexView 的真实宽高的区域，所以这里判断手指是否落在 mFlexView 视觉上的范围内，在才去调 ViewDragHelper 的 shouldInterceptTouchEvent 方法。

@Override

public boolean onInterceptTouchEvent(MotionEvent ev) {

// Log.e("YytLayout", mFlexView.getLeft() + ";" + mFlexView.getTop() + " --- " + ev.getX() + ":" + ev.getY());

// 由于缩放不会影响mFlexView真实宽高，这里手动计算视觉上的范围

float left = mFlexView.getLeft() + mFlexWidth * (1 - mFlexScaleRatio) - mFlexScaleOffset * (1 - mFlexScaleRatio);

float top = mFlexView.getTop() + mFlexHeight * (1 - mFlexScaleRatio) - mFlexScaleOffset * (1 - mFlexScaleRatio);

// 这里所做的是判断手指是否落在mFlexView视觉上的范围内

mInFlexViewTouchRange = ev.getX() >= left && ev.getY() >= top;

if (mInFlexViewTouchRange) {

return mDragHelper.shouldInterceptTouchEvent(ev);

} else {

return super.onInterceptTouchEvent(ev);

}

}

@Override

public boolean onTouchEvent(MotionEvent event) {

if (mInFlexViewTouchRange) {

// 这里还要做判断是因为，即使我不阻断事件，但是此Layout的子View不消费的话，事件还是给回此Layout

mDragHelper.processTouchEvent(event);

return true;

} else {

// 不在mFlexView触摸范围内，并且子View没有消费，返回false，把事件传递回去

return false;

}

}

同时我们需要对滚动事件进行监听，我们需要在此关闭的整个平移执行事件。

@Override

public void computeScroll() {

if (mDragHelper.continueSettling(true)) {

invalidate();

} else if (mIsClosing && mOnLayoutStateListener != null) {

// 正在关闭的情况下，并且拖动结束后，告知将要关闭页面

mOnLayoutStateListener.onClose();

mIsClosing = false;

}

}

/**

* 监听布局是否水平拖动关闭了

*/

public interface OnLayoutStateListener {

void onClose();

}

public void setOnLayoutStateListener(OnLayoutStateListener onLayoutStateListener) {

mOnLayoutStateListener = onLayoutStateListener;

}

/**

* 展开布局

*/

public void expand() {

mDragHelper.smoothSlideViewTo(mFlexView, 0, 0);

invalidate();

}

而在实际的应用中要实现回弹后详情页面的效果，我们需要自己实现一个组合View，这个大家可以自己看源码音悦台源码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。