实现一个随着手指滑动的View

1、android View 主要6种滑动方法,分别是 

  • layout()
  • offsetLeftAndRight()和offsetTopAndBottom()
  • LayoutParams
  • scrollBy()和 scrollTo()
  • Scroller
  • 动画

2、实现效果图


3、自定义中使用layout()方法实习view的滑动

public class MoveView extends View {
    private int lastX, lastY;

    public MoveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
    public MoveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public MoveView(Context context) {
        super(context);
    }

    
    public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                int offsetX = x - lastX;//计算滑动的距离
                int offsetY = y - lastY;
                //重新放置新的位置
                layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY);
        }
        return true;
    }

}
2、offsetLeftAndRight()和offsetTopAndBottom()
  public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                int offsetX = x - lastX;//计算滑动的距离
                int offsetY = y - lastY;
                //重新放置新的位置
//                layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY);
                offsetLeftAndRight(offsetX);
                offsetTopAndBottom(offsetY);
        }
        return true;
    }
3、LayoutParams 改变布局参数的方法:
  public boolean onTouchEvent(MotionEvent event) {
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                int offsetX = x - lastX;//计算滑动的距离
                int offsetY = y - lastY;
                //重新放置新的位置
//                layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY);
//                offsetLeftAndRight(offsetX);
//                offsetTopAndBottom(offsetY);
                LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
                layoutParams.leftMargin = getLeft()+offsetX;
                layoutParams.topMargin = getTop() +offsetY;
                setLayoutParams(layoutParams);
        }
        return true;
    }
4、当然使用动画 ,scrollBy()和 scrollTo()也可以使view滑动,不足的是使用scrollBy()和 scrollTo()滑动时,是瞬间完成的,用户体验不太好。

5、Scroller和 View的computeScroll() 结合使用,实现view平滑的移动
public class MoveView extends View {
    private Scroller mScroller;

    public MoveView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mScroller = new Scroller(context);
    }

    public MoveView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public MoveView(Context context) {
        super(context);
    }

    //重写computeScroll方法
    @Override
    public void computeScroll() { //view在onDraw的时候会调用此方法
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            ((View) getParent()).scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        }
    }

    //在外部调用这个方法即可
    public void smoothScrollTo(int destX, int destY) {
        int scrollX = getScrollX();
        int delta = destX - scrollX;
        mScroller.startScroll(scrollX, 0, delta,0 ,6000);
        invalidate();
    }

}



  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在uniapp中使用u-tabs实现手指滑动切换功能,可以通过监听touch事件来实现。 首先,在u-tabs组件上添加一个touchstart事件,获取手指初始位置。然后在touchmove事件中获取手指移动距离,通过计算距离和方向,判断是向左滑动或向右滑动。最后在touchend事件中根据滑动方向来判断是否需要切换tab。 以下是一个示例代码: ```html <template> <view> <u-tabs @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"> <u-tab title="Tab 1">Content 1</u-tab> <u-tab title="Tab 2">Content 2</u-tab> <u-tab title="Tab 3">Content 3</u-tab> </u-tabs> </view> </template> <script> export default { data() { return { startX: 0, // 手指初始位置 moveX: 0, // 手指移动距离 direction: '', // 滑动方向 activeIndex: 0 // 当前激活的tab索引 } }, methods: { onTouchStart(e) { this.startX = e.changedTouches[0].pageX }, onTouchMove(e) { this.moveX = e.changedTouches[0].pageX - this.startX // 判断滑动方向 if (this.moveX > 0) { this.direction = 'right' } else { this.direction = 'left' } }, onTouchEnd() { if (Math.abs(this.moveX) > 50) { // 判断滑动距离是否超过50px,超过则切换tab if (this.direction === 'right') { this.activeIndex = Math.max(0, this.activeIndex - 1) } else if (this.direction === 'left') { this.activeIndex = Math.min(this.$refs.tabs.children.length - 1, this.activeIndex + 1) } } // 清空手指移动距离和方向 this.moveX = 0 this.direction = '' } } } </script> ``` 在上面的示例代码中,我们通过监听touchstart、touchmove和touchend事件来实现手指滑动切换tab的功能。其中,onTouchStart方法用于获取手指初始位置,onTouchMove方法用于获取手指移动距离,并判断滑动方向,onTouchEnd方法用于根据滑动方向切换tab。需要注意的是,为了避免误操作,我们判断滑动距离是否超过50px才会触发切换tab的操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值