Android ListView的分组显示，分组标题悬浮，点击查看分组的功能实现

来源：互联网发布：食品药品数据查询编辑：程序博客网时间：2024/05/03 07:31

这几天做的项目要求在listview上分开组别，并且在滑动listview的时候如果某一组别的标题被隐藏（即滑动出屏幕），则要把该组标题悬浮出来，而且要求从上滑出则在上面悬浮显示，从下滑出则在下面悬浮显示。而点击某一悬浮标题则listview定位到改组，并且控制其他组别的悬浮标题。

网上找了一些，没找到符合要求的，所以只能自己动手做了，没想到竟然搞定了。当然我这的分组数是已知的，未知分组数的我还没去想。

我的思路：

1、布局设计。做布局时把listview通过设置比重放到最下面，然后把要悬浮的悬浮条准备好（比如上面最多会有几条，下面最多会有几条），也是通过设置比重，把它们放到listview上层，并且先把它们隐藏；

2、数据准备。准备listview的适配数据时，先把分组数据分开存放，然后按分组次序依次添加到另外一个总的list中，在添加本组的同时，把该组标题项（或者第一项）所在位置记录下来；

3、设置滚动效果。在listview的onScrollChangListener中的onscroll方法中通过判断分组标题的位置和屏幕显示的项的第一个位置和最后一个位置进行比较，若小于第一个则该组标题悬浮显示在上层，若大于最后一个则标题悬浮显示在下层，否则不显示悬浮标题。

4、点击定位。由于每个分组标题的位置我们是知道的，所以定位没有什么问题，只要listview的setSelection(int position)方法就可以实现定位，关键的是listview定位之后各个悬浮条的显示和隐藏情况要进行改变。需要说明的是，android中listview得到屏幕显示的第一个位置和最后一个位置的确定是通过listview.getFirstVisiblePosition()和listview.getLastVisiblePosition()方法来知道的，但是这个方法是有弊端的，它只能记录UI最近一次刷新前的listview的item位置，所以如果只是在悬浮框点击事件中做定位和判断分组标题位置会出现分组定位成功但分组悬浮条未变的情况。我的方法是这样的，在定位时其实listview也在自主滑动，所以它也会隐式调用onScroll方法，通过前一次的listview的显示状况来记录一下屏幕显示的项目数，然后在定位之后通过判断屏幕显示项的数目与分组的长度（已知的），可以判断出每一个分组是否在屏幕上显示，这样就可以确定分组悬浮条的情况了；

下面是主要代码：

布局设计：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <LinearLayout        android:id="@+id/topll"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_weight="1"        android:background="#2000"        android:orientation="vertical" >        <LinearLayout            android:id="@+id/headllone"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical"             android:visibility="gone">            <TextView                android:id="@+id/head1"                android:layout_width="fill_parent"                android:layout_height="50dp"                android:text="头部1" />            <ImageView                android:layout_width="fill_parent"                android:layout_height="2dp"                android:background="@drawable/filament"                android:contentDescription="@null" />        </LinearLayout>        <LinearLayout            android:id="@+id/headlltwo"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical"             android:visibility="gone">            <TextView                android:id="@+id/head2"                android:layout_width="fill_parent"                android:layout_height="50dp"                android:text="头部2" />            <ImageView                android:layout_width="fill_parent"                android:layout_height="2dp"                android:background="@drawable/filament"                android:contentDescription="@null" />        </LinearLayout>        <LinearLayout            android:id="@+id/headllthree"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical"            android:visibility="gone" >            <TextView                android:id="@+id/head3"                android:layout_width="fill_parent"                android:layout_height="50dp"                android:text="头部3" />            <ImageView                android:layout_width="fill_parent"                android:layout_height="2dp"                android:background="@drawable/filament"                android:contentDescription="@null" />        </LinearLayout>    </LinearLayout>    <ListView        android:id="@+id/listView1"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1000"        android:divider="@drawable/filament"        android:dividerHeight="2dp"        android:fadingEdge="none" >    </ListView>        <LinearLayout        android:id="@+id/bottomll"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:layout_weight="1"        android:background="#2000"        android:orientation="vertical" >        <LinearLayout            android:id="@+id/footllone"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical"            android:visibility="gone" >            <TextView                android:id="@+id/foot1"                android:layout_width="fill_parent"                android:layout_height="50dp"                android:text="底部1"                 />            <ImageView                android:layout_width="fill_parent"                android:layout_height="2dp"                android:background="@drawable/filament"                android:contentDescription="@null" />        </LinearLayout>        <LinearLayout            android:id="@+id/footlltwo"            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:orientation="vertical"            android:visibility="gone" >            <TextView                android:id="@+id/foot2"                android:layout_width="fill_parent"                android:layout_height="50dp"                android:text="底部2"                 />            <ImageView                android:layout_width="fill_parent"                android:layout_height="2dp"                android:background="@drawable/filament"                android:contentDescription="@null" />        </LinearLayout>    </LinearLayout></LinearLayout>

控制代码：

package com.example.mylistview;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import android.widget.AbsListView;import android.widget.AbsListView.OnScrollListener;import android.widget.BaseAdapter;import android.widget.LinearLayout;import android.widget.ListView;import android.widget.TextView;public class MainActivity extends Activity {//已知分组为三组，因此可以判定上面的悬浮条最多有三个，下面的悬浮条最多有两个/*** 上面和下面的悬浮条中的内容*/private TextView head1,head2,head3;private TextView foot1,foot2;private ListView listview;/*** 所有悬浮条*/private LinearLayout hone,htwo,hthree,fone,ftwo; /*** 分组数据集*/private String[] con1 = new String[20]; private String[] con2 = new String[20];private String[] con3 = new String[20];/*** 每个分组标题的位置*/private int positon1 = 0;private int positon2 = 0;private int positon3 = 0;/*** 记录前一次改变后listview在屏幕上显示的第一个位置和最后一个位置*/private int firstindex = 0;private int bottomindex = -1;/*** 记录此时屏幕上能显示的项目数*/private int showcount = 0;/*** 适配所有数据的集合*/private List<String> alldata = new ArrayList<String>();private BaseAdapter adapter;/*** 记录是点击还是滚动效果*/private boolean IsTouch = false;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);ReadyData();Init();SetControlEvents();}private void Init() {hone = (LinearLayout) findViewById(R.id.headllone);htwo = (LinearLayout) findViewById(R.id.headlltwo);hthree = (LinearLayout) findViewById(R.id.headllthree);fone = (LinearLayout) findViewById(R.id.footllone);ftwo = (LinearLayout) findViewById(R.id.footlltwo);head1 = (TextView) findViewById(R.id.head1);head2 = (TextView) findViewById(R.id.head2);head3 = (TextView) findViewById(R.id.head3);foot1 = (TextView) findViewById(R.id.foot1);foot2 = (TextView) findViewById(R.id.foot2);listview = (ListView) findViewById(R.id.listView1);adapter = new BaseAdapter() {@Overridepublic int getCount() {// TODO Auto-generated method stubreturn alldata.size();}@Overridepublic Object getItem(int position) {// TODO Auto-generated method stubreturn alldata.get(position);}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {View view = View.inflate(MainActivity.this, R.layout.listitem,null);TextView tv = (TextView) view.findViewById(R.id.listtv);tv.setText(alldata.get(position));return view;}};listview.setAdapter(adapter);showFloat();}/*** 准备数据*/private void ReadyData() {for(int i = 0;i<20;i++){if(i == 0){con1[i] = "分组一";con2[i] = "分组二";con3[i] = "分组三";}else{con1[i] = "aaaaaaaaaaaaa";con2[i] = "bbbbbbbbbbbbb";con3[i] = "ccccccccccccc";}}/*** 把每个分组数据都加入到总的数据集中，并记录每个分组标题的位置*/int index = 0;positon1 = index;for(int i = 0;i<con1.length;i++,index++){alldata.add(con1[i]);}positon2 = index;for(int i = 0;i<con2.length;i++,index++){alldata.add(con2[i]);}positon3 = index;for(int i = 0;i<con2.length;i++,index++){alldata.add(con3[i]);}}/*** 设置控制事件*/private void SetControlEvents(){/***设置滚动监听事件*/listview.setOnScrollListener(new OnScrollListener() {@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {/*** 如果状态为正在滚动，则可以记录动作为滚动*/if(scrollState == SCROLL_STATE_TOUCH_SCROLL){IsTouch = false;}}@Overridepublic void onScroll(AbsListView view, int firstindex,int showCount, int totalItemCount) {/*** 如果之前的动作是滚动而不是定位，则进行标题位置判断*/if(!IsTouch)showFloat();}});/*** 第一个分组悬浮条的点击事件* 思路：点击第一个分组悬浮条，listview定位到第一组标题的位置，此时，上面的悬浮条肯定都不会显示，只有下面的悬浮条可能显示。* 通过比较屏幕显示项目数和第一分组的长度可以确定第二分组是否在显示屏幕内* 通过比较屏幕显示项目数和第一分组与第二分组和的长度可以确定第三组是否在显示屏幕内* 其他同理，情况不同*/hone.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {listview.setSelection(positon1);IsTouch = true;hone.setVisibility(View.GONE);htwo.setVisibility(View.GONE);hthree.setVisibility(View.GONE);if(showcount != 0){if((showcount-1) < con1.length ){ftwo.setVisibility(View.VISIBLE);foot2.setText(alldata.get(positon3));fone.setVisibility(View.VISIBLE);foot1.setText(alldata.get(positon2));}else{fone.setVisibility(View.GONE);if((showcount-1) < (con1.length + con2.length)){ftwo.setVisibility(View.VISIBLE);foot2.setText(alldata.get(positon3));}else{ftwo.setVisibility(View.GONE);}}}}});htwo.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {listview.setSelection(positon2);IsTouch = true;hone.setVisibility(View.VISIBLE);head1.setText(alldata.get(positon1));htwo.setVisibility(View.GONE);hthree.setVisibility(View.GONE);fone.setVisibility(View.GONE);if(showcount != 0){if((showcount-1) < con2.length ){ftwo.setVisibility(View.VISIBLE);foot2.setText(alldata.get(positon3));}else{ftwo.setVisibility(View.GONE);}}}});hthree.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {listview.setSelection(positon3);IsTouch = true;hone.setVisibility(View.VISIBLE);head1.setText(alldata.get(positon1));htwo.setVisibility(View.VISIBLE);head2.setText(alldata.get(positon2));hthree.setVisibility(View.GONE);fone.setVisibility(View.GONE);ftwo.setVisibility(View.GONE);}});fone.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {listview.setSelection(positon2);//showFloat();hone.setVisibility(View.VISIBLE);head1.setText(alldata.get(positon1));htwo.setVisibility(View.GONE);hthree.setVisibility(View.GONE);fone.setVisibility(View.GONE);if(showcount != 0){if((showcount-1) < con2.length ){ftwo.setVisibility(View.VISIBLE);foot2.setText(alldata.get(positon3));}else{ftwo.setVisibility(View.GONE);}}IsTouch = true;}});ftwo.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {listview.setSelection(positon3);IsTouch = true;hone.setVisibility(View.VISIBLE);head1.setText(alldata.get(positon1));htwo.setVisibility(View.VISIBLE);head2.setText(alldata.get(positon2));hthree.setVisibility(View.GONE);fone.setVisibility(View.GONE);ftwo.setVisibility(View.GONE);}});}/*** 功能：* 1、比较分组标题位置和listview显示项的最小最大位置，确定和该组对应的悬浮条是否显示* 2、记录每次改变之后的listview显示项的最小位置和最大位置* 3、记录每次改变之后的listview屏幕能显示项的数目*/private void showFloat(){if(firstindex>positon1){hone.setVisibility(View.VISIBLE);head1.setText(alldata.get(positon1));}else{hone.setVisibility(View.GONE);}if(firstindex > positon2){htwo.setVisibility(View.VISIBLE);head2.setText(alldata.get(positon2));}else{htwo.setVisibility(View.GONE);}if(firstindex > positon3){hthree.setVisibility(View.VISIBLE);head3.setText(alldata.get(positon3));}else{hthree.setVisibility(View.GONE);}if(bottomindex < positon2){fone.setVisibility(View.VISIBLE);foot1.setText(alldata.get(positon2));}else{fone.setVisibility(View.GONE);}if(bottomindex < positon3){ftwo.setVisibility(View.VISIBLE);foot2.setText(alldata.get(positon3));}else{ftwo.setVisibility(View.GONE);}firstindex = listview.getFirstVisiblePosition();bottomindex = listview.getLastVisiblePosition();showcount = bottomindex - firstindex;}}

0 0