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

转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/17761431),请尊重他人的辛勤劳动成果,谢谢!

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

首先还是要先对ScrollView进行滚动监听,直接在onScrollChanged()方法中就能获取滚动的Y值,之前那篇文章使用了Handler,走弯路了,直接看代码吧

[java]view plaincopy

packagecom.example.meituandemo;

importandroid.content.Context;

importandroid.util.AttributeSet;

importandroid.widget.ScrollView;

/**

* @blog http://blog.csdn.net/xiaanming

*

* @author xiaanming

*

*/

publicclassMyScrollViewextendsScrollView {

privateOnScrollListener onScrollListener;

publicMyScrollView(Context context) {

this(context,null);

}

publicMyScrollView(Context context, AttributeSet attrs) {

this(context, attrs,0);

}

publicMyScrollView(Context context, AttributeSet attrs,intdefStyle) {

super(context, attrs, defStyle);

}

/**

* 设置滚动接口

* @param onScrollListener

*/

publicvoidsetOnScrollListener(OnScrollListener onScrollListener) {

this.onScrollListener = onScrollListener;

}

@Override

publicintcomputeVerticalScrollRange() {

returnsuper.computeVerticalScrollRange();

}

@Override

protectedvoidonScrollChanged(intl,intt,intoldl,intoldt) {

super.onScrollChanged(l, t, oldl, oldt);

if(onScrollListener !=null){

onScrollListener.onScroll(t);

}

}

/**

*

* 滚动的回调接口

*

* @author xiaanming

*

*/

publicinterfaceOnScrollListener{

/**

* 回调方法, 返回MyScrollView滑动的Y方向距离

* @param scrollY

*              、

*/

publicvoidonScroll(intscrollY);

}

}

接下来看看主界面的布局文件

[html]view plaincopy

android:id="@+id/parent_layout"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:id="@+id/imageView1"

android:layout_width="match_parent"

android:layout_height="45dip"

android:scaleType="centerCrop"

android:src="@drawable/navigation_bar"/>

android:id="@+id/scrollView"

android:layout_width="fill_parent"

android:layout_height="fill_parent">

android:layout_width="match_parent"

android:layout_height="wrap_content">

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:orientation="vertical">

android:id="@+id/iamge"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/pic"

android:scaleType="centerCrop"/>

android:id="@+id/buy"

layout="@layout/buy_layout"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/one"

android:scaleType="centerCrop"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/one"

android:scaleType="centerCrop"/>

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@drawable/one"

android:scaleType="centerCrop"/>

android:id="@+id/top_buy_layout"

layout="@layout/buy_layout"/>

下面是布局的效果图

从主界面的布局你可以看出,我们在上面放置了一个购买的布局,可能你会想,先让上面的布局隐藏起来,等下面的布局滑动上来就将其显示出来,如果这样子就跟我之前写的那篇文章差不多,效果不是很棒,所以这篇修改版的肯定不是这样子的,我们还是先看主界面的代码吧

[java]view plaincopy

packagecom.example.meituandemo;

importandroid.app.Activity;

importandroid.os.Bundle;

importandroid.view.ViewTreeObserver.OnGlobalLayoutListener;

importandroid.widget.LinearLayout;

importcom.example.meituandemo.MyScrollView.OnScrollListener;

/**

* @blog http://blog.csdn.net/xiaanming

*

* @author xiaanming

*

*/

publicclassMainActivityextendsActivityimplementsOnScrollListener{

/**

* 自定义的MyScrollView

*/

privateMyScrollView myScrollView;

/**

* 在MyScrollView里面的购买布局

*/

privateLinearLayout mBuyLayout;

/**

* 位于顶部的购买布局

*/

privateLinearLayout mTopBuyLayout;

@SuppressWarnings("deprecation")

@Override

protectedvoidonCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

myScrollView = (MyScrollView) findViewById(R.id.scrollView);

mBuyLayout = (LinearLayout) findViewById(R.id.buy);

mTopBuyLayout = (LinearLayout) findViewById(R.id.top_buy_layout);

myScrollView.setOnScrollListener(this);

//当布局的状态或者控件的可见性发生改变回调的接口

findViewById(R.id.parent_layout).getViewTreeObserver().addOnGlobalLayoutListener(newOnGlobalLayoutListener() {

@Override

publicvoidonGlobalLayout() {

//这一步很重要,使得上面的购买布局和下面的购买布局重合

onScroll(myScrollView.getScrollY());

}

});

}

@Override

publicvoidonScroll(intscrollY) {

intmBuyLayout2ParentTop = Math.max(scrollY, mBuyLayout.getTop());

mTopBuyLayout.layout(0, mBuyLayout2ParentTop, mTopBuyLayout.getWidth(), mBuyLayout2ParentTop + mTopBuyLayout.getHeight());

}

}

主界面就短短的几行代码,可能看完这些代码你还是没有明白到底是怎么做到的,没关系,我给大家说说,其实我们是让上面的购买布局和下面的购买布局重合起来了,layout()这个方法是确定View的大小和位置的,然后将其绘制出来,里面的四个参数分别是View的四个点的坐标,他的坐标不是相对屏幕的原点,而且相对于他的父布局来说的,

我们在主页面最外层的ViewGroup添加了布局状态改变的监听器,当绘制完了屏幕会回调到方法onGlobalLayout()中,我们在onGlobalLayout()方法中手动调用了下onScroll()方法,刚开始myScrollView.getScrollY()等于0,所以说当scrollY小于mBuyLayout.getTop()的时候,上面的购买布局的上边缘到myScrollView的上边缘的距离等于mBuyLayout.getTop()(即下面布局的上边缘到myScrollView的上边缘)所以刚开始上面的购买布局和下面的购买布局重合了。

当myScrollView向上滚动,而上面购买布局的上边缘始终要和myScrollView的上边缘保持mBuyLayout.getTop()这个距离,所以上面的购买布局也跟着向上滚动,当scrollY大于mBuyLayout.getTop()的时候,表示购买布局上边缘滑动到了导航栏布局,所以此时购买布局的上边缘与myScrollView的上边缘始终要保持scrollY这个距离,所以购买布局才会一直在导航栏下面,就好像粘住了一样,不知道你了解了没有?好了,不过根据这种思路你也可以刚开始使用一个悬浮框来覆盖在下面的购买布局上面,然后onScroll()方法中更新悬浮框的位置,不过悬浮框的x,y不是相对于父布局的,这点要注意下,这样子也能实现效果,不过相对于此,要复杂的多,所以我们遇到类似的功能直接使用这种就行了,简洁明了,好了,你是不迫不及待的想看下效果,那我们接下来就运行下程序吧

运行程序你会发现,无论我们怎么滑动,都不会出现之前那篇文章的那些情况,很流畅吧,这跟美团,大众点评的效果完全一致,好了,修改版的讲解就到这里结束了,有问题的请在下面留言,我会为大家解答的!

项目源码,点击下载

含有多个购买布局的效果,下一个购买布局会将上一个购买布局顶上去,使用方法也很简单,只需要将你需要设置的布局设置Tag为sticky, 如

[html]view plaincopy

android:layout_width="fill_parent"

android:layout_height="100dip"

android:background="#ff00ffff"

android:tag="sticky">

android:id="@+id/button"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:text="Button"/>


http://blog.csdn.net/xiaanming/article/details/17761431

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容