1. 程式人生 > >實現ViewPager的回彈效果

實現ViewPager的回彈效果

為了能夠在ViewPager的第一頁和最後一頁左右滑動時候不顯得那麼生硬,通過重寫ViewPager類實現回彈效果。
程式碼很簡單,主要重寫onTouchEvent方法。
程式碼如下:

public class BounceBackViewPager extends ViewPager {

    private int currentPosition = 0;
    private Rect mRect = new Rect();//用來記錄初始位置
    private boolean handleDefault = true;
    private float preX = 0
f; private static final float RATIO = 0.5f;//摩擦係數 private static final float SCROLL_WIDTH = 10f; public BounceBackViewPager(Context context) { super(context); } public BounceBackViewPager(Context context, AttributeSet attrs) { super(context, attrs); } @Override
public boolean dispatchKeyEvent(KeyEvent event) { return super.dispatchKeyEvent(event); } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.ACTION_DOWN) { preX = ev.getX();//記錄起點 currentPosition = getCurrentItem(); } return
super.onInterceptTouchEvent(ev); } @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_UP: onTouchActionUp(); break; case MotionEvent.ACTION_MOVE: if (getAdapter().getCount() == 1) { float nowX = ev.getX(); float offset = nowX - preX; preX = nowX; if (offset > SCROLL_WIDTH) {//手指滑動的距離大於設定值 whetherConditionIsRight(offset); } else if (offset < -SCROLL_WIDTH) { whetherConditionIsRight(offset); } else if (!handleDefault) {//這種情況是已經出現緩衝區域了,手指慢慢恢復的情況 if (getLeft() + (int) (offset * RATIO) != mRect.left) { layout(getLeft() + (int) (offset * RATIO), getTop(), getRight() + (int) (offset * RATIO), getBottom()); } } } else if ((currentPosition == 0 || currentPosition == getAdapter().getCount() - 1)) { float nowX = ev.getX(); float offset = nowX - preX; preX = nowX; if (currentPosition == 0) { if (offset > SCROLL_WIDTH) {//手指滑動的距離大於設定值 whetherConditionIsRight(offset); } else if (!handleDefault) {//這種情況是已經出現緩衝區域了,手指慢慢恢復的情況 if (getLeft() + (int) (offset * RATIO) >= mRect.left) { layout(getLeft() + (int) (offset * RATIO), getTop(), getRight() + (int) (offset * RATIO), getBottom()); } } } else { if (offset < -SCROLL_WIDTH) { whetherConditionIsRight(offset); } else if (!handleDefault) { if (getRight() + (int) (offset * RATIO) <= mRect.right) { layout(getLeft() + (int) (offset * RATIO), getTop(), getRight() + (int) (offset * RATIO), getBottom()); } } } } else { handleDefault = true; } if (!handleDefault) { return true; } break; default: break; } return super.onTouchEvent(ev); } private void whetherConditionIsRight(float offset) { if (mRect.isEmpty()) { mRect.set(getLeft(), getTop(), getRight(), getBottom()); } handleDefault = false; layout(getLeft() + (int) (offset * RATIO), getTop(), getRight() + (int) (offset * RATIO), getBottom()); } private void onTouchActionUp() { if (!mRect.isEmpty()) { recoveryPosition(); } } private void recoveryPosition() { TranslateAnimation ta = new TranslateAnimation(getLeft(), mRect.left, 0, 0); ta.setDuration(300); startAnimation(ta); layout(mRect.left, mRect.top, mRect.right, mRect.bottom); mRect.setEmpty(); handleDefault = true; } }

相關推薦

ViewPager效果

其實在我們很多應用中都看到當ViewPager滑到第一頁或者最後一頁的時候,如果再滑動的時候,就會有一個緩衝的過程,也就是回彈效果。之前在研究回彈效果的時候,也順便實現了ViewPager的回彈效果,其實也很簡單,一下是實現程式碼,註釋比較少: package com.fr

ScrollView實現阻尼效果

今天跟大夥簡紹個ScrollView的阻尼回彈!下拉到一定程度,可以回撥進行重新整理和進行操作等! 直接上程式碼了! package com.***.fb**.widget; import android.content.Context; import

下拉ScrollView伸縮頭佈局,實現ScrollView效果

專案中用到了商品詳情展示效果,所以立馬想到借鑑天貓商品詳情介面,看了天貓的詳情頁面想到了兩套解決方案。1,使用LitView 新增header監聽listView 的滑動然後根據listView 的滑動距離計算 header應該滑動的距離 和改變header的

自定義ScrollView 實現上拉下拉的效果--並且子控件中有Viewpager的情況

是否 AS abs pri tar utils lda animation ted onInterceptTouchEvent就是對子控件中Viewpager的處理:左右滑動應該讓viewpager消費 1 public class MyScrollView ext

實現ViewPager效果

為了能夠在ViewPager的第一頁和最後一頁左右滑動時候不顯得那麼生硬,通過重寫ViewPager類實現回彈效果。 程式碼很簡單,主要重寫onTouchEvent方法。 程式碼如下: public class BounceBackViewPager

-webkit-overflow-scrolling 與滾動效果.

插件 列表 卡住 快的 優雅 css 移動設備 分享 兼容性 參考來源:https://developer.mozilla.org/zh-CN/docs/Web/CSS/-webkit-overflow-scrolling      https://www.w3cways.

angual+mui 雙欄上拉加載,微信裏面禁用默認事件可用,可以防止瀏覽器效果

apply length data mui this reat mobile ng- a10 //html 部分 p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9

vue如何實現checkbox效果

1.  當我選中多選框,點選確定後,再開啟彈框,如何讓之前選中的值回顯到頁面上。 2.  給遍歷的元素 雙向繫結 v-model="businessregion.checked" <template v-if="businessregionList.len

css實現波紋

css實現波紋回彈 比如直接點選一個盒子,讓他的背景像波紋一樣 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>滑鼠點選按鈕呈現水波擴散效果</t

解決蘋果微信瀏覽器下拉效果

.content是需要滑動的部分 var overscroll = function(el) { el.addEventListener('touchstart', function()

移動端阻止瀏覽器中預設元素滑動效果(橡皮筋效果

在js檔案中加如下程式碼: document.addEventListener('touchstart',function(e){ e.preventDefault(); //

JavaScript禁止微信瀏覽器下拉效果

本文例項為大家分享了JavaScript禁止微信瀏覽器下拉回彈的效果 方法1:         <script type="text/javascript">             var overscroll = function(el){     

原來操控介面可以這麼簡單----安卓上下滑動縮放頂部圖片,左右滑動結束當前Activity,及View柔和效果

先上效果圖: 上傳圖片不能超過2M,費了好大勁。每一張gif動的有點快,將就看。 首先說原理: 為activity的xml檔案根佈局新增setOnTouchListener。上下滑動和左右滑動的所有操作都是在OnTouchListener的onTouch方法中實現的,通過

android ListView 仿IOS 效果

最近看IOS的下拉效果感覺很不錯,當拉倒最上面和最下面的時候繼續拉動會有緩衝,想在android裡面也做一個,到網上到處找,沒有找到好的方法,據說android新的API對ListView有這樣的支援,感覺不是特別好用。 自己利用scroller實現了一下,廢話不多說了直接

CoordinatorLayout初體驗以及標題欄下方圖片的效果

最近在研究material design ,瞭解到 CoordinatorLayout 這個佈局,所以研究和學習下,寫了個demo.加上拓展仿照了一個標題欄下方圖片的回彈效果,但不是使用CoordinatorLayout 實現的,下面看圖: 第一個效果是使

Android 帶阻尼效果的ScorllView

import android.content.Context; import android.graphics.Color; import android.graphics.Rect; import android.util.AttributeSet; impo

仿IOS效果支援任何控制元件

效果圖: 匯入依賴: dependencies { // ... compile 'me.everything:overscroll-decor-android:1.0.4

Android HorizontalScrollView效果

轉載記錄備份查閱 import android.annotation.SuppressLint; import android.os.Build; import android.util.Log; import android.view.MotionEvent

Android滑動效果

原理: addHeaderView裡做的事: 1.測量出header的寬高,呼叫了measureView方法 2.設定LayoutParams,寬:MATCH_PARENT,高:10 3.設定topMargin的值為負的header的高度,即將header隱藏在螢幕最上方

具有效果的RecyclerView,RecyclerView外層可滾動容器

    一個具有回彈效果的RecyclerView,本文通過實現RecyclerView外層的容器的上下滑動達到了回彈的效果,在整個滑動的事件分發機制中,外層容器的事件攔截機制進行判斷是否攔截事件,判斷標準為RecyclerView是否滾動到了第一個item或者最後一個i