android ScrollView實(shí)現(xiàn)下拉放大頭部圖片
前言
之前做項(xiàng)目的時(shí)候,需要實(shí)現(xiàn)類似微博個(gè)人主頁的ScrollView效果,就是到頂部時(shí)繼續(xù)下拉會(huì)放大頂部的圖片。然后在網(wǎng)上找了一篇相關(guān)的實(shí)現(xiàn),效果非常好,代碼也很簡(jiǎn)潔易懂。(傳送門: 自定義scrollView實(shí)現(xiàn)頂部圖片下拉放大),那么我這里就只是在其基礎(chǔ)上修改了一點(diǎn)點(diǎn)而已,比如在代碼中控制圖片居中、增加動(dòng)態(tài)設(shè)置放大的控件、使用自定義的最大放大倍數(shù)等,都是很簡(jiǎn)單的修改,還添加了滑動(dòng)的監(jiān)聽回調(diào)(項(xiàng)目需要)。
效果如下:
思路
老樣子,我們先來說下思路,比起代碼,思路才是最重要的。具體步驟如下:
1. 獲得要放大的控件,并獲得其寬高;
2. 在頂部時(shí)繼續(xù)往下拉,通過LayoutParams改變控件的寬高;
3. 手指抬起時(shí)初始化各項(xiàng)參數(shù),通過屬性動(dòng)畫回彈控件。
實(shí)現(xiàn)
直接看代碼
public class HeadZoomScrollView extends ScrollView { public HeadZoomScrollView(Context context) { super(context); } public HeadZoomScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public HeadZoomScrollView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } // 用于記錄下拉位置 private float y = 0f; // zoomView原本的寬高 private int zoomViewWidth = 0; private int zoomViewHeight = 0; // 是否正在放大 private boolean mScaling = false; // 放大的view,默認(rèn)為第一個(gè)子view private View zoomView; public void setZoomView(View zoomView) { this.zoomView = zoomView; } // 滑動(dòng)放大系數(shù),系數(shù)越大,滑動(dòng)時(shí)放大程度越大 private float mScaleRatio = 0.4f; public void setmScaleRatio(float mScaleRatio) { this.mScaleRatio = mScaleRatio; } // 最大的放大倍數(shù) private float mScaleTimes = 2f; public void setmScaleTimes(int mScaleTimes) { this.mScaleTimes = mScaleTimes; } // 回彈時(shí)間系數(shù),系數(shù)越小,回彈越快 private float mReplyRatio = 0.5f; public void setmReplyRatio(float mReplyRatio) { this.mReplyRatio = mReplyRatio; } @Override protected void onFinishInflate() { super.onFinishInflate(); // 不可過度滾動(dòng),否則上移后下拉會(huì)出現(xiàn)部分空白的情況 setOverScrollMode(OVER_SCROLL_NEVER); // 獲得默認(rèn)第一個(gè)view if (getChildAt(0) != null && getChildAt(0) instanceof ViewGroup && zoomView == null) { ViewGroup vg = (ViewGroup) getChildAt(0); if (vg.getChildCount() > 0) { zoomView = vg.getChildAt(0); } } } @Override public boolean onTouchEvent(MotionEvent ev) { if (zoomViewWidth <= 0 || zoomViewHeight <=0) { zoomViewWidth = zoomView.getMeasuredWidth(); zoomViewHeight = zoomView.getMeasuredHeight(); } if (zoomView == null || zoomViewWidth <= 0 || zoomViewHeight <= 0) { return super.onTouchEvent(ev); } switch (ev.getAction()) { case MotionEvent.ACTION_MOVE: if (!mScaling) { if (getScrollY() == 0) { y = ev.getY();//滑動(dòng)到頂部時(shí),記錄位置 } else { break; } } int distance = (int) ((ev.getY() - y)*mScaleRatio); if (distance < 0) break;//若往下滑動(dòng) mScaling = true; setZoom(distance); return true; case MotionEvent.ACTION_UP: mScaling = false; replyView(); break; } return super.onTouchEvent(ev); } /**放大view*/ private void setZoom(float s) { float scaleTimes = (float) ((zoomViewWidth+s)/(zoomViewWidth*1.0)); // 如超過最大放大倍數(shù),直接返回 if (scaleTimes > mScaleTimes) return; ViewGroup.LayoutParams layoutParams = zoomView.getLayoutParams(); layoutParams.width = (int) (zoomViewWidth + s); layoutParams.height = (int)(zoomViewHeight*((zoomViewWidth+s)/zoomViewWidth)); // 設(shè)置控件水平居中 ((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width - zoomViewWidth) / 2, 0, 0, 0); zoomView.setLayoutParams(layoutParams); } /**回彈*/ private void replyView() { final float distance = zoomView.getMeasuredWidth() - zoomViewWidth; // 設(shè)置動(dòng)畫 ValueAnimator anim = ObjectAnimator.ofFloat(distance, 0.0F).setDuration((long) (distance * mReplyRatio)); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { setZoom((Float) animation.getAnimatedValue()); } }); anim.start(); } @Override protected void onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if (onScrollListener!=null) onScrollListener.onScroll(l,t,oldl,oldt); } private OnScrollListener onScrollListener; public void setOnScrollListener(OnScrollListener onScrollListener) { this.onScrollListener = onScrollListener; } /**滑動(dòng)監(jiān)聽*/ public interface OnScrollListener{ void onScroll(int scrollX,int scrollY,int oldScrollX, int oldScrollY); } }
可以看到,在onTouchEvent方法中,先判斷當(dāng)前是否為放大狀態(tài),不是的話就在頂部的時(shí)候記錄觸摸事件的位置,當(dāng)然這個(gè)寫在ACTION_DOWN事件中也是可以的,若不在頂部,則不處理。
之后計(jì)算滑動(dòng)的距離,若是往下滑動(dòng),則不處理,需要注意的是這個(gè)距離是指當(dāng)前位置與最開始的ACTION_DOWN動(dòng)作的距離,因此當(dāng)這個(gè)距離小于0的時(shí)候,便是”沒放大&&往下滑”,這個(gè)時(shí)候應(yīng)該滑動(dòng)的是ScrollView,恩,沒毛病。當(dāng)距離不小于0的時(shí)候,開始放大控件,可以看到調(diào)用了setZoom方法,注意,在這里其實(shí)控件的下拉放大、上拉恢復(fù)都做了, 回彈其實(shí)也是調(diào)用這個(gè)方法。
抬手的時(shí)候回彈,這個(gè)不需要說了。
代碼整體來說比較簡(jiǎn)單,要是你需要其他實(shí)現(xiàn),也可以很方便地加上,比如我們要放大圖片的時(shí)候像微博一樣,旋轉(zhuǎn)外部的菊花,放手的時(shí)候刷新數(shù)據(jù)怎么辦?你完全可以在
onTouchEvent中增加回調(diào)接口,然后在外部實(shí)現(xiàn)具體邏輯就可以了。
使用
直接像普通的ScollView樣使用就可以了,這個(gè)就不累贅了。
源碼:下載地址
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Kotlin?掛起函數(shù)CPS轉(zhuǎn)換原理解析
這篇文章主要為大家介紹了Kotlin?掛起函數(shù)CPS轉(zhuǎn)換原理解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Android補(bǔ)間動(dòng)畫的實(shí)現(xiàn)示例
本文主要介紹了Android補(bǔ)間動(dòng)畫的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04Android 應(yīng)用適配 Android 7.0 權(quán)限要求詳解
今天小編就為大家分享一篇Android 應(yīng)用適配 Android 7.0 權(quán)限要求詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08Android ListView實(shí)現(xiàn)圖文列表顯示
這篇文章主要為大家詳細(xì)介紹了Android ListView實(shí)現(xiàn)圖文列表顯示,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-01-01Android 廣播監(jiān)聽網(wǎng)絡(luò)狀態(tài)詳解及實(shí)例代碼
這篇文章主要介紹了Android 廣播監(jiān)聽網(wǎng)絡(luò)狀態(tài)詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02Android App中讀取XML與JSON格式數(shù)據(jù)的基本方法示例
這篇文章主要介紹了Android App中讀取XML與JSON格式數(shù)據(jù)的基本方法示例,Android中自帶的JSONObject非常好用,需要的朋友可以參考下2016-03-03Android如何創(chuàng)建可拖動(dòng)的圖片控件
這篇文章主要為大家詳細(xì)介紹了Android如何創(chuàng)建可拖動(dòng)的圖片控件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-03-03Ubuntu中為Android簡(jiǎn)單介紹硬件抽象層(HAL)
本文主要介紹在Android 的硬件抽象層,學(xué)習(xí)Android 硬件抽象層(HAL)對(duì)理解整個(gè)Android都是有非常大的作用,有興趣的小伙伴可以參考下2016-08-08gradle tool升級(jí)到3.0注意事項(xiàng)小結(jié)
這篇文章主要介紹了gradle tool升級(jí)到3.0注意事項(xiàng)及修改相關(guān)文件介紹,需要的朋友可以參考下2018-02-02