Android自定義ScrollView實(shí)現(xiàn)阻尼回彈
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í)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android編程實(shí)現(xiàn)使用SoundPool播放音樂(lè)的方法
這篇文章主要介紹了Android編程實(shí)現(xiàn)使用SoundPool播放音樂(lè)的方法,較為詳細(xì)的分析說(shuō)明了SoundPool對(duì)象的使用技巧,需要的朋友可以參考下2016-01-01
Android開(kāi)發(fā)必備知識(shí) 為什么說(shuō)Kotlin值得一試
為什么說(shuō)值得一試,這篇文章主要為大家詳細(xì)介紹了Android開(kāi)發(fā)必備知識(shí),Kotlin的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
Android Studio設(shè)置或修改Android SDK路徑方法
在本篇文章中小編給大家整理了關(guān)于Android Studio設(shè)置或修改Android SDK路徑方法和相關(guān)知識(shí)點(diǎn),需要的朋友們學(xué)習(xí)下。2019-04-04
Flutter自定義實(shí)現(xiàn)彈出層的示例代碼
這篇文章主要為大家詳細(xì)介紹了Flutter如何自定義組件實(shí)現(xiàn)彈出層的效果,?文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-08-08
Android studio4.1更新后出現(xiàn)的問(wèn)題詳解
這篇文章主要介紹了Android studio4.1更新后出現(xiàn)的問(wèn)題詳解,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
Android基于TextView不獲取焦點(diǎn)實(shí)現(xiàn)跑馬燈效果
這篇文章主要介紹了Android基于TextView不獲取焦點(diǎn)實(shí)現(xiàn)跑馬燈效果,結(jié)合實(shí)例形式分析了Android基于TextView實(shí)現(xiàn)跑馬燈的功能與布局相關(guān)技巧,需要的朋友可以參考下2017-02-02
Android控件RecyclerView實(shí)現(xiàn)混排效果仿網(wǎng)易云音樂(lè)
這篇文章主要為大家詳細(xì)介紹了Android控件RecyclerView實(shí)現(xiàn)混排效果,仿網(wǎng)易云音樂(lè),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10
Android列表實(shí)現(xiàn)(2)_游標(biāo)列表案例講解
最近開(kāi)始學(xué)習(xí)android的ui 游標(biāo)列表實(shí)現(xiàn),先上幾個(gè)相關(guān)的例子,后續(xù)還會(huì)有更新,感興趣的朋友可以研究下2012-12-12

