概述
新版的音悦台 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，这个大家可以自己看
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
Android安卓水滴屏适配状态栏图标（图标过多时显示一个点）
android studio使用Flutter创建web项目
android如何使用taskAffinity属性对任务栈操作控制
android对PDF文件的操作（上传、预览、下载和转存相册）
Android通过代码批量生成字符图标用于给输入法显示状态栏的图标
网友评论