time 
设为首页】【收藏本站
当前位置: 主页 > 电脑网络 > 操作系统 > 嵌入式 > Android > Android监听ScrollView滚动实现仿美团、大众点评的购买悬浮效果完善版

Android监听ScrollView滚动实现仿美团、大众点评的购买悬浮效果完善版

时间:2014-01-26 11:33 点击:6013次 字体:[ ]




 我之前写了一篇关于美团网,大众点评的购买框效果的文章http://www.fengfly.com/plus/view-214540-1.html ,我自己感觉效果并不是很好,如果快速滑动界面,显示悬浮框的时候会出现一卡的现象,有些朋友说有时候会出现两个布局的情况,特别是对ScrollView滚动的Y值得监听,我还使用了Handler来获取,还有朋友给我介绍了Scrolling Tricks这个东西,我下载试了下,确实美团网,大众点评的购买框用的是这种效果,但是Scrolling Tricks只能在API11以上使用,这个有点小悲剧,然后我做了下修改,并将实现思路分享给大家,实现起来很简单
首先还是要先对ScrollView进行滚动监听,直接在onScrollChanged()方法中就能获取滚动的Y值,之前那篇文章使用了Handler,走弯路了,直接看代码吧

  1. package com.example.meituandemo; 
  2.  
  3. import android.content.Context; 
  4. import android.util.AttributeSet; 
  5. import android.widget.ScrollView; 
  6. /** 
  7.  *  
  8.  * @author xiaanming 
  9.  * 
  10.  */ 
  11. public class MyScrollView extends ScrollView { 
  12.     private OnScrollListener onScrollListener; 
  13.      
  14.     public MyScrollView(Context context) { 
  15.         this(context, null); 
  16.     } 
  17.      
  18.     public MyScrollView(Context context, AttributeSet attrs) { 
  19.         this(context, attrs, 0); 
  20.     } 
  21.  
  22.     public MyScrollView(Context context, AttributeSet attrs, int defStyle) { 
  23.         super(context, attrs, defStyle); 
  24.     } 
  25.      
  26.     /** 
  27.      * 设置滚动接口 
  28.      * @param onScrollListener 
  29.      */ 
  30.     public void setOnScrollListener(OnScrollListener onScrollListener) { 
  31.         this.onScrollListener = onScrollListener; 
  32.     } 
  33.      
  34.      
  35.     @Override 
  36.     public int computeVerticalScrollRange() { 
  37.         return super.computeVerticalScrollRange(); 
  38.     } 
  39.      
  40.  
  41.     @Override 
  42.     protected void onScrollChanged(int l, int t, int oldl, int oldt) { 
  43.         super.onScrollChanged(l, t, oldl, oldt); 
  44.         if(onScrollListener != null){ 
  45.             onScrollListener.onScroll(t); 
  46.         } 
  47.     } 
  48.  
  49.  
  50.  
  51.     /** 
  52.      *  
  53.      * 滚动的回调接口 
  54.      *  
  55.      * @author xiaanming 
  56.      * 
  57.      */ 
  58.     public interface OnScrollListener{ 
  59.         /** 
  60.          * 回调方法, 返回MyScrollView滑动的Y方向距离 
  61.          * @param scrollY 
  62.          *              、 
  63.          */ 
  64.         public void onScroll(int scrollY); 
  65.     } 
  66.      
  67.      
  68.  

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

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  2.     android:id="@+id/parent_layout" 
  3.     xmlns:tools="http://schemas.android.com/tools" 
  4.     android:layout_width="match_parent" 
  5.     android:layout_height="match_parent" 
  6.     android:orientation="vertical" > 
  7.  
  8.     <ImageView 
  9.         android:id="@+id/imageView1" 
  10.         android:layout_width="match_parent" 
  11.         android:layout_height="45dip" 
  12.         android:scaleType="centerCrop" 
  13.         android:src="@drawable/navigation_bar" /> 
  14.  
  15.     <com.example.meituandemo.MyScrollView 
  16.         android:id="@+id/scrollView" 
  17.         android:layout_width="fill_parent" 
  18.         android:layout_height="fill_parent" > 
  19.  
  20.         <FrameLayout 
  21.             android:layout_width="match_parent" 
  22.             android:layout_height="wrap_content" > 
  23.  
  24.             <LinearLayout 
  25.                 android:layout_width="match_parent" 
  26.                 android:layout_height="wrap_content" 
  27.                 android:orientation="vertical" > 
  28.  
  29.                 <ImageView 
  30.                     android:id="@+id/iamge" 
  31.                     android:layout_width="match_parent" 
  32.                     android:layout_height="wrap_content" 
  33.                     android:background="@drawable/pic" 
  34.                     android:scaleType="centerCrop" /> 
  35.  
  36.                 <include 
  37.                     android:id="@+id/buy" 
  38.                     layout="@layout/buy_layout" /> 
  39.  
  40.                 <ImageView 
  41.                     android:layout_width="match_parent" 
  42.                     android:layout_height="wrap_content" 
  43.                     android:background="@drawable/one" 
  44.                     android:scaleType="centerCrop" /> 
  45.  
  46.                 <ImageView 
  47.                     android:layout_width="match_parent" 
  48.                     android:layout_height="wrap_content" 
  49.                     android:background="@drawable/one" 
  50.                     android:scaleType="centerCrop" /> 
  51.  
  52.                 <ImageView 
  53.                     android:layout_width="match_parent" 
  54.                     android:layout_height="wrap_content" 
  55.                     android:background="@drawable/one" 
  56.                     android:scaleType="centerCrop" /> 
  57.             </LinearLayout> 
  58.  
  59.             <include 
  60.                 android:id="@+id/top_buy_layout" 
  61.                 layout="@layout/buy_layout" /> 
  62.         </FrameLayout> 
  63.     </com.example.meituandemo.MyScrollView> 
  64.  
  65. </LinearLayout> 



本文地址 : http://www.fengfly.com/plus/view-214543-1.html
标签: Android ScrollView
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: