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="@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

时间： 2024-11-05 14:28:37

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

Android 仿美团网,大众点评购买框悬浮效果

如上图美团网,大众点评购买框悬浮效果,用户在向上滑动界面时,购买按钮始终在界面上,用户体验很好,很人性化.下面具体看看代码是怎么实现的: 主界面布局文件main.xml <?xml version="1.0" encoding="UTF-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+

Android 仿美团网,大众点评购买框悬浮效果之修改版

我之前写了一篇关于美团网,大众点评的购买框效果的文章Android对ScrollView滚动监听,实现美团.大众点评的购买悬浮效果,我自己感觉效果并不是很好,如果快速滑动界面,显示悬浮框的时候会出现一卡的现象,有些朋友说有时候会出现两个布局的情况,特别是对ScrollView滚动的Y值得监听,我还使用了Handler来获取,还有朋友给我介绍了Scrolling Tricks这个东西,我下载试了下,确实美团网,大众点评的购买框用的是这种效果,但是Scrolling Tricks只能在API11以上

Android对ScrollView滚动监听，实现美团、大众点评的购买悬浮效果

我之前写了一篇关于美团网,大众点评的购买框效果的文章Android对ScrollView滚动监听,实现美团.大众点评的购买悬浮效果,我自己感觉效果并不是很好,如果快速滑动界面,显示悬浮框的时候会出现一卡的现象,有些朋友说有时候会出现两个布局的情况,特别是对ScrollView滚动的Y值得监听,我还使用了Handler来获取,还有朋友给我介绍了Scrolling Tricks这个东西,我下载试了下,确实美团网,大众点评的购买框用的是这种效果,但是Scrolling Tricks只能在API11以上

美团PK大众点评：互诉侵权背后的真相

团购行业在经过血雨腥风的群雄混战阶段后,已经进入三足鼎立的时代.据7月中旬数据显示,团购网站数量已由2011年8月高峰时的5058家缩减为至176家,而其中美团.大众点评.糯米占据了80%以上的市场份额.通常来说,进入垄断时代以后,巨头应该划分好各自的地盘,并在暗中"操纵"着市场的动向,掌控全局.但没想到是,团购行业的两大巨头美团和大众点评却开始互掐,将对方都告上了法庭.在这看似离奇的事件背后,是双方力量的博弈和无奈的展现. 互讼,意味什么? 美团和大众点评近来就像一对欢喜冤家,双方不

Android实战简易教程-第二十五枪（基于Baas的数据表查询下拉刷新和上拉加载实现！）

上一节我们实现了数据表的加载,但是,当数据表数据很多时,我们就要考虑数据的分页,这里我们选用了PullToRefreshListView控件,先看一下该控件的说明: 效果图:                                 正在刷新                                                                       刷新后        一.导入Library 下载源码后(https://github.com/chrisba

轻量级web富文本框——wangEditor使用手册（4）——配置下拉菜单

1. 引言 上一节(第三节)<轻量级web富文本框——wangEditor使用手册(3)——如何自定义配置菜单>描述了如何自定义配置一个新加入的菜单.在第二节中我们演示了如何添加一个简单的菜单,这一节我们要加入一个稍微复杂一点的菜单——下拉菜单类型——增加一个“设置标题”下拉按钮 下载地址:https://github.com/wangfupeng1988/wangEditor demo演示:http://www.cnblogs.com/wangfupeng1988/p/4185508.htm

robotframework 判断下拉框是否存在，如果存在就执行下拉框操作，不存在就跳过执行下拉框操作，进行下一步操作；

#本人新手,仅做学习记录之用 因为工作要求,打开的ui页面,根据前面筛选的条件不同,跳转的新页面不同,本记录涉及的就是有下拉框和没有下拉框,所以要对新打开的页面进行判断:run keyword and return status关键字返回element should be visible 的状态,如果为Ture,则执行下面run keyword if中的select from list by label:如果为Flase,则不执行: select from list by label中label

vue 下拉框自定义 以及点击空白空白处关闭下拉框

html: <div class="divInput" v-close> <div class="input" @click="opensort"> <input v-model="sortvalue" type="text" placeholder="分类" /> <vicon :type="'triangle'" clas

android仿美团客户端购买框悬浮特效

实现步骤如下: 1,新建一个项目,新建一个MyScrollView继承自ScrollView public class MyScrollView extends ScrollView { private OnScrollListener onScrollListener; public MyScrollView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } publi