快捷導(dǎo)航

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

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

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

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

解決思路：

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

完整的代碼如下，詳細(xì)的原理見(jiàn)注釋即可

public class StretchScrollView extends NestedScrollView {

? ? // 子View
? ? private View innerView;
? ? // 上次手勢(shì)事件的y坐標(biāo)
? ? 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滾動(dòng)到邊界時(shí)的陰影效果
? ? ? ? setOverScrollMode(OVER_SCROLL_NEVER);
? ? ? ? if (getChildAt(0) != null) {
? ? ? ? ? ? innerView = getChildAt(0);
? ? ? ? }
? ? }

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

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

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

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: