弹性效果

最新推荐文章于 2024-02-19 00:42:54 发布
最新推荐文章于 2024-02-19 00:42:54 发布
阅读量863 收藏
点赞数
分类专栏： Android android_界面效果
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenwei19861106/article/details/53836047
版权 
public class BounceScrollView extends ScrollView {

	private View inner;// 孩子View

	private float y;// 点击时y坐标

	private Rect normal = new Rect();// 矩形(这里只是个形式，只是用于判断是否需要动画.)

	private boolean isCount = false;// 是否开始计算
	private float lastX = 0;
	private float lastY = 0;
	private float currentX = 0;
	private float currentY = 0;
	private float distanceX = 0;
	private float distanceY = 0;
	private boolean upDownSlide = false; // 判断上下滑动的flag

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

	/***
	 * 根据 XML 生成视图工作完成.该函数在生成视图的最后调用，在所有子视图添加完之后. 即使子类覆盖了 onFinishInflate
	 * 方法，也应该调用父类的方法，使该方法得以执行.
	 */
	@Override
	protected void onFinishInflate() {
		if (getChildCount() > 0) {
			inner = getChildAt(0);
		}
	}

	@Override
	public boolean dispatchTouchEvent(MotionEvent ev) {
		// TODO Auto-generated method stub
		currentX = ev.getX();
		currentY = ev.getY();
		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:

			break;
		case MotionEvent.ACTION_MOVE:
			distanceX = currentX - lastX;
			distanceY = currentY - lastY;
			if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < -12) {
				upDownSlide = true;
			}
			break;
		case MotionEvent.ACTION_UP:

			break;
		default:
			break;
		}
		lastX = currentX;
		lastY = currentY;
		if (upDownSlide && inner != null)
			commOnTouchEvent(ev);
		return super.dispatchTouchEvent(ev);
	}

	@Override
	public boolean onInterceptTouchEvent(MotionEvent ev) {
		// TODO Auto-generated method stub
		return super.onInterceptTouchEvent(ev);
	}

	/*** 
     * 触摸事件 
     *  
     * @param ev 
     */  
    public void commOnTouchEvent(MotionEvent ev) {  
        int action = ev.getAction();  
        switch (action) {  
        case MotionEvent.ACTION_DOWN:  
            break;  
        case MotionEvent.ACTION_UP:  
            // 手指松开.  
            if (isNeedAnimation()) {  
                animation();  
                isCount = false;  
            }  
            clear0();
            break;  
        case MotionEvent.ACTION_MOVE:  
            final float preY = y;// 按下时的y坐标  
            float nowY = ev.getY();// 时时y坐标  
            int deltaY = (int) (preY - nowY);// 滑动距离  
            if (!isCount) {  
                deltaY = 0; // 在这里要归0.  
            }  

            y = nowY;  
            // 当滚动到最上或者最下时就不会再滚动，这时移动布局  
            if (isNeedMove()) {  
                // 初始化头部矩形  
                if (normal.isEmpty()) {  
                    // 保存正常的布局位置  
                    normal.set(inner.getLeft(), inner.getTop(),  
                            inner.getRight(), inner.getBottom());  
                }  
                // 移动布局  
                inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,  
                        inner.getRight(), inner.getBottom() - deltaY / 2);  
            }  
            isCount = true;  
            break;  

        default:  
            break;  
        }  
    }

	/***
	 * 回缩动画
	 */
	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();

	}

	// 是否需要开启动画
	public boolean isNeedAnimation() {
		return !normal.isEmpty();
	}

	/***
	 * 是否需要移动布局 inner.getMeasuredHeight():获取的是控件的总高度
	 * 
	 * getHeight()：获取的是屏幕的高度
	 * 
	 * @return
	 */
	public boolean isNeedMove() {
		int offset = inner.getMeasuredHeight() - getHeight();
		int scrollY = getScrollY();
		// 0是顶部，后面那个是底部
		if (scrollY == 0 || scrollY == offset) {
			return true;
		}
		return false;
	}

	private void clear0(){
        lastX = 0;
        lastY = 0;
        distanceX = 0;
        distanceY = 0;
        upDownSlide = false;
    }
}
    <com.example.test.BounceScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />

            <Button
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="Button" />
        </LinearLayout>
    </com.example.test.BounceScrollView>


南瓜饼
关注
专栏目录
Android ListView弹性效果的实现方法
09-02
为了增强用户体验，有时候我们需要为ListView添加弹性效果，即在用户滑动时，ListView能够像弹簧一样有额外的回弹动作。以下将详细介绍两种在Android中实现ListView弹性效果的方法。 ### 第一种方法：动态改变`...
动态弹球Bounce
Cryking的代码库
01-05 1237
Code: using System; using System.Windows.Forms; using System.Drawing; namespace CsStudy { class Bounce:Form { const int iTimerInterval = 20; const int iBallSize = 16;
下拉上拉带阻尼回弹的NestedScrollView
RandowWrite
02-19 531
【代码】下拉上拉带阻尼回弹的NestedScrollView。
android菜单回弹,Android 实现ViewPager边界回弹效果实例代码
weixin_30376865的博客
05-26 231
废话不多说了，直接给大家贴代码了，具体代码如下所示：public class BounceBackViewPager extends ViewPager {private int currentPosition = 0;private Rect mRect = new Rect();//用来记录初始位置private boolean handleDefault = true;private flo...
ScrollView反弹效果 仿小米私密短信效果
opzoonzhuzhengke的专栏
06-24 858
转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/28441197 现在很多APP都给ScrollView添加了反弹效果，QQ、小米私密短信等。恰好在网上看到一个类：BounceScrollView ， 原创地址是：http://blog.csdn.net/h7870181/article/details/8960430 ， 可
Android 动画（anim）详解
大叔的愤怒，你驾驭不了
12-04 3866
Android 动画（anim）详解 就我所知，简单阐述一下： Android的animation由四种类型组成：alpha(透明度)、scale(缩放)、translate(位移)、rotate(旋转) XML配置文件中 android:alpha 渐变透明度动画效果 android:scale 渐变缩放动画效果
Android仿IOS上拉下拉弹性效果的实例代码
08-28
Android仿IOS上拉下拉弹性效果的实例代码 Android仿IOS上拉下拉弹性效果的实例代码是Android开发中实现IOS风格上拉下拉弹性效果的解决方案。通过自定义ScrollView控件，实现上拉下拉的弹性效果，提高用户体验。 ...
超酷js弹性效果的图片展示画廊特效特效代码
03-20
本资源提供了一种利用纯JavaScript实现的“超酷js弹性效果的图片展示画廊特效”代码，适用于创建引人注目的图片展示区域，提升用户体验。 该特效的核心在于图片在鼠标滑过时产生的弹性晃动效果，这是通过精心设计的...
jquery弹性效果切换Tab选项卡代码
01-23
本示例中的“jquery弹性效果切换Tab选项卡代码”是关于如何使用jQuery实现一种具有弹性动画效果的Tab选项卡功能。这种功能在网页布局中非常常见，用于展示分段的内容，用户可以通过点击不同的Tab标签来切换显示不同...
repaint，paint在事件分配上的区别
博客已转到w3er.com
10-25 1424
首先看两段类似的程序单线程的/** *//** * @(#)Bounce.java * * * @author livahu * @version 1.00 2006/10/16 */import java.awt.*;import java.awt.event.*;import java.awt.geom.*;import java.util.*;import javax.swing
Scrollview实现弹性滑动（新增滑动渐变颜色）
DW的博客
12-27 894
去掉Scrollview滚动条：加上这条属性； android:scrollbars="none" 这条类直接拿走，不多逼逼。 package com.five.androidknowledge.customview; import android.content.Context; import android.graphics.Rect; import android.util....
Java 核心技术（第八版）卷1：基础知识：例14-1P615Bounce
只会写HelloWorld的专栏
05-23 235
这个程序运行起来就是一个窗口，点击开始就出现一个球，开始跳动，然而只能添加一个球，一共就两个球，这个时候只有一个球可以移动。 代码如下： Bounce.java: 这里是主程序 import java.awt.*; import java.awt.event.*; import javax.swing.*; //本程序演示 一个球弹跳的动画 public class Bounce { public static void main(String[] args) { E
bounce.js使用
weixin_42029487的博客
08-20 1329
&lt;template&gt; &lt;div class="chapter-4"&gt; &lt;div class="bounce-box" ref="bounce_box"&gt;&lt;/div&gt; &lt;div class="btn_container"&gt; &a
java版bounce_BounceThread.java
weixin_33502772的博客
02-24 127
package four2;import java.awt.*;import java.awt.event.*;import javax.swing.*;/*** Shows animated bouncing balls.* @version 1.33 2007-05-17* @author Cay Horstmann*/public class BounceThread{public stat...
android 滚动条下拉反弹的效果（类似微信朋友圈）
mmsx
12-08 6205
微信朋友圈上面的图片封面，QQ空间说说上面的图片封面都有下拉反弹的效果，这些都是使用滚动条实现的。下拉，当松开时候，反弹至原来的位置。下拉时候能看到背景图片。那么这里简单介绍一下这种效果的实现。 本文源码下载：点击 1、效果图 这部手机显示的分辨率有限，很老的手机调试。 2、具有反弹效果BounceScrollView package com.org.scroll; i
过渡与动画 - 缓动效果&基于贝塞尔曲线的调速函数
weixin_30527323的博客
12-12 442
难题 给过渡和动画加上缓动效果是一种常见的手法（比如具有回弹效果的过渡过程）是一种流行的表现手法，可以让界面显得更加生动和真实：在现实世界中，物体A点到B点往往也是不完全匀速的 以纯技术的角度来看，回弹效果是指当一个过渡达到最终值时，往回到一点，然后再次回到最终值，如此往复一次或者多次，并逐渐收敛，最终稳定在最终值。有相当的多JavaScript类库可以创建动画，且内置回弹效果等其他缓动效果。但是...
自定义view-车型评分统计图
郑郑的博客
10-19 390
先看效果，如下图:                   一。做一个效果之前，先分析由几种图形组成         1.画横、纵坐标和刻度         2.画柱形图         3.手势的监听和页面打开时自动滑动                    二, 界面实现，分析各个组件和效果的实现         1.画x,y轴和坐标         画x轴，首先先计算view的
使用jq实现手机上的touchmove效果
coder_chenz的博客
04-06 9090
Touch事件简介 pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏
uniapp启用弹性效果
最新发布
09-12
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一次代码，然后发布到 iOS、Android、Web（包括微信小程序）等多个平台。uni-app 支持 W3C 标准的弹性盒模型（Flexbox），这是一种用于布局和对齐的布局模型。 启用弹性效果通常是指在布局中使用 Flexbox，以实现更加灵活的布局方式，包括水平或垂直对齐、换行、元素排序等。在 uni-app 中启用弹性效果，你需要为父容器设置 `display: flex;` 或者 `display: -webkit-flex;`（针对一些老旧的浏览器）属性，然后可以使用其它相关 Flexbox 属性来控制布局。 例如，以下是一些基本的 Flexbox 属性和它们的作用： - `justify-content`: 设置主轴方向上的对齐方式。 - `align-items`: 设置交叉轴方向上的对齐方式。 - `flex-direction`: 设置弹性容器的主轴方向。 - `flex-wrap`: 设置弹性容器的子项是否换行。 - `align-content`: 设置多根轴线的对齐方式。 下面是一个简单的示例，展示如何在 uni-app 中创建一个基本的弹性布局： ```html <template> <view class="flex-container"> <view class="flex-item">1</view> <view class="flex-item">2</view> <view class="flex-item">3</view> </view> </template> <style> .flex-container { display: flex; /* 启用弹性布局 */ justify-content: space-around; /* 子项在主轴上的分布方式 */ align-items: center; /* 子项在交叉轴上的对齐方式 */ } .flex-item { width: 50px; /* 子项宽度 */ height: 50px; /* 子项高度 */ background-color: #409eff; /* 背景颜色 */ margin: 10px; /* 子项外边距 */ } </style> ``` 在这个例子中，`.flex-container` 是启用弹性布局的容器，它里面的 `.flex-item` 是弹性项目。我们设置了容器的主轴对齐方式、交叉轴对齐方式和子项的宽度、高度、外边距等属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值