仿ios 可滑动的ScrollView

最新推荐文章于 2021-05-26 08:40:43 发布
最新推荐文章于 2021-05-26 08:40:43 发布
阅读量362 收藏
点赞数
分类专栏： 日常笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_35957672/article/details/89178781
版权
本文介绍了一种自定义的ScrollView实现方案，通过继承ScrollView并调整其行为，使其能够实现类似于iOS系统的可拉伸View效果，提供了更流畅的用户体验。自定义的UserDefineScrollView允许在上拉和下拉时延迟响应，同时在手指离开屏幕时自动平滑返回原位。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

本人在开发过程中页面效果由于使用android本身控件无法达到ios那种可拉伸的View,感到很不爽,因为ios总是可以滑动,避免再添加功能时重新布局的麻烦,所以整了一下,显示了可拉伸的view,终于可以与ios保持一致了.

创建一个自定义view ,UserDefineScrollView 继承ScrollView,

 // 移动因子, 是一个百分比, 比如手指移动了100px, 那么View就只移动50px
// 目的是达到一个延迟的效果
    private static final float MOVE_FACTOR = 0.5f;
    // 松开手指后, 界面回到正常位置需要的动画时间
    private static final int ANIM_TIME = 300;
     // ScrollView的子View， 也是ScrollView的唯一一个子View
    private View contentView;
    // 手指按下时的Y值, 用于在移动时计算移动距离
// 如果按下时不能上拉和下拉， 会在手指移动时更新为当前手指的Y值
    private float startY;
    float nowY;
    int deltaY;
    // 用于记录正常的布局位置
    private Rect originalRect = new Rect();
    // 手指按下时记录是否可以继续下拉
    private boolean canPullDown = false;
    // 手指按下时记录是否可以继续上拉
    private boolean canPullUp = false;
    // 在手指滑动的过程中记录是否移动了布局
    private boolean isMoved = false;
    private IXListViewListener mListViewListener;

实现自定义view的三个构造方法,

接着实现onLayout() ,设置布局位置

 @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (contentView == null)
            return;
// ScrollView中的唯一子控件的位置信息, 这个位置信息在整个控件的生命周期中保持不变
        originalRect.set(contentView.getLeft(), contentView.getTop(),
                contentView.getRight(), contentView.getBottom());
    }

分发事件开始;
当前布局滑动的超过底部或者顶部,表示已经滑动出scrollView之外,
isTouchOutOfScrollView = ev.getY() >= this.getHeight() || ev.getY() <= 0

 if (isTouchOutOfScrollView) { // 如果移动到了当前ScrollView控件之外
            if (isMoved) // 如果当前contentView已经被移动, 首先把布局移到原位置, 然后消费点这个事件
                boundBack();
            return true;
        }

开启动画回到原来位置

 /**
     * 将内容布局移动到原位置 可以在UP事件中调用, 也可以在其他需要的地方调用, 如手指移动到当前ScrollView外时
     */
    private void boundBack() {
        if (!isMoved)
            return; // 如果没有移动布局， 则跳过执行
// 开启动画
        TranslateAnimation anim = new TranslateAnimation(0, 0,
                contentView.getTop(), originalRect.top);
        anim.setDuration(ANIM_TIME);
        contentView.startAnimation(anim);
// 设置回到正常的布局位置
        contentView.layout(originalRect.left, originalRect.top,
                originalRect.right, originalRect.bottom);
// 将标志位设回false
        canPullDown = false;
        canPullUp = false;
        isMoved = false;

//deltaY>0是下拉;deltaY<0是上拉
        if(deltaY>0 && mListViewListener!=null)
        {
            mListViewListener.onRefresh();
        }
    }

判断是否滚动到顶部和底部

/**
     * 判断是否滚动到顶部
     */
    private boolean isCanPullDown() {
        return getScrollY() == 0 || contentView.getHeight() < getHeight() + getScrollY();
    }


    /**
     * 判断是否滚动到底部
     */
    private boolean isCanPullUp() {
        return contentView.getHeight() <= getHeight() + getScrollY();
    }


/**
     * 在触摸事件中, 处理上拉和下拉的逻辑
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (contentView == null) {
            return super.dispatchTouchEvent(ev);
        }
// 手指是否移动到了当前ScrollView控件之外
        boolean isTouchOutOfScrollView = ev.getY() >= this.getHeight()
                || ev.getY() <= 0;

//   	 	if(ev.getY() >= this.getHeight()){
//        	Log.e("wudi", "ev.getY() >= this.getHeight()="+ev.getY()+",height="+ this.getHeight());
//        	
//        }
//        if(ev.getY() <= 0){
//        	Log.e("wudi", "ev.getY() <= 0="+ev.getY()+",height="+ this.getHeight());
//        
//        }
//        
        
//        Log.e("wudi", "ev.getY() <= 0="+ev.getY()+",height="+ this.getHeight());
        
//        mListViewListener.onDexY((int)ev.getY());
        if (isTouchOutOfScrollView) { // 如果移动到了当前ScrollView控件之外
            if (isMoved) // 如果当前contentView已经被移动, 首先把布局移到原位置, 然后消费点这个事件
                boundBack();
            return true;
        }
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
// 判断是否可以上拉和下拉
                canPullDown = isCanPullDown();
                canPullUp = isCanPullUp();
// 记录按下时的Y值
                startY = ev.getY();
                break;
            case MotionEvent.ACTION_UP:
                boundBack();
                break;
            case MotionEvent.ACTION_MOVE:


// 在移动的过程中， 既没有滚动到可以上拉的程度， 也没有滚动到可以下拉的程度
                if (!canPullDown && !canPullUp) {
                    startY = ev.getY();
                    canPullDown = isCanPullDown();
                    canPullUp = isCanPullUp();
                    break;
                }
// 计算手指移动的距离
                nowY = ev.getY();
                deltaY = (int) (nowY - startY);
     
                
// 是否应该移动布局
                boolean shouldMove = (canPullDown && deltaY > 0) // 可以下拉， 并且手指向下移动
                        || (canPullUp && deltaY < 0) // 可以上拉， 并且手指向上移动
                        || (canPullUp && canPullDown); // 既可以上拉也可以下拉（这种情况出现在ScrollView包裹的控件比ScrollView还小）
                if (shouldMove) {
// 计算偏移量
                    int offset = (int) (deltaY * MOVE_FACTOR);
// 随着手指的移动而移动布局
                    contentView.layout(originalRect.left,
                            originalRect.top + offset, originalRect.right,
                            originalRect.bottom + offset);
                    isMoved = true; // 记录移动了布局
                }
                break;
            default:

                break;
        }
        return super.dispatchTouchEvent(ev);
    }

整理后的view

public class UserDefineScrollView extends ScrollView{


    private static final String TAG = "UserDefineScrollView ";
    // 移动因子, 是一个百分比, 比如手指移动了100px, 那么View就只移动50px
// 目的是达到一个延迟的效果
    private static final float MOVE_FACTOR = 0.5f;
    // 松开手指后, 界面回到正常位置需要的动画时间
    private static final int ANIM_TIME = 300;
    // ScrollView的子View， 也是ScrollView的唯一一个子View
    private View contentView;
    // 手指按下时的Y值, 用于在移动时计算移动距离
// 如果按下时不能上拉和下拉， 会在手指移动时更新为当前手指的Y值
    private float startY;
    float nowY;
    int deltaY;
    // 用于记录正常的布局位置
    private Rect originalRect = new Rect();
    // 手指按下时记录是否可以继续下拉
    private boolean canPullDown = false;
    // 手指按下时记录是否可以继续上拉
    private boolean canPullUp = false;
    // 在手指滑动的过程中记录是否移动了布局
    private boolean isMoved = false;
    private IXListViewListener mListViewListener;
    public UserDefineScrollView(Context context) {
        super(context);

    }


    public UserDefineScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }


    @SuppressLint("MissingSuperCall")
    @Override
    protected void onFinishInflate() {
        if (getChildCount() > 0) {
            contentView = getChildAt(0);
        }
    }



    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (contentView == null)
            return;
// ScrollView中的唯一子控件的位置信息, 这个位置信息在整个控件的生命周期中保持不变
        originalRect.set(contentView.getLeft(), contentView.getTop(),
                contentView.getRight(), contentView.getBottom());
    }


    /**
     * 在触摸事件中, 处理上拉和下拉的逻辑
     */
    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        if (contentView == null) {
            return super.dispatchTouchEvent(ev);
        }
// 手指是否移动到了当前ScrollView控件之外
        boolean isTouchOutOfScrollView = ev.getY() >= this.getHeight()
                || ev.getY() <= 0;

//   	 	if(ev.getY() >= this.getHeight()){
//        	Log.e("wudi", "ev.getY() >= this.getHeight()="+ev.getY()+",height="+ this.getHeight());
//        	
//        }
//        if(ev.getY() <= 0){
//        	Log.e("wudi", "ev.getY() <= 0="+ev.getY()+",height="+ this.getHeight());
//        
//        }
//        
        
//        Log.e("wudi", "ev.getY() <= 0="+ev.getY()+",height="+ this.getHeight());
        
//        mListViewListener.onDexY((int)ev.getY());
        if (isTouchOutOfScrollView) { // 如果移动到了当前ScrollView控件之外
            if (isMoved) // 如果当前contentView已经被移动, 首先把布局移到原位置, 然后消费点这个事件
                boundBack();
            return true;
        }
        int action = ev.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
// 判断是否可以上拉和下拉
                canPullDown = isCanPullDown();
                canPullUp = isCanPullUp();
// 记录按下时的Y值
                startY = ev.getY();
                break;
            case MotionEvent.ACTION_UP:
                boundBack();
                break;
            case MotionEvent.ACTION_MOVE:


// 在移动的过程中， 既没有滚动到可以上拉的程度， 也没有滚动到可以下拉的程度
                if (!canPullDown && !canPullUp) {
                    startY = ev.getY();
                    canPullDown = isCanPullDown();
                    canPullUp = isCanPullUp();
                    break;
                }
// 计算手指移动的距离
                nowY = ev.getY();
                deltaY = (int) (nowY - startY);
     
                
// 是否应该移动布局
                boolean shouldMove = (canPullDown && deltaY > 0) // 可以下拉， 并且手指向下移动
                        || (canPullUp && deltaY < 0) // 可以上拉， 并且手指向上移动
                        || (canPullUp && canPullDown); // 既可以上拉也可以下拉（这种情况出现在ScrollView包裹的控件比ScrollView还小）
                if (shouldMove) {
// 计算偏移量
                    int offset = (int) (deltaY * MOVE_FACTOR);
// 随着手指的移动而移动布局
                    contentView.layout(originalRect.left,
                            originalRect.top + offset, originalRect.right,
                            originalRect.bottom + offset);
                    isMoved = true; // 记录移动了布局
                }
                break;
            default:

                break;
        }
        return super.dispatchTouchEvent(ev);
    }


    /**
     * 将内容布局移动到原位置 可以在UP事件中调用, 也可以在其他需要的地方调用, 如手指移动到当前ScrollView外时
     */
    private void boundBack() {
        if (!isMoved)
            return; // 如果没有移动布局， 则跳过执行
// 开启动画
        TranslateAnimation anim = new TranslateAnimation(0, 0,
                contentView.getTop(), originalRect.top);
        anim.setDuration(ANIM_TIME);
        contentView.startAnimation(anim);
// 设置回到正常的布局位置
        contentView.layout(originalRect.left, originalRect.top,
                originalRect.right, originalRect.bottom);
// 将标志位设回false
        canPullDown = false;
        canPullUp = false;
        isMoved = false;

//deltaY>0是下拉;deltaY<0是上拉
        if(deltaY>0 && mListViewListener!=null)
        {
            mListViewListener.onRefresh();
        }
       


    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {

        super.onScrollChanged(l, t, oldl, oldt);
    }

    /**
     * 判断是否滚动到顶部
     */
    private boolean isCanPullDown() {
        return getScrollY() == 0 || contentView.getHeight() < getHeight() + getScrollY();
    }


    /**
     * 判断是否滚动到底部
     */
    private boolean isCanPullUp() {
        return contentView.getHeight() <= getHeight() + getScrollY();
    }


    public void setmListViewListener(IXListViewListener mListViewListener) {
        this.mListViewListener = mListViewListener;
    }




    public interface IXListViewListener {
        public void onRefresh();


        public void onLoadMore();


        public void onPullToLoadMore();
 

    }


}
Android自定义ScrollView（实现反弹弹性布局效果，仿IOS反弹ScrollView）
JiYaRuo的博客
09-03 626
package com.jyr.myapplication; import android.annotation.SuppressLint; import android.content.Context; import android.graphics.Rect; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.animat...
jQuery仿IOS滚动插件Nicescroll3.zip
07-04
jQuery仿IOS滚动插件Nicescroll3是一款支持全屏切换，滚动条美化的jquery.nicescroll插件。
仿IOS的scrollview
04-17
仿IOS的弹性scrollview,别人的资源，感觉不错。
模仿ios的scrollView
qq_16251865的博客
02-20 261
做了这么久项目了，有时会被吐槽，滑动块儿好死板，不和谐~~~   so，我们可以模仿一下ios的滑块儿。ps：改代码源自一个前辈。但是我忘了是谁了，在此非常感谢他. public class IOSScrollview extends ScrollView { // 拖动的距离 size = 4 的意思 只允许拖动屏幕的1/4 private static final int
Android仿IOS有弹性ScrollView
qndroid的专栏
09-19 1317
最近项目里用到了一个开源的仿IOS可弹动的ScrollView,看源代码时发现其实实现原理是用 View动画实现的，每次都播一个动画，最后重新layout这个布局。看到使用了View动画，就有点不想用这个控件了，因为个人感觉View动画，应该是要被淘汰的技术了，于是就自己根据实现原理，重写了一个ScrollView,实现了同样的功能. 思路：利用属性动画，及其View的偏移原理即可实现同样的功能。
Android上实现仿IOS弹性ScrollView
热门推荐
昨夜星辰的博客
02-17 1万+
前言 IOS的UI和用户体验是它的优势， 与IOS相比， Android的UI和用户体验可能要差一些。 虽然Android版本已经到了4.4， 对系统的各个方法进行了大量实质性的优化， 但他的显示效果和交互体验依然不及IOS。 例如IOS上的很多控件都是带弹性的, 也就是用于拖拽一个控件到了该控件的边界， 但是控件依然可以随着手指的移动而移动一段距离。 这样的话， 给用户的感觉就不那么生
ios-类似scrollView滑动的一个动画，但不是scrollView.zip
07-11
类似scrollView的滑动的一个动画，左滑和右滑。算是一个抽屉效果吧。
实现Android仿ios效果的ScrollView回弹技术
在Android开发中实现仿iOS的回弹效果是一个常见的需求，尤其是在涉及到滚动视图（ScrollView）时。回弹效果是指用户在快速滑动屏幕上的内容时，内容会在滑动停止后由于惯性作用继续移动一小段距离然后渐渐停止，并且...
Android滑动ScrollView时使导航栏停留的效果（仿ios的tableview分区）
09-20
在Android开发中，为了提供与iOS应用类似的用户体验，有时我们需要实现一种效果，即当用户滑动ScrollView时，导航栏保持在屏幕顶部不动，类似于iOS中的TableView分区。这种效果可以增加应用的可操作性和视觉吸引力。...
android 仿ios 弹性ScrollView 上下滑动
08-30
将文件复制到工程中，将包名改为自己项目的包名即可！简单好用
高仿IOS ScrollView，可持续上下拉，橡皮筋效果
07-29
高仿IOS ScrollView，可持续上下拉，橡皮筋效果
【Android】Android开发实现带有反弹效果，仿IOS反弹scrollview详解教程
09-08
博文介绍：http://blog.youkuaiyun.com/qq_21376985/article/details/52468306 【Android】Android开发实现带有反弹效果，仿IOS反弹scrollview详解教程
iOS bounds学习笔记以及仿写UIScrollView部分功能详解
08-26
主要为大家详细介绍了iOS bounds学习笔记，以及仿写UIScrollView部分功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ios-仿苹果地图搜索滑动视图.zip
07-11
仿苹果地图搜索滑动视图
android仿ios滑动按钮,android仿IOS,滑动隐藏底部ScrollView(示例代码)
weixin_31028871的博客
05-26 143
在我们开发android app时，会有非常多效果都须要模仿IOS,近期在做一个页面时，当中用到了ScrollView，但要做成IOS那种在ScrollView滑动时。浮在ScrollView的功能button要隐藏，当滑动结束后，功能button又要显示出来。效果例如以下图所看到的：gif实在是不好搞，所以仅仅能截个静态图来表示一下，当ScrollView滑动时。浮在最以下的button会以动...
iOS bounds学习笔记以及仿写UIScrollView的部分功能
抬头看见柠檬树的博客
02-14 923
经常看到这种说法，frame是基于父控件的，bounds是基于自身坐标的。然而，这个自身坐标是什么？bounds这个属性存在的意义是什么呢？bounds的x和y值真的永远是0吗？ 经过查阅资料，我看到这样一种说法：一个控件，拥有其展示部分和内容部分。其展示部分是有限大的，固定坐标固定大小，而其内容部分是无限大的。就像一个电视机以及其播放的电影（这个比喻不太恰当，是我强行比喻的），电视机用于放映电影的
模仿iOS版微信的滑动View效果
08-25
比如我们常用的微信，对于Android版本，长按某个聊天好友，会弹出 标为未读，置顶聊天，删除聊天 选项；对于iOS的版本，右滑，会显示出 标为未读，删除 选项。这篇文章主要介绍了模仿iOS版微信的滑动View,需要的朋友可以参考下
android之自定义viewGroup仿scrollView详解
小钟的专栏
07-21 4560
相信学了安卓的朋友都知道自定义viewGroup离不开重写onmeasure()和onLayout(),开始讲解代码之前，先来看看与这两个方法相关知识：    一、onMeasure() ：这是测量自身的宽高和子view的宽高方法，测量涉及的知识点除了宽高之外，还有三种模式           (1) 三种模式如下：                1、MeasureSpec.EXACTLY：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一声紫金，一生紫金

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值