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

落花踏尽游何处，笑入胡姬酒肆中。这篇文章主要讲述Android 仿美团网,大众点评购买框悬浮效果，仿美团详情页，可下拉放大图片，向上滚动图片，松手有动画相关的知识，希望能为你提供帮助。

文章图片

直接上代码注释都写到代码里面了：
自定义的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="https://www.songbingjia.com/android/@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="https://www.songbingjia.com/android/@drawable/fd" /> < ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="https://www.songbingjia.com/android/@drawable/meituan1" /> < ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="https://www.songbingjia.com/android/@drawable/meituan1" /> < ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="https://www.songbingjia.com/android/@drawable/meituan1" /> < ImageView android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="https://www.songbingjia.com/android/@drawable/meituan1" /> < /LinearLayout> < ImageView android:id="@+id/imageFD" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:src="https://www.songbingjia.com/android/@drawable/fd" /> < /FrameLayout> < /mm.shandong.com.testmtxqcomplex.myui.MyScrollView> < /LinearLayout>

【Android 仿美团网,大众点评购买框悬浮效果，仿美团详情页，可下拉放大图片，向上滚动图片，松手有动画】最后附源码地址以及安卓无忧108例子http://android.myapp.com/myapp/detail.htm?apkName=com.shandong.mm.androidstudy http://pan.baidu.com/s/1cC9GN8