使用MotionLayout实现高德地图bottomSheets效果
高德效果 android
- 搜到的一个效果，附上连接,用的behavior，我没下源码看，由于我只是想尝试另一种方式。具体效果暂不知
Android 仿高德地图可拉伸的BottomSheet
如下是我用motionlayout实现的效果，没有达到丝滑流畅，优化就看小伙伴你了git
原因
- 使用高德地图的时候看着这种体验很好，随后就想试试怎么达到相似效果
- 最近正在看MotionLayout的东西，正好就尝试尝试
MotionLayout
「译」 MotionLayout 介绍 (Part I - IV)系列教会你如何使用MotionLayout- 这里不作过多描述，总结一下在xml文件夹下建立
xxscene.xml主要用于描述场景动画的关键帧和view状态变化等 xxscene.xml内容包括 主要为3个关键内容：
Transition过渡
constraintSetStart:启动约束场景github
constraintSetEnd：结束约束场景express
app:dragDirection="dragUp" 拽动(拖拉)apache
KeyFrameSet关键帧集合
KeyAttribute关键帧bash
app:framePosition 位置，进度app
app:target="@id/xxx 被描述的view id框架
ConstraintSet约束集合
<Transition
app:constraintSetEnd="@id/slideup_end"
app:constraintSetStart="@id/slideup_start"
app:duration="600"
app:interpolator="easeIn">
<OnSwipe
app:dragDirection="dragUp"
app:maxAcceleration="600"
app:touchAnchorSide="top"
app:touchAnchorId="@id/content"
/>
<KeyFrameSet>
<KeyAttribute
android:alpha="0"
app:framePosition="45"
app:target="@id/sugar_title" />
<KeyAttribute
android:alpha="1"
app:framePosition="90"
app:target="@id/sugar_title" />
...
</KeyFrameSet>
</Transition>
<ConstraintSet android:id="@+id/slideup_start">
<Constraint
···
/>
...
</ConstraintSet>
复制代码
拆解过程
- 高德地图是上拉以后是三段式的，如图所示
MotionLayout就只有一个初始约束和结束约束，没有中间约束，如何实现这种三段式效果？- 答: 使用progress,
MotionLayout自带进度 - 有进度，何时执行下一步操做，何时又执行上一步操做？
- 答: 根据手势，咱们能够判断用户下一步是往上拉仍是下拉，设定阶段阀值，超过进入下一步，未超过回到以前一步
- 高德地图中，只有手触碰到bottomview的时候手势才有效果，因此还须要判断touch事件是否在view范围内
拆解完毕less
实现过程
- 设置阀值
/**
* 初始位置
*/
public final static float PROGRESS_START = 0f;
/**
* 顶部阀值
*/
public final static float PROGRESS_TOP = 0.9f;
/**
* 低部阀值
*/
public final static float PROGRESS_BOTTOM = 0.1f;
/**
* 中间位置
*/
public final static float PROGRESS_MIDDLE = 0.6f;
/**
* 结束位置
*/
public final static float PROGRESS_END = 1.0f;
复制代码
- 重写
MotionLayout的onTouchEvent事件 ,使用hasMiddle布尔值判断是否有中间状态
@Override
public boolean onTouchEvent(MotionEvent event) {
float progress = getProgress();
View viewGroup = findViewById(R.id.content);
Rect mRect = new Rect();
if (!mTouchStared) {
viewGroup.getHitRect(mRect);
mTouchStared = mRect.contains((int) event.getX(), (int) event.getY());
}
float endY;
if (hasMiddle) {
switch (event.getActionMasked()) {
case MotionEvent.ACTION_CANCEL:
mTouchStared = false;
break;
case MotionEvent.ACTION_DOWN:
startY = event.getY();
break;
case MotionEvent.ACTION_UP:
endY = event.getY();
//手势向下
if ((endY - startY) > 0) {
if (progress >= PROGRESS_TOP) {
mTouchStared = false;
handleProgress(PROGRESS_END);
}
if (progress < PROGRESS_TOP && progress >= PROGRESS_MIDDLE) {
handleProgress(PROGRESS_MIDDLE);
}
if (progress < PROGRESS_MIDDLE) {
handleProgress(PROGRESS_START);
}
//手势向上
} else {
if (progress <= PROGRESS_BOTTOM) {
handleProgress(PROGRESS_START);
}
if (progress > PROGRESS_BOTTOM && progress <= PROGRESS_MIDDLE) {
handleProgress(PROGRESS_MIDDLE);
}
if (progress > PROGRESS_MIDDLE) {
mTouchStared = false;
handleProgress(PROGRESS_END);
}
}
return mTouchStared;
}
} else {
if (event.getActionMasked() == MotionEvent.ACTION_CANCEL || event.getActionMasked() == MotionEvent.ACTION_UP) {
mTouchStared = false;
return super.onTouchEvent(event);
}
}
return mTouchStared && super.onTouchEvent(event);
}
复制代码
bottom_scene.xml
- 上拉超过顶部阀值
PROGRESS_TOP以后标题出如今屏幕内，其他时候出如今屏幕外便可； - 初始状态这里把
scaleX和scaleY设为0.9结束设为了1，仅仅是为了过渡好看，你能够不用设置随意修改便可 - 背景色过渡，最开始透明，结束为白色背景。中间过渡关键帧95变纯白背景
结果和改进
- 设置容许中间状态后，以后进入下一步的过程，如图，过于生硬
- 改进方向
- 动画应该是匀速的，然而
setProgress(pro);倒是一步直达； - 设置时间间隔匀速达到最后的进度便可，源码已详细注释。改进以后见最上面效果图；
private void handleProgress(float progress) {
//若是须要设置的进度和当前进度相同不作处理
if (progress == getProgress()){
return;
}
//动画播放时间底值
long time = 200;
//进度间隔 >0 说明上拉 < 0说明下滑
float interval = progress - getProgress();
long startTime, endTime;
if (interval > 0) {
startTime = (long) (getProgress() * time);
endTime = (long) (progress * time);
} else {
endTime = (long) (getProgress() * time);
startTime = (long) (progress * time);
}
if (timeDisposable != null){
timeDisposable.dispose();
}
//startTime 初始时间 endTime - startTime为次数 0为延迟时间 3为间隔 单位TimeUnit.MILLISECONDS 毫秒
timeDisposable = Observable.intervalRange(startTime, endTime - startTime, 0, 3, TimeUnit.MILLISECONDS)
.observeOn(Schedulers.io())
.compose(((BaseActivity) getContext()).getProvider().bindToLifecycle())
.observeOn(AndroidSchedulers.mainThread())
.map(new Function<Long, Long>() {
@Override
public Long apply(Long aLong) throws Exception {
//下滑须要反向
if (interval < 0) {
long interStart = aLong - startTime;
return endTime - interStart;
}
return aLong;
}
})
.subscribe(new Consumer<Long>() {
@Override
public void accept(Long aLong) throws Exception {
float pro = (Float.valueOf(aLong) / time);
setProgress(pro);
}
});
}
复制代码
源码已放入sugar demo中，sugar是我会长期维护的一个库⬇️⬇️⬇️ide
🍯 Sugar 简单便捷 快速开发Android项目，集合流行框架封装
About me
- Email: a420245103@gmail.com
- 掘金: juejin.im/user/568be8…
- 简书: www.jianshu.com/u/114bbbfb9…
- apkbus: www.apkbus.com/?496060
- github: github.com/wobiancao
License
Copyright 2019, wobiancao
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
复制代码
相关文章
- 1. Android 使用高德地图简单实现地图定位
- 2. Nuxt使用高德地图
- 3. flutter高德地图使用
- 4. 常见的js效果（二）之高德地图的应用
- 5. 高德地图之热力图的3D立体效果展示
- 6. 高德地图实现marker水波纹雷达扩散覆盖效果
- 7. QML实现高德地图显示
- 8. 高德地图定位实现
- 9. [Android]实现高德地图导航
- 10. 高德地图实现（附案例）
- 更多相关文章...
- • SVG 模糊效果 - SVG 教程
- • 使用Redis和Lua的原子性实现抢红包功能 - 红包项目实战
- • ☆基于Java Instrument的Agent实现
- • Java Agent入门实战（一）-Instrumentation介绍与使用
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. Android 使用高德地图简单实现地图定位
- 2. Nuxt使用高德地图
- 3. flutter高德地图使用
- 4. 常见的js效果（二）之高德地图的应用
- 5. 高德地图之热力图的3D立体效果展示
- 6. 高德地图实现marker水波纹雷达扩散覆盖效果
- 7. QML实现高德地图显示
- 8. 高德地图定位实现
- 9. [Android]实现高德地图导航
- 10. 高德地图实现（附案例）