弹弹弹 打造万能弹性layout

最新推荐文章于 2020-11-27 10:26:52 发布
最新推荐文章于 2020-11-27 10:26:52 发布
阅读量1.1k 收藏
点赞数
分类专栏： android开发 aandroid开发 文章标签： android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cml_blog/article/details/50996959
版权

demo地址：https://github.com/cmlbeliever/BounceLayout
最近任务比较少，闲来时间就来研究了android事件传播机制。根据总结分析的结果，打造出万能弹性layout，支持内嵌可滚动view！
先看图片（笔记本分辨率不兼容，将就看看）

这里写图片描述

核心内容分析

  1. 当手指移动时，判断移动方向，如果水平或垂直方向移动超过10个像素，则表示为移动事件，需要拦截！
  2. 判断手机按下时所在的view是否可以滚动
  3. 根据手指移动方向，与手指按下时view是否可以移动判断是否拦截事件
  4. 根据viewgroup事件拦截顺序onInterceptTouchEvent->onTouchEvent进行对应的逻辑处理

可滚动view坐标保存
1、由于内嵌可滚动view会导致事件冲突，所以在在移动时需要判断事件是否由内嵌的viewgroup消费。
2、在view布局处理好后，将可滚动的view信息保存起来

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);

        if (changed) {
            // 保存可滚动对象
            positionMap.clear();
            saveChildRect(this);
        }

    }

  /**
     * 找出所有可滚动的view，并存储位置
     *
     * @param view
     */
    private void saveChildRect(ViewGroup view) {


        if (view instanceof ScrollView || view instanceof HorizontalScrollView || view instanceof ScrollingView || view instanceof AbsListView) {

            int[] location = new int[2];
//            view.getLocationOnScreen(location);
            view.getLocationInWindow(location);

            RectF rectF = new RectF();
            rectF.left = location[0];
            rectF.top = location[1];
            rectF.right = rectF.left + view.getMeasuredWidth();
            rectF.bottom = rectF.top + view.getMeasuredHeight();

            Log.d(TAG, "saveChildRect===>(" + rectF);

            positionMap.put(rectF, view);
        } else {
            int childCount = view.getChildCount();
            for (int i = 0; i < childCount; i++) {
                if (view.getChildAt(i) instanceof ViewGroup) {
                    this.saveChildRect((ViewGroup) view.getChildAt(i));
                }
            }
        }
    }

3、当用户按下时，根据按下坐标查找是否在可滚动viewgroup内

private View findViewByPosition(float x, float y) {

        for (RectF rectF : positionMap.keySet()) {
            if (rectF.left <= x && x <= rectF.right && rectF.top <= y && y <= rectF.bottom) {
                return positionMap.get(rectF);
            }
        }

        return null;
    }

注意调用时需要传入相对屏幕的坐标而不是相对于viewgroup的坐标 touchView = findViewByPosition(ev.getRawX(), ev.getRawY());

4、当用户在垂直方向移动，则判断touchView是否可以在垂直方向移动，如果可以，则事件交给touchView处理，否则进行layout的移动

 //垂直方向移动
                if (direction == DIRECTION_Y && canChildScrollVertically((int) -dy)) {
                    MotionEvent event = MotionEvent.obtain(ev);
                    event.setAction(MotionEvent.ACTION_CANCEL);
                    onTouchEvent(event);
                    return super.onInterceptTouchEvent(ev);
                }

5、当用户在水平方向移动，则判断touchView是否可以在水平方向移动，如果可以，则事件交给touchView处理，否则进行layout的移动

//水平方向移动处理
   if (direction == DIRECTION_X && canChildScrollHorizontally((int) -dx)) {
                    MotionEvent event = MotionEvent.obtain(ev);
                    event.setAction(MotionEvent.ACTION_CANCEL);
                    onTouchEvent(event);
                    return super.onInterceptTouchEvent(ev);
                }

这样弹性layout的核心内容就分析完毕了，demo地址：
https://github.com/cmlbeliever/BounceLayout
主要代码：

package com.cml.newframe.scrollablebox;

import android.animation.Animator;
import android.animation.ObjectAnimator;
import android.annotation.TargetApi;
import android.content.Context;
import android.graphics.PointF;
import android.graphics.RectF;
import android.os.Build;
import android.support.v4.view.ScrollingView;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.widget.AbsListView;
import android.widget.HorizontalScrollView;
import android.widget.LinearLayout;
import android.widget.ScrollView;

import java.util.HashMap;
import java.util.Map;

/**
 * Created by cmlBeliever on 2016/3/25.
 * <p>弹性layout</p>
 */
public class BounceLayout extends LinearLayout {

    private static final String TAG = BounceLayout.class.getSimpleName();
    private static final int DIRECTION_X = 1;
    private static final int DIRECTION_Y = 2;
    private static final int DIRECTION_NONE = 3;

    /**
     * 可移动比率 默认为0.5
     */
    private float transRatio = 0.5f;

    /**
     * 手指按下的坐标
     */
    private PointF initPoint = new PointF();

    private Animator translateAnim;
    private int direction = DIRECTION_NONE;

    //手指按下时所在的view
    private View touchView;
    private Map<RectF, ViewGroup> positionMap = new HashMap<>();

    public BounceLayout(Context context) {
        super(context);
        this.init();
    }

    public BounceLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.init();
    }

    public BounceLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.init();
    }

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public BounceLayout(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        this.init();
    }

    private void init() {
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_MOVE:
                float dx = ev.getX() - initPoint.x;
                float dy = ev.getY() - initPoint.y;

                if (direction == DIRECTION_NONE) {
                    //x方向移动
                    if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10) {
                        direction = DIRECTION_X;
                    } else if (Math.abs(dy) > 10) {
                        direction = DIRECTION_Y;
                    }
                } else {
                    //x方向移动
                    if (direction == DIRECTION_X) {
                        if (Math.abs(dx) <= getMeasuredWidth() * transRatio) {
                            ViewCompat.setTranslationX(getChildAt(0), dx);
                        }
                    } else if (direction == DIRECTION_Y) {
                        if (Math.abs(dy) <= getMeasuredHeight() * transRatio) {
                            ViewCompat.setTranslationY(getChildAt(0), dy);
                        }
                    }
                    return true;
                }

                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:

                dx = ViewCompat.getTranslationX(getChildAt(0));
                dy = ViewCompat.getTranslationY(getChildAt(0));

                if (direction == DIRECTION_X) {
                    startTransAnim(DIRECTION_X, dx, 0);
                } else if (direction == DIRECTION_Y) {
                    startTransAnim(DIRECTION_Y, dy, 0);
                }

                if (direction != DIRECTION_NONE) {
                    direction = DIRECTION_NONE;
                    return true;

                }

                break;
        }


        return super.onTouchEvent(ev);
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                initPoint.x = ev.getX();
                initPoint.y = ev.getY();
                touchView = findViewByPosition(ev.getRawX(), ev.getRawY());
                Log.d(TAG, "onInterceptTouchEvent===>touchView:" + touchView);
                break;
            case MotionEvent.ACTION_MOVE:
                float dx = ev.getX() - initPoint.x;
                float dy = ev.getY() - initPoint.y;

                Log.d(TAG, "onInterceptTouchEvent===>ACTION_MOVE touchView:" + touchView);

                if (direction == DIRECTION_NONE) {
                    //x方向移动
                    if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10) {
                        direction = DIRECTION_X;
                    } else if (Math.abs(dy) > 10) {
                        direction = DIRECTION_Y;
                    }
                }

                //垂直方向移动
                if (direction == DIRECTION_Y && canChildScrollVertically((int) -dy)) {
                    MotionEvent event = MotionEvent.obtain(ev);
                    event.setAction(MotionEvent.ACTION_CANCEL);
                    onTouchEvent(event);
                    return super.onInterceptTouchEvent(ev);
                }

                if (direction == DIRECTION_X && canChildScrollHorizontally((int) -dx)) {
                    MotionEvent event = MotionEvent.obtain(ev);
                    event.setAction(MotionEvent.ACTION_CANCEL);
                    onTouchEvent(event);
                    return super.onInterceptTouchEvent(ev);
                }

                break;
        }


        return direction == DIRECTION_NONE ? super.onInterceptTouchEvent(ev) : true;
    }


    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);

        if (changed) {
            // 保存可滚动对象
            positionMap.clear();
            saveChildRect(this);
        }

    }

    private View findViewByPosition(float x, float y) {

        for (RectF rectF : positionMap.keySet()) {
            if (rectF.left <= x && x <= rectF.right && rectF.top <= y && y <= rectF.bottom) {
                return positionMap.get(rectF);
            }
        }

        return null;
    }

    /**
     * 找出所有可滚动的view，并存储位置
     *
     * @param view
     */
    private void saveChildRect(ViewGroup view) {


        if (view instanceof ScrollView || view instanceof HorizontalScrollView || view instanceof ScrollingView || view instanceof AbsListView) {

            int[] location = new int[2];
//            view.getLocationOnScreen(location);
            view.getLocationInWindow(location);

            RectF rectF = new RectF();
            rectF.left = location[0];
            rectF.top = location[1];
            rectF.right = rectF.left + view.getMeasuredWidth();
            rectF.bottom = rectF.top + view.getMeasuredHeight();

            Log.d(TAG, "saveChildRect===>(" + rectF);

            positionMap.put(rectF, view);
        } else {
            int childCount = view.getChildCount();
            for (int i = 0; i < childCount; i++) {
                if (view.getChildAt(i) instanceof ViewGroup) {
                    this.saveChildRect((ViewGroup) view.getChildAt(i));
                }
            }
        }
    }


    private void startTransAnim(int direction, float start, float end) {
        if (translateAnim != null && translateAnim.isRunning()) {
            translateAnim.end();
        }
        String proName = direction == DIRECTION_X ? "translationX" : "translationY";
        translateAnim = ObjectAnimator.ofFloat(getChildAt(0), proName, start, end);
        translateAnim.setInterpolator(new AccelerateDecelerateInterpolator());
        translateAnim.start();
    }


    /**
     * @param direction 负数：向上滑动 else 向下滑动
     * @return
     */
    private boolean canChildScrollVertically(int direction) {
        return touchView == null ? false : ViewCompat.canScrollVertically(touchView, direction);
    }


    /**
     * @param direction 负数：向左滑动 else 向右滑动
     * @return
     */
    private boolean canChildScrollHorizontally(int direction) {
        return touchView == null ? false : ViewCompat.canScrollHorizontally(touchView, direction);
    }

    public float getTransRatio() {
        return transRatio;
    }

    /**
     * 设置偏移部分百分比
     *
     * @param transRatio 0-1 ,1 100%距离
     */
    public void setTransRatio(float transRatio) {
        this.transRatio = transRatio;
    }
}
cmlbeliever
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ae万能弹性表达式
03-05
ae万能表达式，谁用谁知道，具体用法就是在key帧的时候，按alt键在关键帧上，然后可以输入表达式，把表达式复制进去，具体前面3个参数调弹性数值。
vue中实现flex弹性布局
流星宇
10-10 1万+
我是一个前端的新手，对于页面布局这一块没有具体去思考过，直到最近因为公司的系统需要我负责项目的整体布局layout模块，我这才开始细细思考这一个问题。flex是很好的弹性盒子，我之前虽然有在用但是却只是简单使用垂直水平居中的属性，对于其他强大的能力一窍不通。好了废话少说，开始记录我的第一个布局吧。（默认大家都会简单使用flex了） 一、先实现简单的页面 <template...
ae万能弹性表达式_五个AE常用的表达式
热门推荐
weixin_39539563的博客
11-27 3万+
表达式能帮助我们快速地制作一些效果 避免重复造轮子 可以高效产出需要的效果 注意：请使用英文版ae添加 以免出现表达式错误 1.弹性表达式 Bouncen = 0;if (numKeys > 0){n = nearestKey(time).index;if (key(n).time > time){n--;}}if (n == 0){t = 0;}else{t = time - key...
ae万能弹性表达式_AE实用表达式整理及表达式合集脚本
weixin_39570530的博客
11-27 4083
表达式是AE中非常好用的工具，它可以帮助我们节省大量的制作时间。如果你对表达式掌握的比较好，那么很多看似复杂、繁琐的效果，利用表达式都可以轻松的实现。但是表达式的学习是有一定门槛的，简单的运用还好，一旦涉及到复杂点的运用，就对数学能力、逻辑能力有一定的要求了。为此，我整理了一些工作中常用、实用的表达式效果。无需理解背后的语义，只要直接套用即可。并且已经将它们集成进了我编写的“常用表达式合集”脚本中...
swing-layout-1.0.3
05-07
swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3swing-layout-1.0.3...
Android使用Handler实现View弹性滑动
01-04
弹性滑动原理 将一次大的滑动非为若干次小的滑动，并在一个时间段内完成。更好的用户体验 实现方式很多种，包括用Scroller，动画，延时策略. 使用Handler实现弹性滑动 ...android:layout_width=match_parent
layout guideline
04-21
layout guideline
EMC之线路板 Layout 原则
10-22
EMC之线路板Layout原则
Layout基础教程.pdf
06-24
Layout基础教程.pdfLayout基础教程.pdfLayout基础教程.pdfLayout基础教程.pdfLayout基础教程.pdfLayout基础教程.pdf
AE万能弹性表达式
10-30
AE万能弹性表达式
swift-BouncyLayout让Swift列表单元格弹起来
08-15
BouncyLayout 让 Swift 列表单元格弹起来
BouncyLayout：制作。 它。 弹跳
02-03
BouncyLayout是使您的单元格反弹的集合视图布局。 产品特点 纯Swift 5。 与每个UICollectionView 。 水平和垂直滚动支持。 可配置的弹跳效果。 支持单元大小更改 建立 您唯一需要做的就是导入BouncyLayout ，创建一个实例并将其添加到您的UICollectionView 。 import BouncyLayout let layout = BouncyLayout () UICollectionView ( frame : . zero , collectionViewLayout : layout) 在example文件夹中找到以上显示
ae万能弹性表达式_AE实用表达式整理–果味酱总结
weixin_39999532的博客
11-22 1704
我工作中总结的使用最多的AE表达式技巧，有些比较难的，要多多研究，仔细阅读1.wiggle 抖动wiggle(freq频率, amp振幅, octaves = 1细节, amp_mult = .5乘赋值, t = time)用法wiggle(5,200)2.random 随机random(数值x,数值y）是在数值x到数值y之间进行随机值的抽取，随机抽取的最小值是x，最大值是y用法：random(1...
ae万能弹性表达式_五个AE常用的表达式，尽早知道
weixin_39761558的博客
11-27 3102
表达式能帮助我们快速地制作一些效果 避免重复造轮子 可以高效产出需要的效果注意：请使用英文版ae添加 以免出现表达式错误1.弹性表达式 Bounce编辑​n = 0;if (numKeys > 0){n = nearestKey(time).index;if (key(n).time > time){n--;}}if (n == 0){t = 0;}else{t = time - ke...
ae万能弹性表达式_AE动画必备——弹性表达式，让你的动画生动起来
weixin_39948247的博客
11-27 4045
这次分享的是非常实用且高效的表达式！弹性表达式，Bounce 和 Overshoot！利用这个两个表达式你可以轻而易举地实现各种弹性动画，如抖动、弹跳动画等。是的，你没听错，只要998个赞，你就能轻松获得随意加弹性Buff！赶快拿起你的鼠标点赞吧！表达式的是国外大神写出来的，感谢大神的分享，我们只能膜拜了！而且作者非常无私的贴出了两个(Bounce & Overshoot)可以直接进行关键...
官方 Flexbox Layout（弹性盒子布局） 的使用
M-Ellen的博客
03-06 2066
介绍
Android实现伸缩弹力分布菜单效果
weixin_34290352的博客
10-26 176
　　本文介绍下在Android中实现伸缩弹力分布菜单效果。关于这种菜单效果在IPhone中比较常见，效果比较酷。那么在Android中实现只是一种简单的模仿。 　　这两天无意间看到一园友的博文实现Path2.0中绚丽的的旋转菜单，感觉效果不错，但是发现作者没有处理线程安全的问题，所以在这里我修正了下，并且改善下部分功能。今天发布这篇文章的目的是希望能在Android用户体验上提出一些相关的解决方...
Android安卓开发 弹性布局（复制即用）
悟空吃饭饭的博客
04-03 1067
自定义View 项目地址：https://github.com/ZYF99/UI2 弹性布局：支持布局跟随手指移动，当超出屏幕时自动回弹。 ·支持自定义拓展灵敏度 ·支持自定义可拓展方向 BounceLinearLayout BounceRelativeLayout BounceFrameLayout BounceConstraintLayout 使用方式（4种布局使用方式...
layoutcontrol
最新发布
12-26
LayoutControl是一种用于实现复合布局的控件。它可以在Windows窗体应用程序中使用，用于排列和管理其他控件的位置和大小。LayoutControl可以将子控件分组为布局组（LayoutGroup），并根据布局组的规则自动调整子控件的位置和大小。 LayoutControl的主要好处是它可以自动维护子控件的一致布局。无论是调整窗口大小、添加或删除控件，还是更改控件的字体设置，LayoutControl都会自动调整子控件的位置和大小，以确保它们不会重叠。但需要注意的是，如果手动调整了控件的边距属性，可能会导致控件重叠。 以下是一个使用LayoutControl的示例： ```csharp using DevExpress.XtraLayout; // 创建一个LayoutControl控件 LayoutControl layoutControl = new LayoutControl(); // 创建布局组 LayoutControlGroup layoutGroup = new LayoutControlGroup(); layoutGroup.Text = "布局组"; // 创建子控件 TextEdit textEdit1 = new TextEdit(); TextEdit textEdit2 = new TextEdit(); // 将子控件添加到布局组中 layoutGroup.AddItem("文本框1", textEdit1); layoutGroup.AddItem("文本框2", textEdit2); // 将布局组添加到LayoutControl中 layoutControl.Root.AddItem(layoutGroup); // 将LayoutControl添加到窗体中 this.Controls.Add(layoutControl); ``` 这个示例创建了一个LayoutControl控件，并在其中添加了一个布局组和两个文本框子控件。LayoutControl会自动调整文本框的位置和大小，以确保它们不会重叠。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值