1. 程式人生 > >Android重寫ScrollView實現上拉下拉回彈,下拉頭部放大功能

Android重寫ScrollView實現上拉下拉回彈,下拉頭部放大功能

效果圖:

自定義ScrollView:

public class MyScrollView extends ScrollView {
    //----頭部收縮屬性--------
    // 記錄首次按下位置
    private float mFirstPosition = 0;
    // 頭部圖片是否正在放大
    private Boolean mScaling = false;
    private View dropZoomView;//需要被放大的view
    private int dropZoomViewWidth;
    private int dropZoomViewHeight
; //----頭部收縮屬性end-------- //------尾部收縮屬性-------- private View inner;// 子View private float y;// 點選時y座標 private Rect normal = new Rect();// 矩形(這裡只是個形式,只是用於判斷是否需要動畫.) private boolean isCount = false;// 是否開始計算 //最後的座標 private float lastX = 0; private float lastY = 0; //當前座標 private float
currentX = 0; private float currentY = 0; //移動的座標量 private float distanceX = 0; private float distanceY = 0; private boolean upDownSlide = false; //判斷上下滑動的flag //------尾部收縮屬性end-------- public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } //初始化
private void init() { setOverScrollMode(OVER_SCROLL_NEVER); if (getChildAt(0) != null) { inner = getChildAt(0);//這個是底部收縮的view //頭部收縮的 ViewGroup vg = (ViewGroup) getChildAt(0); if (vg.getChildAt(0) != null) { dropZoomView = vg.getChildAt(0); } } } /*** * 生成檢視工作完成.該函式在生成檢視的最後呼叫,在所有子檢視新增完之後. 即使子類覆蓋了 onFinishInflate * 方法,也應該呼叫父類的方法,使該方法得以執行. */ @Override protected void onFinishInflate() { //初始化 init(); super.onFinishInflate(); } @Override public boolean dispatchTouchEvent(MotionEvent ev) { //這裡只是計算尾部座標 currentX = ev.getX(); currentY = ev.getY(); switch (ev.getAction()) { case MotionEvent.ACTION_MOVE: distanceX = currentX - lastX; distanceY = currentY - lastY; if (Math.abs(distanceX) < Math.abs(distanceY) && Math.abs(distanceY) > 12) { upDownSlide = true; } break; } lastX = currentX; lastY = currentY; if (upDownSlide && inner != null) commOnTouchEvent(ev); return super.dispatchTouchEvent(ev); } /*** * 觸控事件 * * @param ev */ public void commOnTouchEvent(MotionEvent ev) { //頭部縮放計算 if (dropZoomViewWidth <= 0 || dropZoomViewHeight <= 0) { dropZoomViewWidth = dropZoomView.getMeasuredWidth(); dropZoomViewHeight = dropZoomView.getMeasuredHeight(); } switch (ev.getAction()) { case MotionEvent.ACTION_UP: //手指離開後頭部恢復圖片 mScaling = false; replyImage(); // 手指鬆開尾部恢復 if (isNeedAnimation()) { animation(); isCount = false; } clear0(); break; //這裡頭尾分開處理,互不干擾 case MotionEvent.ACTION_MOVE: //尾部處理 final float preY = y;// 按下時的y座標 float nowY = ev.getY();// 時時y座標 int deltaY = (int) (preY - nowY);// 滑動距離 if (!isCount) { deltaY = 0; // 在這裡要歸0. } y = nowY; // 當滾動到最上或者最下時就不會再滾動,這時移動佈局 if (isNeedMove()) { // 初始化頭部矩形 if (normal.isEmpty()) { // 儲存正常的佈局位置 normal.set(inner.getLeft(), inner.getTop(), inner.getRight(), inner.getBottom()); } // 移動佈局 inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2, inner.getRight(), inner.getBottom() - deltaY / 2); } isCount = true; //尾部處理end //頭部處理 if (!mScaling) { if (getScrollY() == 0) { mFirstPosition = ev.getY();// 滾動到頂部時記錄位置,否則正常返回 } else { break; } } int distance = (int) ((ev.getY() - mFirstPosition) * 0.5); // 滾動距離乘以一個係數 if (distance < 0) { // 當前位置比記錄位置要小,正常返回 break; } // 處理放大 mScaling = true; setZoom(1 + distance); //頭部處理end break; } } /*** * 回縮動畫,尾部往下縮動畫 */ public void animation() { // 開啟移動動畫 TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(), normal.top); ta.setDuration(200); inner.startAnimation(ta); // 設定回到正常的佈局位置 inner.layout(normal.left, normal.top, normal.right, normal.bottom); normal.setEmpty(); } // 是否需要開啟動畫 public boolean isNeedAnimation() { return !normal.isEmpty(); } // 回彈動畫,header往上縮動畫 (使用了屬性動畫) public void replyImage() { //final float distance = dropZoomView.getMeasuredWidth() - dropZoomViewWidth; final float distance = dropZoomView.getMeasuredHeight() - dropZoomViewHeight; // 設定動畫 ValueAnimator anim = ObjectAnimator.ofFloat(0.0F, 1.0F).setDuration((long) (distance * 0.7)); anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { float cVal = (Float) animation.getAnimatedValue(); setZoom(distance - ((distance) * cVal)); } }); anim.start(); } //頭部縮放 public void setZoom(float s) { if (dropZoomViewHeight <= 0 || dropZoomViewWidth <= 0) { return; } ViewGroup.LayoutParams lp = dropZoomView.getLayoutParams(); //lp.width = (int) (dropZoomViewWidth + s/2); lp.width = (int) (dropZoomViewWidth); lp.height = (int) (dropZoomViewHeight * ((dropZoomViewWidth + s) / dropZoomViewWidth)); dropZoomView.setLayoutParams(lp); } /*** * 是否需要移動佈局 inner.getMeasuredHeight():獲取的是控制元件的總高度 * * getHeight():獲取的是螢幕的高度 * * @return */ public boolean isNeedMove() { int offset = inner.getMeasuredHeight() - getHeight(); int scrollY = getScrollY(); // 0是頂部,後面那個是底部 if (scrollY == 0 || scrollY == offset) { return true; } return false; } //清理尾部屬性值 private void clear0() { lastX = 0; lastY = 0; distanceX = 0; distanceY = 0; upDownSlide = false; } }

佈局:

最外層 是MyScrollView,接著是你將要寫佈局的線性佈局或者是相對佈局,再是你要拉昇的Viewgroup,第三層才是有拉昇效果的

效果圖第一張的佈局:

<sosee.mytext30.MyScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="sosee.mytext30.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        android:orientation="vertical">

        <ImageView
            android:src="@mipmap/ic_launcher"
            android:layout_width="match_parent"
            android:layout_height="200dp" />

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher" />

            <ImageView
                android:id="@+id/iv"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher" />

        </LinearLayout>
    </LinearLayout>
</sosee.mytext30.MyScrollView>


效果圖第二張的佈局:

<sosee.mytext30.MyScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="sosee.mytext30.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorAccent"
        android:orientation="vertical">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher" />

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher" />

            <ImageView
                android:id="@+id/iv"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@mipmap/ic_launcher" />

        </LinearLayout>
    </LinearLayout>
</sosee.mytext30.MyScrollView>