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

java学习手册，最强java学习资料

楼主自己开发的象棋棋谱app，含10万棋谱

先看效果图



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

自定义的ScrollView

package mm.shandong.com.testmtxqcomplex.myui;

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

/**
* Created by 安卓学习手册 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;
}
});
}
}

</pre><pre name="code" class="java">布局文件

<?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"
       
afcb
            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>

</pre><pre code_snippet_id="1892699" snippet_file_name="blog_20160921_4_3682959" name="code" class="java">

Demo源码   

以上是全部代码。最后介绍一款本人开发帮助初学者的app android学习手册，它包含三个部分，分别是实例、源码和文档。

通过实例demo让安卓学习的童鞋对学的是什么有一个最直接、最感官的认识。通过查看源码，能快速把别人的知识转

化成自己的。通过文档对知识点进行最全面的学习。例子都是最简单，最全面的，没有无用代码，介绍哪一章就突出本章内容，

相信大家都能看懂学会。安卓无忧的代码部分采用android studio的目录结构，代码全部高亮显示，多种主题供读者选择，

源码部分的图片均可以打开查看。每一章都详细介绍让初学者不仅知其然还知其所以然，文档也有三种主题可选，
文档中的小图均可以点击放大查看。最后附源码地址以及android学习手册108例子例子源码     。

本人微博：honey_11