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

安卓无忧

浏览: 12216 次
性别:
来自: 济南

最近访客更多访客>>

全站唯一的应户名

13813962825

zhangpo18595451254

hbczlaoxu

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

2016-09 ( 16)
更多存档...

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;
            }
        });
    }
}

</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"
          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>

以上是全部代码。最后介绍一款本人开发帮助初学者的app,安卓无忧，它包含三个部分，分别是实例、源码和文档。
通过实例demo让安卓学习的童鞋对学的是什么有一个最直接、最感官的认识。通过查看源码，能快速把别人的知识转
化成自己的。通过文档对知识点进行最全面的学习。例子都是最简单，最全面的，没有无用代码，介绍哪一章就突出本章内容，
相信大家都能看懂学会。安卓无忧的代码部分采用android studio的目录结构，代码全部高亮显示，多种主题供读者选择，
源码部分的图片均可以打开查看。安卓无忧文档对每一章都详细介绍让初学者不仅知其然还知其所以然，文档也有三种主题可选，

文档中的小图均可以点击放大查看。最后附源码地址以及安卓无忧108例子http://android.myapp.com/myapp/detail.htm?apkName=com.shandong.mm.androidstudy http://pan.baidu.com/s/1cC9GN8，

或者在应用宝搜索安卓无忧