前言 在微信是的处理方法是让用户滑动,但最终还是回滚到最初的地方,这样的效果很生动(毕竟成功还是取决于细节)。那么在安卓我们要怎么弄呢。下面为大家介绍一下JellyScroll
前言
在微信是的处理方法是让用户滑动,但最终还是回滚到最初的地方,这样的效果很生动(毕竟成功还是取决于细节)。那么在安卓我们要怎么弄呢。下面为大家介绍一下JellyScrollView,是我继承ScrollView的一个有阻尼的效果的果冻滑动控件。
下面话不多说了,先来看看效果图
(在虚拟机或者真机跑起来是很流畅,可能是录制视频做成gif的时候有点卡顿。)
实现原理
其实只需要重写下它的拦截方法的逻辑就好了,ScrollView的拦截方法onInterceptTouchEvent一般情况下都默认地返回false,表示不拦截该事件。我们只需要在用户滑动了界面的情况下,拦截下来并移动布局就好了,当用户松开手就恢复布局。很简单
第一步:集成ScrollView重写几个构造方法;
第二步:重写下onFinishInflate方法,获得第一个子view;
第三步:在拦截方法里面处理上面所说的逻辑;
public class JellyScrollView extends ScrollView {
private View inner;// 子View
private float y;// 点击时y坐标
private Rect nORMal = new Rect();// 矩形(这里只是个形式,只是用于判断是否需要动画.)
private boolean isCount = false;// 是否开始计算
private boolean isMoving = false;// 是否开始移动.
private int top;// 拖动时时高度。
private int mTouchSlop;//系统最少滑动距离
public JellyScrollView(Context context) {
super(context);
}
public JellyScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public JellyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();
}
@Override
protected void onFinishInflate() {
if (getChildCount() > 0) {
inner = getChildAt(0);
}
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (inner != null) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
y = ev.getY();
top = 0;
break;
case MotionEvent.ACTION_UP:
// 手指松开.
isMoving = false;
if (isNeedAnimation()) {
animation();
}
break;
case MotionEvent.ACTION_MOVE:
final float preY = y;// 按下时的y坐标
float nowY = ev.getY();// 每时刻y坐标
int deltaY = (int) (nowY - preY);// 滑动距离
if (!isCount) {
deltaY = 0; // 在这里要归0.
}
if (Math.abs(deltaY) < mTouchSlop && top <= 0)
return true;
// 当滚动到最上或者最下时就不会再滚动,这时移动布局
isNeedMove();
if (isMoving) {
// 初始化头部矩形
if (normal.isEmpty()) {
// 保存正常的布局位置
normal.set(inner.getLeft(), inner.getTop(), inner.getRight(), inner.getBottom());
}
// 移动布局
inner.layout(inner.getLeft(), inner.getTop() + deltaY / 3, inner.getRight(), inner.getBottom() + deltaY / 3);
top += (deltaY / 6);
}
isCount = true;
y = nowY;
break;
}
}
return super.onInterceptTouchEvent(ev);
}
public void animation() {
// 开启移动动画
TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(), normal.top);
ta.setDuration(200);
inner.startAnimation(ta);
// 设置回到正常的布局位置
inner.layout(normal.left, normal.top, normal.right, normal.bottom);
normal.setEmpty();
// 手指松开要归0.
isCount = false;
y = 0;
}
// 是否需要开启动画
public boolean isNeedAnimation() {
return !normal.isEmpty();
}
public void isNeedMove() {
int offset = inner.getMeasuredHeight() - getHeight();
int scrollY = getScrollY();
// scrollY == 0是顶部
// scrollY == offset是底部
if (scrollY == 0 || scrollY == offset) {
isMoving = true;
}
}
}
然后在布局里面在最外层就使用我们的JellyScrollView
(为了方便展示,我只是大概写了一部分布局代码)
<?xml version="1.0" encoding="utf-8"?><cn.ichengxi.fang.view.JellyScrollView xmlns:Android="Http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/bg"
android:scrollbars="none">
<LinearLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView android:id="@+id/personal_setting_txt"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:alpha="0.8"
android:gravity="center_vertical"
android:text="设置"
android:textColor="@android:color/black" />
</LinearLayout></cn.ichengxi.fang.view.JellyScrollView>12345678910111213141516171819202122231234567891011121314151617181920212223
总结
好了,这样就可以很优雅的实现了果冻控件的效果啦。以上就是本文的全部内容了,希望这篇文章的内容对大家能有所帮助,如果有疑问大家可以留言交流。
您可能感兴趣的文章:Android自定义View实现随手势滑动控件Android控件SeekBar仿淘宝滑动验证效果Android自定义滑动接听电话控件组实例Android仿微信列表滑动删除之可滑动控件(一)Android实现iOS相机滑动控件Android自定义控件实现滑动开关效果Android自定义控件实现可左右滑动的导航条使用Android自定义控件实现滑动解锁九宫格Android控件之SlidingDrawer(滑动式抽屉)详解与实例分享Android开源堆叠滑动控件仿探探效果
--结束END--
本文标题: Android实现果冻滑动效果的控件
本文链接: https://www.lsjlt.com/news/23239.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-21
2023-10-28
2023-10-28
2023-10-27
2023-10-27
2023-10-27
2023-10-27
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0