Android 仿美团网,大众点评购买框悬浮效果，仿美团详情页，可下拉放大图片，向上滚动图片，松手有动画

Posted 2020-08-09

直接上代码注释都写到代码里面了：

自定义的ScrollView

package mm.shandong.com.testmtxqcomplex.myui;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

/**
 * Created by buyadong on 2016/7/29.
 */
public class MyScrollView extends ScrollView {
    private OnScrollChangedListener onScrollChangedListener;

    public void setOnScrollChangedListener(OnScrollChangedListener onScrollChangedListener) {
        this.onScrollChangedListener = onScrollChangedListener;
    }

    public MyScrollView(Context context) {
        super(context);
    }

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

    public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onScrollChanged(int l, int t, int oldl, int oldt) {
        super.onScrollChanged(l, t, oldl, oldt);
        if(onScrollChangedListener != null){
            onScrollChangedListener.scrollSomething();
        }
    }
    //定义滚动变化上的回调接口
    public interface OnScrollChangedListener{
         public void scrollSomething();
    }

}

美团详情的activity

package mm.shandong.com.testmtxqcomplex;

import android.animation.ValueAnimator;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewTreeObserver;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.LinearLayout;

import mm.shandong.com.testmtxqcomplex.myui.MyScrollView;

public class TestMTXQComplexActivity extends AppCompatActivity {
    ImageView imageNOFD;
    ImageView imageFD;
    FrameLayout frameLayout;
    MyScrollView scrollView;
    ImageView imageBannder;
    int ib_orginalWidth;
    int ib_orginalHeight;
    boolean firstMove = true;
    LinearLayout linearLayout;
    float touchDownY;
    boolean isScale = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_mtxqcomplex);
        imageNOFD = (ImageView) findViewById(R.id.imageNOFD);
        imageFD = (ImageView) findViewById(R.id.imageFD);
        frameLayout = (FrameLayout) findViewById(R.id.frameLayout);
        imageBannder = (ImageView) findViewById(R.id.imageBannder);
        linearLayout = (LinearLayout) findViewById(R.id.linearlayout);
        ///frameLayout创建完成之后调用该方法，因为创建之前得不到控件高度和宽度
        frameLayout.getViewTreeObserver().addOnGlobalLayoutListener(
            new ViewTreeObserver.OnGlobalLayoutListener() {
                @Override
                public void onGlobalLayout() {
                    ///初始化imageBannder位置，和浮动图片位置
                    int y1_position = imageBannder.getHeight();
                    linearLayout.layout(0, y1_position,linearLayout.getWidth(),
                            y1_position + linearLayout.getHeight());
                    int y_position = (int) imageNOFD.getY() + y1_position;
                    imageFD.layout(0, y_position, imageFD.getWidth(),
                            y_position + imageFD.getHeight());
                    ib_orginalHeight = imageBannder.getHeight();
                    ib_orginalWidth = imageBannder.getWidth();
                }
        });
        scrollView = (MyScrollView) findViewById(R.id.scrollView);
        ///滚动条滚动时，注册滚动变化的监听事件，重新设置imageBannder位置和浮动图片位置
        scrollView.setOnScrollChangedListener(new MyScrollView.OnScrollChangedListener() {
            @Override
            public void scrollSomething() {
                imageBannder.layout(0, scrollView.getScrollY() / 2,
                        imageBannder.getWidth(),
                        scrollView.getScrollY() / 2 + imageBannder.getHeight());
                int y_position = (int) Math.max(scrollView.getScrollY(),
                        linearLayout.getY() + imageNOFD.getY());
                imageFD.layout(0, y_position, imageFD.getWidth(),
                        y_position + imageFD.getHeight());
            }
        });
        ///注册手指触摸移动的事件监听
        scrollView.setOnTouchListener(new View.OnTouchListener() {
            @Override
            public boolean onTouch(View view, MotionEvent motionEvent) {
                int motionAction = motionEvent.getAction();
                switch (motionAction) {
                    case MotionEvent.ACTION_DOWN:
                        //记录第一次按下的位置
                        touchDownY = motionEvent.getY();
                        //如果手指按下时，srollY不等于零则不能放大图片，等于零是放大图片的必要条件
                        if (scrollView.getScrollY() != 0) {
                            isScale = false;
                        }
                        break;
                    case MotionEvent.ACTION_UP:
                        if (isScale) {
                            //判断手指第一次是向上滑动还是向下滑动
                            if (motionEvent.getY() - touchDownY > 0) {
                             ///定义手指松开时的图片动画
                                final ValueAnimator va =
                                        ValueAnimator.ofFloat(motionEvent.getY(), touchDownY);
                                va.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
                                    @Override
                                    public void onAnimationUpdate(ValueAnimator valueAnimator) {
                                        float currentY = (float) va.getAnimatedValue();
                                        float moveDistance = (currentY - touchDownY) * 0.3f;
                                        int tempheight = (int) (ib_orginalHeight + moveDistance);
                                        int tempwidth = (int) (tempheight *
                                                ((float) ib_orginalWidth / ib_orginalHeight));
                                        int x_position = (int) ((ib_orginalWidth - tempwidth) / 2);
                                        imageBannder.layout(x_position,
                                                0, x_position + tempwidth, tempheight);
                                        linearLayout.layout(0, tempheight, linearLayout.getWidth(),
                                                tempheight + linearLayout.getHeight());
                                        imageFD.layout(0, tempheight, imageFD.getWidth(),
                                                tempheight + imageFD.getHeight());
                                    }
                                });
                                va.setDuration(200);
                                va.start();
                            }

                        }
                        firstMove = true;
                        isScale = true;
                        break;
                    case MotionEvent.ACTION_MOVE:
                        //手指当前位置与第一次按下时的距离
                        float distance = motionEvent.getY() - touchDownY;
                        if (isScale) {
                            if (firstMove) {
                                //根据手指第一次移动判断移动方向是向上还是向下，向下放大图片
                                if (distance > 0) {
                                    isScale = true;
                                    firstMove = false;
                                } else if (distance < 0) {
                                    isScale = false;
                                    firstMove = false;
                                }
                            }
                        }
                        if (isScale) {
                            if (distance > 0) {
                                //如果手指按下时滚动条的scrollY属性为0,并且向下滚动，那么放大图片
                                float moveDistance = distance * 0.3f;
                                int tempheight = (int) (ib_orginalHeight + moveDistance);
                                int tempwidth = (int) (tempheight *
                                        ((float) ib_orginalWidth / ib_orginalHeight));
                                int x_position = (int) ((ib_orginalWidth - tempwidth) / 2);
                                imageBannder.layout(x_position, 0, x_position + tempwidth,tempheight);
                                linearLayout.layout(0, tempheight, linearLayout.getWidth(),
                                        tempheight + linearLayout.getHeight());
                                imageFD.layout(0, tempheight, imageFD.getWidth(),
                                        tempheight + imageFD.getHeight());
                            }
                            return true;
                        }
                }
                return false;
            }
        });
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">


    <mm.shandong.com.testmtxqcomplex.myui.MyScrollView
        android:id="@+id/scrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <FrameLayout
            android:id="@+id/frameLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">


            <ImageView
                android:id="@+id/imageBannder"
                android:layout_width="match_parent"
                android:layout_height="130dp"
                android:scaleType="centerCrop"
                android:src="@drawable/banner" />


            <LinearLayout
                android:id="@+id/linearlayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">


                <ImageView
                    android:id="@+id/imageNOFD"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/fd" />


                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/meituan1" />


                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/meituan1" />


                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/meituan1" />


                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:scaleType="centerCrop"
                    android:src="@drawable/meituan1" />
            </LinearLayout>


            <ImageView
                android:id="@+id/imageFD"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:src="@drawable/fd" />
        </FrameLayout>


    </mm.shandong.com.testmtxqcomplex.myui.MyScrollView>
</LinearLayout>

最后附源码地址以及安卓无忧108例子http://android.myapp.com/myapp/detail.htm?apkName=com.shandong.mm.androidstudy                                                       http://pan.baidu.com/s/1cC9GN8