转帖请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming),请尊重他人的辛勤劳动成果,谢谢!
随着移动互联网的快速发展,它已经和我们的生活息息相关了,在公交地铁里面都能看到很多人的人低头看着自己的手机屏幕,从此“低头族”一词就产生了,作为一名移动行业的开发人员,我自己也是一名“低头族”,上下班时间在公交地铁上看看新闻来打发下时间,有时候也会看看那些受欢迎的App的一些界面效果,为什么人家的app那么受欢迎?跟用户体验跟UI设计也有直接的关系,最近在美团和大众点评的App看到如下效果,我感觉用户好,很人性化,所以自己也尝试着实现了下,接下来就讲解下实现思路!
如上图(2)我们看到了,当立即抢购布局向上滑动到导航栏布局的时候,立即抢购布局就贴在导航栏布局下面,下面的其他的布局还是可以滑动,当我们向下滑动的时候,立即抢购的布局又随着往下滑动了,看似有点复杂,但是一说思路可能你就顿时恍然大悟了。
当我们向上滑动过程中,我们判断立即抢购的布局是否滑到导航栏布局下面,如果立即抢购的上面顶到了导航栏,我们新建一个立即抢购的悬浮框来显示在导航栏下面,这样子就实现了立即抢购贴在导航栏下面的效果啦,而当我们向下滑动的时候,当立即抢购布局的下面刚好到了刚刚新建的立即抢购悬浮框的下面的时候,我们就移除立即抢购悬浮框,可能说的有点拗口,既然知道了思路,接下来我们就来实现效果。
新建一个Android项目,取名MeiTuanDemo,先看立即抢购(buy_layout.xml)的布局,这里为了方便我直接从美团上面截去了图片
<div>
<embed id="ZeroClipboardMovie_1" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_1">
</embed>
</div>
</div>
- <span class="tag"><?</span><span class="tag-name">xml</span> <span class="attribute">version</span>=<span class="attribute-value">“1.0”</span> <span class="attribute">encoding</span>=<span class="attribute-value">“UTF-8”</span><span class="tag">?></span>
- <span class="tag"><</span><span class="tag-name">LinearLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">“http://schemas.android.com/apk/res/android”</span>
- <span class="attribute">android:orientation</span>=<span class="attribute-value">“horizontal”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“fill_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“wrap_content”</span> <span class="tag">></span>
-
- <span class="tag"><</span><span class="tag-name">ImageView</span>
- <span class="attribute">android:id</span>=<span class="attribute-value">“@+id/buy_layout”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“fill_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“wrap_content”</span>
- <span class="attribute">android:background</span>=<span class="attribute-value">“@drawable/buy”</span> <span class="tag">/></span>
-
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>
立即抢购的布局实现了,接下来实现主界面的布局,上面是导航栏布局,为了方便还是直接从美团截取的图片,然后下面的ViewPager布局,立即抢购布局,其他布局 放在ScrollView里面,界面还是很简单的
<div>
<embed id="ZeroClipboardMovie_2" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_2">
</embed>
</div>
</div>
- <span class="tag"><</span><span class="tag-name">LinearLayout</span> <span class="attribute">xmlns:android</span>=<span class="attribute-value">“http://schemas.android.com/apk/res/android”</span>
- <span class="attribute">xmlns:tools</span>=<span class="attribute-value">“http://schemas.android.com/tools”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:orientation</span>=<span class="attribute-value">“vertical”</span> <span class="tag">></span>
-
- <span class="tag"><</span><span class="tag-name">ImageView</span>
- <span class="attribute">android:id</span>=<span class="attribute-value">“@+id/imageView1”</span>
- <span class="attribute">android:scaleType</span>=<span class="attribute-value">“centerCrop”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“45dip”</span>
- <span class="attribute">android:src</span>=<span class="attribute-value">“@drawable/navigation_bar”</span> <span class="tag">/></span>
-
-
- <span class="tag"><</span><span class="tag-name">com.example.meituandemo.MyScrollView</span>
- <span class="attribute">android:id</span>=<span class="attribute-value">“@+id/scrollView”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“fill_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“fill_parent”</span> <span class="tag">></span>
-
- <span class="tag"><</span><span class="tag-name">LinearLayout</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“wrap_content”</span>
- <span class="attribute">android:orientation</span>=<span class="attribute-value">“vertical”</span> <span class="tag">></span>
-
- <span class="tag"><</span><span class="tag-name">ImageView</span>
- <span class="attribute">android:id</span>=<span class="attribute-value">“@+id/iamge”</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“wrap_content”</span>
- <span class="attribute">android:background</span>=<span class="attribute-value">“@drawable/pic”</span>
- <span class="attribute">android:scaleType</span>=<span class="attribute-value">“centerCrop”</span> <span class="tag">/></span>
-
- <span class="tag"><</span><span class="tag-name">include</span>
- <span class="attribute">android:id</span>=<span class="attribute-value">“@+id/buy”</span>
- <span class="attribute">layout</span>=<span class="attribute-value">“@layout/buy_layout”</span> <span class="tag">/></span>
-
- <span class="tag"><</span><span class="tag-name">ImageView</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“wrap_content”</span>
- <span class="attribute">android:background</span>=<span class="attribute-value">“@drawable/one”</span>
- <span class="attribute">android:scaleType</span>=<span class="attribute-value">“centerCrop”</span> <span class="tag">/></span>
-
- <span class="tag"><</span><span class="tag-name">ImageView</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“wrap_content”</span>
- <span class="attribute">android:background</span>=<span class="attribute-value">“@drawable/one”</span>
- <span class="attribute">android:scaleType</span>=<span class="attribute-value">“centerCrop”</span> <span class="tag">/></span>
-
- <span class="tag"><</span><span class="tag-name">ImageView</span>
- <span class="attribute">android:layout_width</span>=<span class="attribute-value">“match_parent”</span>
- <span class="attribute">android:layout_height</span>=<span class="attribute-value">“wrap_content”</span>
- <span class="attribute">android:background</span>=<span class="attribute-value">“@drawable/one”</span>
- <span class="attribute">android:scaleType</span>=<span class="attribute-value">“centerCrop”</span> <span class="tag">/></span>
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>
- <span class="tag"></</span><span class="tag-name">com.example.meituandemo.MyScrollView</span><span class="tag">></span>
-
- <span class="tag"></</span><span class="tag-name">LinearLayout</span><span class="tag">></span>
你会发现上面的主界面布局中并不是ScrollView,而是自定义的一个MyScrollView,接下来就看看MyScrollView类中的代码
<div>
<embed id="ZeroClipboardMovie_3" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_3">
</embed>
</div>
</div>
- <span class="keyword">package</span> com.example.meituandemo;
-
- <span class="keyword">import</span> android.content.Context;
- <span class="keyword">import</span> android.os.Handler;
- <span class="keyword">import</span> android.util.AttributeSet;
- <span class="keyword">import</span> android.view.MotionEvent;
- <span class="keyword">import</span> android.widget.ScrollView;
- <span class="comment">/**</span>
- <span class="comment"> * 博客地址:http://blog.csdn.net/xiaanming</span>
- <span class="comment"> * </span>
- <span class="comment"> * @author xiaanming</span>
- <span class="comment"> *</span>
- <span class="comment"> */</span>
- <span class="keyword">public</span> <span class="keyword">class</span> MyScrollView <span class="keyword">extends</span> ScrollView {
- <span class="keyword">private</span> OnScrollListener onScrollListener;
- <span class="comment">/**</span>
- <span class="comment"> * 主要是用在用户手指离开MyScrollView,MyScrollView还在继续滑动,我们用来保存Y的距离,然后做比较</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">int</span> lastScrollY;
-
- <span class="keyword">public</span> MyScrollView(Context context) {
- <span class="keyword">this</span>(context, <span class="keyword">null</span>);
- }
-
- <span class="keyword">public</span> MyScrollView(Context context, AttributeSet attrs) {
- <span class="keyword">this</span>(context, attrs, <span class="number"></span>);
- }
-
- <span class="keyword">public</span> MyScrollView(Context context, AttributeSet attrs, <span class="keyword">int</span> defStyle) {
- <span class="keyword">super</span>(context, attrs, defStyle);
- }
-
- <span class="comment">/**</span>
- <span class="comment"> * 设置滚动接口</span>
- <span class="comment"> * @param onScrollListener</span>
- <span class="comment"> */</span>
- <span class="keyword">public</span> <span class="keyword">void</span> setOnScrollListener(OnScrollListener onScrollListener) {
- <span class="keyword">this</span>.onScrollListener = onScrollListener;
- }
-
-
- <span class="comment">/**</span>
- <span class="comment"> * 用于用户手指离开MyScrollView的时候获取MyScrollView滚动的Y距离,然后回调给onScroll方法中</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> Handler handler = <span class="keyword">new</span> Handler() {
-
- <span class="keyword">public</span> <span class="keyword">void</span> handleMessage(android.os.Message msg) {
- <span class="keyword">int</span> scrollY = MyScrollView.<span class="keyword">this</span>.getScrollY();
-
- <span class="comment">//此时的距离和记录下的距离不相等,在隔5毫秒给handler发送消息</span>
- <span class="keyword">if</span>(lastScrollY != scrollY){
- lastScrollY = scrollY;
- handler.sendMessageDelayed(handler.obtainMessage(), <span class="number">5</span>);
- }
- <span class="keyword">if</span>(onScrollListener != <span class="keyword">null</span>){
- onScrollListener.onScroll(scrollY);
- }
-
- };
-
- };
-
- <span class="comment">/**</span>
- <span class="comment"> * 重写onTouchEvent, 当用户的手在MyScrollView上面的时候,</span>
- <span class="comment"> * 直接将MyScrollView滑动的Y方向距离回调给onScroll方法中,当用户抬起手的时候,</span>
- <span class="comment"> * MyScrollView可能还在滑动,所以当用户抬起手我们隔5毫秒给handler发送消息,在handler处理</span>
- <span class="comment"> * MyScrollView滑动的距离</span>
- <span class="comment"> */</span>
- <span class="annotation">@Override</span>
- <span class="keyword">public</span> <span class="keyword">boolean</span> onTouchEvent(MotionEvent ev) {
- <span class="keyword">if</span>(onScrollListener != <span class="keyword">null</span>){
- onScrollListener.onScroll(lastScrollY = <span class="keyword">this</span>.getScrollY());
- }
- <span class="keyword">switch</span>(ev.getAction()){
- <span class="keyword">case</span> MotionEvent.ACTION_UP:
- handler.sendMessageDelayed(handler.obtainMessage(), <span class="number">5</span>);
- <span class="keyword">break</span>;
- }
- <span class="keyword">return</span> <span class="keyword">super</span>.onTouchEvent(ev);
- }
-
-
- <span class="comment">/**</span>
- <span class="comment"> * </span>
- <span class="comment"> * 滚动的回调接口</span>
- <span class="comment"> * </span>
- <span class="comment"> * @author xiaanming</span>
- <span class="comment"> *</span>
- <span class="comment"> */</span>
- <span class="keyword">public</span> <span class="keyword">interface</span> OnScrollListener{
- <span class="comment">/**</span>
- <span class="comment"> * 回调方法, 返回MyScrollView滑动的Y方向距离</span>
- <span class="comment"> * @param scrollY</span>
- <span class="comment"> * 、</span>
- <span class="comment"> */</span>
- <span class="keyword">public</span> <span class="keyword">void</span> onScroll(<span class="keyword">int</span> scrollY);
- }
-
-
-
- }
一看代码你也许明白了,就是对ScrollView的滚动Y值进行监听,我们知道ScrollView并没有实现滚动监听,所以我们必须自行实现对ScrollView的监听,我们很自然的想到在onTouchEvent()方法中实现对滚动Y轴进行监听,可是你会发现,我们在滑动ScrollView的时候,当我们手指离开ScrollView。它可能还会继续滑动一段距离,所以我们选择在用户手指离开的时候每隔5毫秒来判断ScrollView是否停止滑动,并将ScrollView的滚动Y值回调给OnScrollListener接口的onScroll(int scrollY)方法中,我们只需要对ScrollView调用我们只需要对ScrollView调用setOnScrollListener方法就能监听到滚动的Y值。
实现了对ScrollView滚动的Y值进行监听,接下来就简单了,我们只需要显示立即抢购悬浮框和移除悬浮框了,接下来看看主界面Activity的代码编写
<div>
<embed id="ZeroClipboardMovie_4" src="http://static.blog.csdn.net/scripts/ZeroClipboard/ZeroClipboard.swf" type="application/x-shockwave-flash" width="18" height="18" align="middle" name="ZeroClipboardMovie_4">
</embed>
</div>
</div>
- <span class="keyword">package</span> com.example.meituandemo;
-
- <span class="keyword">import</span> android.app.Activity;
- <span class="keyword">import</span> android.content.Context;
- <span class="keyword">import</span> android.graphics.PixelFormat;
- <span class="keyword">import</span> android.os.Bundle;
- <span class="keyword">import</span> android.view.Gravity;
- <span class="keyword">import</span> android.view.LayoutInflater;
- <span class="keyword">import</span> android.view.View;
- <span class="keyword">import</span> android.view.WindowManager;
- <span class="keyword">import</span> android.view.WindowManager.LayoutParams;
- <span class="keyword">import</span> android.widget.LinearLayout;
- <span class="keyword">import</span> com.example.meituandemo.MyScrollView.OnScrollListener;
- <span class="comment">/**</span>
- <span class="comment"> * 博客地址:http://blog.csdn.net/xiaanming</span>
- <span class="comment"> * </span>
- <span class="comment"> * @author xiaanming</span>
- <span class="comment"> *</span>
- <span class="comment"> */</span>
- <span class="keyword">public</span> <span class="keyword">class</span> MainActivity <span class="keyword">extends</span> Activity <span class="keyword">implements</span> OnScrollListener{
- <span class="keyword">private</span> MyScrollView myScrollView;
- <span class="keyword">private</span> LinearLayout mBuyLayout;
- <span class="keyword">private</span> WindowManager mWindowManager;
- <span class="comment">/**</span>
- <span class="comment"> * 手机屏幕宽度</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">int</span> screenWidth;
- <span class="comment">/**</span>
- <span class="comment"> * 悬浮框View</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">static</span> View suspendView;
- <span class="comment">/**</span>
- <span class="comment"> * 悬浮框的参数</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">static</span> WindowManager.LayoutParams suspendLayoutParams;
- <span class="comment">/**</span>
- <span class="comment"> * 购买布局的高度</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">int</span> buyLayoutHeight;
- <span class="comment">/**</span>
- <span class="comment"> * myScrollView与其父类布局的顶部距离</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">int</span> myScrollViewTop;
-
- <span class="comment">/**</span>
- <span class="comment"> * 购买布局与其父类布局的顶部距离</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">int</span> buyLayoutTop;
-
-
- <span class="annotation">@Override</span>
- <span class="keyword">protected</span> <span class="keyword">void</span> onCreate(Bundle savedInstanceState) {
- <span class="keyword">super</span>.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
-
- myScrollView = (MyScrollView) findViewById(R.id.scrollView);
- mBuyLayout = (LinearLayout) findViewById(R.id.buy);
-
- myScrollView.setOnScrollListener(<span class="keyword">this</span>);
- mWindowManager = (WindowManager) getSystemService(Context.WINDOW_SERVICE);
- screenWidth = mWindowManager.getDefaultDisplay().getWidth();
- }
-
- <span class="comment">/**</span>
- <span class="comment"> * 窗口有焦点的时候,即所有的布局绘制完毕的时候,我们来获取购买布局的高度和myScrollView距离父类布局的顶部位置</span>
- <span class="comment"> */</span>
- <span class="annotation">@Override</span>
- <span class="keyword">public</span> <span class="keyword">void</span> onWindowFocusChanged(<span class="keyword">boolean</span> hasFocus) {
- <span class="keyword">super</span>.onWindowFocusChanged(hasFocus);
- <span class="keyword">if</span>(hasFocus){
- buyLayoutHeight = mBuyLayout.getHeight();
- buyLayoutTop = mBuyLayout.getTop();
-
- myScrollViewTop = myScrollView.getTop();
- }
- }
-
-
-
- <span class="comment">/**</span>
- <span class="comment"> * 滚动的回调方法,当滚动的Y距离大于或者等于 购买布局距离父类布局顶部的位置,就显示购买的悬浮框</span>
- <span class="comment"> * 当滚动的Y的距离小于 购买布局距离父类布局顶部的位置加上购买布局的高度就移除购买的悬浮框</span>
- <span class="comment"> * </span>
- <span class="comment"> */</span>
- <span class="annotation">@Override</span>
- <span class="keyword">public</span> <span class="keyword">void</span> onScroll(<span class="keyword">int</span> scrollY) {
- <span class="keyword">if</span>(scrollY >= buyLayoutTop){
- <span class="keyword">if</span>(suspendView == <span class="keyword">null</span>){
- showSuspend();
- }
- }<span class="keyword">else</span> <span class="keyword">if</span>(scrollY <= buyLayoutTop + buyLayoutHeight){
- <span class="keyword">if</span>(suspendView != <span class="keyword">null</span>){
- removeSuspend();
- }
- }
- }
-
-
- <span class="comment">/**</span>
- <span class="comment"> * 显示购买的悬浮框</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">void</span> showSuspend(){
- <span class="keyword">if</span>(suspendView == <span class="keyword">null</span>){
- suspendView = LayoutInflater.from(<span class="keyword">this</span>).inflate(R.layout.buy_layout, <span class="keyword">null</span>);
- <span class="keyword">if</span>(suspendLayoutParams == <span class="keyword">null</span>){
- suspendLayoutParams = <span class="keyword">new</span> LayoutParams();
- suspendLayoutParams.type = LayoutParams.TYPE_PHONE; <span class="comment">//悬浮窗的类型,一般设为2002,表示在所有应用程序之上,但在状态栏之下 </span>
- suspendLayoutParams.format = PixelFormat.RGBA_8888;
- suspendLayoutParams.flags = LayoutParams.FLAG_NOT_TOUCH_MODAL
- | LayoutParams.FLAG_NOT_FOCUSABLE; <span class="comment">//悬浮窗的行为,比如说不可聚焦,非模态对话框等等 </span>
- suspendLayoutParams.gravity = Gravity.TOP; <span class="comment">//悬浮窗的对齐方式</span>
- suspendLayoutParams.width = screenWidth;
- suspendLayoutParams.height = buyLayoutHeight;
- suspendLayoutParams.x = <span class="number"></span>; <span class="comment">//悬浮窗X的位置</span>
- suspendLayoutParams.y = myScrollViewTop; <span class="comment">////悬浮窗Y的位置</span>
- }
- }
-
- mWindowManager.addView(suspendView, suspendLayoutParams);
- }
-
-
- <span class="comment">/**</span>
- <span class="comment"> * 移除购买的悬浮框</span>
- <span class="comment"> */</span>
- <span class="keyword">private</span> <span class="keyword">void</span> removeSuspend(){
- <span class="keyword">if</span>(suspendView != <span class="keyword">null</span>){
- mWindowManager.removeView(suspendView);
- suspendView = <span class="keyword">null</span>;
- }
- }
-
- }
上面的代码比较简单,根据ScrollView滑动的距离来判断显示和移除悬浮框,悬浮框的实现主要是通过WindowManager这个类来实现的,调用这个类的addView方法用于添加一个悬浮框,removeView用于移除悬浮框。
通过上述代码就实现了美团,大众点评的这种效果,在运行项目之前我们必须在AndroidManifest.xml中加入
我们运行下项目看下效果吧
好了,今天的讲解到此结束,有疑问的朋友请在下面留言
PS:大家有兴趣的话可以看看Android 仿美团网,大众点评购买框悬浮效果之修改版
💬 评论