Android仿IOS上拉下拉弹性效果的实例代码

用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果,使用起来用户体验很好;Android并没有给我们封装这样一个效果,我们来看下在Android里如何实现这个效果。先看效果,感觉有些时候还是蛮实用的。

思路:其实原理很简单,实现一个自定义的Scrollview方法(来自网上大神),然后在布局文件中使用自定义方法Scrollview就可以了。

代码:

自定义View,继承自Scrollview。MyReboundScrollView类

package com.wj.myreboundscrollview.customview;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;
//仿ios可上提下拉的ScrollView
public class MyReboundScrollView extends ScrollView {

	private static final String TAG = "ElasticScrollView";

 //移动因子, 是一个百分比, 比如手指移动了100px, 那么View就只移动50px
 //目的是达到一个延迟的效果
 private static final float MOVE_FACTOR = 0.5f;

 //松开手指后, 界面回到正常位置需要的动画时间
 private static final int ANIM_TIME = 100;

 //ScrollView的子View, 也是ScrollView的唯一一个子View
 private View contentView; 

 //手指按下时的Y值, 用于在移动时计算移动距离
 //如果按下时不能上拉和下拉, 会在手指移动时更新为当前手指的Y值
 private float startY;

 //用于记录正常的布局位置
 private Rect originalRect = new Rect();

 //手指按下时记录是否可以继续下拉
 private boolean canPullDown = false;

 //手指按下时记录是否可以继续上拉
 private boolean canPullUp = false;

 //在手指滑动的过程中记录是否移动了布局
 private boolean isMoved = false;

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

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

 @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);
  }

  int action = ev.getAction();

  switch (action) {
  case MotionEvent.ACTION_DOWN:

   //判断是否可以上拉和下拉
   canPullDown = isCanPullDown();
   canPullUp = isCanPullUp();

   //记录按下时的Y值
   startY = ev.getY();
   break;

  case MotionEvent.ACTION_UP:

   if(!isMoved) break; //如果没有移动布局, 则跳过执行

   // 开启动画
   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;

   break;
  case MotionEvent.ACTION_MOVE:

   //在移动的过程中, 既没有滚动到可以上拉的程度, 也没有滚动到可以下拉的程度
   if(!canPullDown && !canPullUp) {
    startY = ev.getY();
    canPullDown = isCanPullDown();
    canPullUp = isCanPullUp();

    break;
   }

   //计算手指移动的距离
   float nowY = ev.getY();
   int 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);
 }

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

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

代码注释非常清楚。

布局文件直接使用

<com.wj.myreboundscrollview.customview.MyReboundScrollView
 xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity"
 android:orientation="vertical">
 <LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
  <EditText
   android:id="@+id/et_name"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginTop="12dip"
   android:hint="Your Name"/>
  <EditText
   android:id="@+id/et_feedback"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:layout_marginTop="32dip"
   android:hint="Your Feedback"
   android:lines="5"/>
  <Button
   android:id="@+id/btn_submit"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center"
   android:layout_marginTop="42dip"
   android:text="Submit"
   android:onClick="submit"/>
 </LinearLayout>
</com.wj.myreboundscrollview.customview.MyReboundScrollView>

这里直接在外层包裹实现。注意,因为Myreboundscrollview是继承自Scrollview,因此要遵循Scrollview的使用原则,里面只能包含一个LinearLayout,所以无论里面多门复杂的布局,最后我们都要将其包含在一个LinearLayout中。

ok,功能实现,效果也演示,具体需要使用直接拿来用就可以。

以上这篇Android仿IOS上拉下拉弹性效果的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • Android界面上拉下拉的回弹效果实例代码

    废话不多说,具体代码如下所示: public class MyScrollView extends ScrollView { private View childView; public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public MyScrollView(Co

  • Android仿IOS上拉下拉弹性效果的实例代码

    用过iphone的朋友相信都体验过页面上拉下拉有一个弹性的效果,使用起来用户体验很好:Android并没有给我们封装这样一个效果,我们来看下在Android里如何实现这个效果.先看效果,感觉有些时候还是蛮实用的. 思路:其实原理很简单,实现一个自定义的Scrollview方法(来自网上大神),然后在布局文件中使用自定义方法Scrollview就可以了. 代码: 自定义View,继承自Scrollview.MyReboundScrollView类 package com.wj.myrebounds

  • Android仿今日头条顶部导航栏效果的实例代码

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以有加了顶部导航栏. 今日头条顶部导航栏区域的主要部分是一个导航菜单.导航菜单是一组标签的集合,在新闻客户端中,每个标签标示一个新闻类别,对应下面ViewPager控件的一个分页面.当用户在ViewPager区域滑动页面时,对应的导航菜单标签也会相应的被选中,选中的标签通过一个矩形红框高亮显示,红框背

  • Android中RecyclerView上拉下拉,分割线,多条目的实例代码

    //activity的xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity

  • Android仿高德首页三段式滑动效果的示例代码

    目录 高德的效果 实现的效果 自定义View源码 xml布局中的使用 高德首页按钮处理 源码地址 最近发现很多app都使用了三段式滑动,比如说高德的首页和某宝等物流信息都是使用的三段式滑动方式,谷歌其实给了我们很好的2段式滑动,就是BottomSheet,所以这次我也是在这个原理基础上做了一个小小的修改来实现我们今天想要的效果. 高德的效果 实现的效果 我们实现的效果和高德差距不是很大,也很顺滑.具体实现其实就是继承CoordinatorLayout.Behavior 自定义View源码 /**

  • Android 通过httppost上传文本文件到服务器的实例代码

    废话不多说了,直接给大家贴关键代码了. /** * 往服务器上上传文本 比如log日志 * @param urlstr 请求的url * @param uploadFile log日志的路径 * /mnt/shell/emulated/0/LOG/LOG.log * @param newName log日志的名字 LOG.log * @return */ public static void httpPost(Activity activity,String urlstr,String uplo

  • Android将图片上传到php服务器的实例代码

    layout中很普通,就是两个button和一个ImageView <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height=&q

  • iOS 设置导航条透明效果的实例代码

    APP中很多界面都是这样的.从有不透明到透明,透明到不透明 以下代码即可实现该功能 //设置导航栏透明 func setNavigationIsTranslucent(isTranslucent:Bool) { if isTranslucent == true { self.navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default) self.navigationController?.navi

  • 微信小程序下拉菜单效果的实例代码

    //wcss /**DropDownMenu**/ /*总菜单容器*/ .menu { display: block; height: 28px; position: relative; } /*一级菜单*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; te

  • 微信小程序仿抖音短视频切换效果的实例代码

    一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的. 还是先看效果 体验路径 自定义组件系列>>仿抖音短视频切换 代码逻辑 直接调用自定义的swiper组件就好 调用代码 js const videoList = [] Page({ data: { videoList, activeId:2, isPlaying:true }, onLoad() { var that = this wx.getSys

  • Android开发返回键明暗点击效果的实例代码

    1:在很多APP里点击返回键,都可以看到返回键由亮变为暗 2:实现方法也是很简单的 (1)新建一个页面 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="65dp" android:background="#258a

随机推荐