Android 简单实现ListView顶部悬浮效果

时间:2021-05-27 10:06:20

起初在网上搜了下实现这样的效果,美团网,大众点评的“购买框”悬浮效果也是这样的,不过作者实现比较麻烦,自己想了想就根据ListView提供的一些特性进行了简单实现。

整个主要布局就是一个ListView,如果listview的上面有内容且高度比较高,可以把它当做listview的header,这样也可以避免ScrollView嵌套ListView带来的麻烦(记住这一点就不会在平时出现ScrollView与ListView各种问题了)。要实现悬浮效果,主要是根据ListView可见的第一个条目是哪个条目来操作的。注意这里的“悬浮”其实只是通过 隐藏/显示 悬浮部分来实现:在ListView“背后”有一个隐藏的“悬浮部分”,当ListView条目中的悬浮部分成为ListView可见部分第一个时,这时非ListView条目中的悬浮部分显示出来,这样造成“悬浮”部分一直在顶部浮动,当ListView可见部分第一个条目并不是悬浮时,非ListView那部分“隐藏部分”继续隐藏。表达能力不强,自己都快被自己绕晕了,总之就是2个悬浮部分:ListView条目中的和处于布局顶部隐藏(Gone/invisible)的起初未显示的,通过这两部分的操作来完成整个功能的。希望读者能够理解……

主要代码:

[java] view plain copy Android 简单实现ListView顶部悬浮效果Android 简单实现ListView顶部悬浮效果
  1. @Override  
  2.     protected void onCreate(Bundle savedInstanceState) {  
  3.         super.onCreate(savedInstanceState);  
  4.         setContentView(R.layout.activity_sticky);  
  5.         invis = (LinearLayout) findViewById(R.id.invis);  
  6.   
  7.         strs = new String[100];  
  8.   
  9.         for (int i = 0; i < 20; i++) {  
  10.             strs[i] = "data-----" + i;  
  11.         }  
  12.   
  13.         lv = (ListView) findViewById(R.id.lv);  
  14.         View header = View.inflate(this, R.layout.stick_header, null);//头部内容  
  15.         lv.addHeaderView(header);//添加头部  
  16.         lv.addHeaderView(View.inflate(this, R.layout.stick_action, null));//ListView条目中的悬浮部分 添加到头部  
  17.   
  18.         lv.setAdapter(new ArrayAdapter<String>(this,  
  19.                 android.R.layout.simple_list_item_1, strs));  
  20.         lv.setOnScrollListener(new OnScrollListener() {  
  21.   
  22.             @Override  
  23.             public void onScrollStateChanged(AbsListView view, int scrollState) {  
  24.   
  25.             }  
  26.   
  27.             @Override  
  28.             public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {  
  29.                 if (firstVisibleItem >= 1) {  
  30.                     invis.setVisibility(View.VISIBLE);  
  31.                 } else {  
  32.   
  33.                     invis.setVisibility(View.GONE);  
  34.                 }  
  35.             }  
  36.         });  
  37.     }  


布局: [html] view plain copy Android 简单实现ListView顶部悬浮效果Android 简单实现ListView顶部悬浮效果
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent" >  
  5.   
  6.     <TextView  
  7.         android:id="@+id/title"  
  8.         android:layout_width="match_parent"  
  9.         android:layout_height="30dp"  
  10.         android:background="#332b3b"  
  11.         android:gravity="center"  
  12.         android:text="标题"  
  13.         android:textColor="#ffffff" />  
  14.   
  15.     <FrameLayout  
  16.         android:layout_width="match_parent"  
  17.         android:layout_height="wrap_content"  
  18.         android:layout_below="@id/title" >  
  19.   
  20.         <ListView  
  21.             android:id="@+id/lv"  
  22.             android:layout_width="match_parent"  
  23.             android:layout_height="match_parent" />  
  24.   
  25.         <LinearLayout  
  26.             android:id="@+id/invis"  
  27.             android:layout_width="fill_parent"  
  28.             android:layout_height="50dp"  
  29.             android:background="#ccedc7"  
  30.             android:orientation="horizontal"  
  31.             android:visibility="gone" >  
  32.   
  33.             <TextView  
  34.                 android:id="@+id/tv"  
  35.                 android:layout_width="match_parent"  
  36.                 android:layout_height="50dp"  
  37.                 android:gravity="center"  
  38.                 android:text="悬浮部分" />  
  39.         </LinearLayout>  
  40.     </FrameLayout>  
  41.   
  42. </RelativeLayout> 


原文地址:http://blog.csdn.net/ljfbest/article/details/38765641