Android自定義ScrollView實現(xiàn)阻尼回彈

更新時間：2022年04月01日 13:20:54 作者：YX_BB

這篇文章主要為大家詳細介紹了Android自定義ScrollView實現(xiàn)阻尼回彈，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

Android開發(fā)中，當一個頁面存放的控件超出屏幕時，通常需要使用ScrollView來包裹布局。這樣用戶可以通過手指的滑動來查看超出屏幕的部分。然而當ScrollView滑動到邊界時，繼續(xù)滑動只會顯示一個陰影效果。iOS自帶的控件卻可以實現(xiàn)邊界的阻尼回彈效果，這種阻尼回彈效果會讓用戶有更好的使用體驗。這里給出一個Android上的實現(xiàn)方案

解決思路：

ScrollView使用時要求內部有且僅一個子View。當ScrollView滑動到邊界時，讓子View在ScrollView中隨著手指按一定的規(guī)則進行平移，模擬出拉伸效果。當手指松開時，再讓子View恢復拉伸前的位置，模擬出回彈效果。

完整的代碼如下，詳細的原理見注釋即可

public class StretchScrollView extends NestedScrollView {

? ? // 子View
? ? private View innerView;
? ? // 上次手勢事件的y坐標
? ? private float mLastY;
? ? // 記錄子View的正常位置
? ? private Rect normal = new Rect();

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

? ? @Override
? ? protected void onFinishInflate() {
? ? ? ? initView();
? ? ? ? super.onFinishInflate();
? ? }

? ? /**
? ? ?* 獲取ScrollView的子布局
? ? ?*/
? ? private void initView() {
? ? ? ? // 去除原本ScrollView滾動到邊界時的陰影效果
? ? ? ? setOverScrollMode(OVER_SCROLL_NEVER);
? ? ? ? if (getChildAt(0) != null) {
? ? ? ? ? ? innerView = getChildAt(0);
? ? ? ? }
? ? }

? ? @Override
? ? public boolean onTouchEvent(MotionEvent ev) {
? ? ? ? switch (ev.getAction()) {
? ? ? ? ? ? case MotionEvent.ACTION_UP:
? ? ? ? ? ? ? ? // 手指松開恢復
? ? ? ? ? ? ? ? if (!normal.isEmpty()) {
? ? ? ? ? ? ? ? ? ? planAnimation();
? ? ? ? ? ? ? ? ? ? normal.setEmpty();
? ? ? ? ? ? ? ? ? ? mLastY = 0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? case MotionEvent.ACTION_MOVE:
? ? ? ? ? ? ? ? float currentY = ev.getY();
? ? ? ? ? ? ? ? // 滑動距離
? ? ? ? ? ? ? ? int distanceY = (int) (mLastY - currentY);

? ? ? ? ? ? ? ? // 處理Y軸的滾動事件，當滾動到最上或者最下時需要移動布局
? ? ? ? ? ? ? ? // 手指剛觸及屏幕時，也會觸發(fā)此事件，此時mLastY的值還是0，會立即觸發(fā)一個比較大的移動。這里過濾掉這種情況
? ? ? ? ? ? ? ? if (isNeedTranslate() && mLastY != 0) {
? ? ? ? ? ? ? ? ? ? if (normal.isEmpty()) {
? ? ? ? ? ? ? ? ? ? ? ? // 保存正常的布局位置
? ? ? ? ? ? ? ? ? ? ? ? normal.set(innerView.getLeft(), innerView.getTop(), innerView.getRight(), innerView.getBottom());
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? // 移動布局， 使distance / 2 防止平移過快
? ? ? ? ? ? ? ? ? ? innerView.layout(innerView.getLeft(), innerView.getTop() - distanceY / 2,
? ? ? ? ? ? ? ? ? ? ? ? ? ? innerView.getRight(), innerView.getBottom() - distanceY / 2);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? mLastY = currentY;
? ? ? ? ? ? ? ? break;
? ? ? ? }
? ? ? ? return super.onTouchEvent(ev);
? ? }

? ? /**
? ? ?* 回縮動畫
? ? ?*/
? ? public void planAnimation() {
? ? ? ? // 開啟移動動畫
? ? ? ? TranslateAnimation animation = new TranslateAnimation(0, 0, innerView.getTop(), normal.top);
? ? ? ? animation.setDuration(200);
? ? ? ? innerView.startAnimation(animation);
? ? ? ? // 補間動畫并不會真正修改innerView的位置，這里需要設置使得innerView回到正常的布局位置
? ? ? ? innerView.layout(normal.left, normal.top, normal.right, normal.bottom);
? ? }

? ? /**
? ? ?* 是否需要Y移動布局
? ? ?*/
? ? public boolean isNeedTranslate() {
? ? ? ? int offset = innerView.getMeasuredHeight() - getHeight();
? ? ? ? int scrollY = getScrollY();
? ? ? ? // 頂部或者底部
? ? ? ? return scrollY == 0 || scrollY == offset;
? ? }
}

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: