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

最新推荐文章于 2024-05-16 03:21:47 发布
最新推荐文章于 2024-05-16 03:21:47 发布
阅读量3.4k 收藏 6
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013272307/article/details/40142679
版权

这几天做的项目要求在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;
@Override
protected 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() {


@Override
public int getCount() {
// TODO Auto-generated method stub
return alldata.size();
}


@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return alldata.get(position);
}


@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}


@Override
public 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() {


@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
/**
* 如果状态为正在滚动，则可以记录动作为滚动
*/
if(scrollState == SCROLL_STATE_TOUCH_SCROLL){
IsTouch = false;
}
}


@Override
public void onScroll(AbsListView view, int firstindex,
int showCount, int totalItemCount) {
/**
* 如果之前的动作是滚动而不是定位，则进行标题位置判断
*/
if(!IsTouch)
showFloat();
}
});




/**
* 第一个分组悬浮条的点击事件
* 思路：点击第一个分组悬浮条，listview定位到第一组标题的位置，此时，上面的悬浮条肯定都不会显示，只有下面的悬浮条可能显示。
* 通过比较屏幕显示项目数和第一分组的长度可以确定第二分组是否在显示屏幕内
* 通过比较屏幕显示项目数和第一分组与第二分组和的长度可以确定第三组是否在显示屏幕内
* 其他同理，情况不同
*/
hone.setOnClickListener(new OnClickListener() {


@Override
public 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() {


@Override
public 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() {


@Override
public 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() {


@Override
public 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() {


@Override
public 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
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
android关于listview之列表分组
09-29
android关于listview之列表分组，像Q上一样显示列表项
Anroid ListView分组和悬浮Header实现
热门推荐
永远即等待的专栏
01-27 5万+
之前在使用iOS时，看到过一种分组的View，每一组都有一个Header，在上下滑动的时候，会有一个悬浮的Header，这种体验觉得很不错，这种效果在Android是没有的，iOS的SDK就自带这种效果。这篇文章就介绍如何在Android实现这种效果。
android Listview固定列头_android scrollview 布局怎么固定标题(1)
最新发布
2401_84871699的博客
05-16 968
(img-zAPrwaX2-1715800887301)](img-MMG9gP2A-1715800887301)]android:text=“待盘点产品” />android:text=“待盘点批号” />android:text=“盘点类型” />android:text=“实际数量” />android:text=“订单状态” />android:text=“待盘点库区”android:text=“行号” />
Android ListView分组显示
weixin_30517001的博客
08-24 195
ListView的实现方法也是普通的实现方法。只不过在list列表中加入groupkey信息。在渲染的时候要判断是否是分组的标题。 就是在使用不同的两个View的时候存在这种情况，convertView不为空但是由于它渲染到别的layout的关系。它里面内容的view是为空的经常会出现空指针的错误。 我这里使用了一个非常低效的方法，下次应该会改进一下。 先贴上自己实现的adapter ...
android中listview仿qq群组向上滚动特效
weixin_30333885的博客
12-20 130
非谢谢java豆子的修改方法，主要是计算分组内成员个数的逻辑有问题，已重新修改计算逻辑，并添加了注释，源码已重新上传 感谢kylin17和哟一嗨同学发现的bug，确实存在此问题，已修正 MySectionIndexer.java中publicintgetPositionForSection(intsection)方法第一个判断有误，应该为大于等于，已修改 手机qq上有这样一个特效：当前...
Android开发之ListView实现不同品种分类分隔栏的效果(非ExpandableListView实现）
MiniMicall的专栏
09-18 3763
我们有时候会遇到这么一个情况。就是我在一个ListView里面需要显示的东西其实是有种类之分的。比如我要分冬天，夏天，秋天，春天，然后在这每个季节下面再去加载各自的条目数据。还有，比如我们的通讯录，我们需要按A，B，C这样的字母顺序分类然后显示。这个怎么实现呢？ 下面我们不用ExpandableListView，而是只用ListView来实现这一显示效果。 MainAc
android listview分组滑动悬浮
10-16
在标题“android listview分组滑动悬浮”中，提到的功能是ListView的一种高级用法，即实现分组列表并且在滑动过程中对隐藏的分组显示悬浮条。这种设计可以提高用户体验，使用户能够快速定位到特定的分组。 首先，...
Android中ListView中数据按照时间\日期分组（分类）标题可悬浮
11-29
本示例项目"Android中ListView中数据按照时间/日期分组（分类）标题可悬浮"就是针对这种情况的一个解决方案，它模仿了虎扑应用的特性，实现了PinnedSectionListView，即在滚动时保持分组标题悬浮显示，同时没有集成...
Android中ListView中数据按照时间\日期分组（分类）标题可悬浮,可下拉刷新
11-29
仿虎扑,带悬浮标题的PinnedSectionRefreshListView,帶下拉刷新的Demo,实现时间按照日期和时分秒进行分类.关于PinnedSectionRefreshListView中注释显示英文问题,可以下载...
mooc_android_lesson13_分组列表悬浮顶部栏效果
06-25
- 创建一个专门的悬浮头部ViewHolder，用于展示分组标题。这个ViewHolder可以有自己的布局文件和绑定方法。 7. **应用效果截图**： - 提交的作业包中包含应用程序运行效果截图，这是检查代码正确性和视觉效果的...
标题顶部悬浮的listview
07-17
综上所述，标题顶部悬浮的ListView（Pinned Header ListView）是Android开发中的一个高级特性，它结合了ListView的灵活性和分组数据的清晰展示，通过适配器、监听器以及可能的自定义组件实现，能够为用户带来优秀的...
ListView分组显示
04-27
实现类似QQ分组显示的效果和手机联系人列表的效果。
android 自定义listview分组显示本地json格式数据
07-01
android 自定义listview分组显示本地json格式数据，主要是listview可以自定义成下拉刷新(此demo不包含上下拉，应用者自己完善)，组头和组所属的数据的item点击事件是分开的
listview 分组显示+可展开分组+每个item可左右滑动
11-28
listview 分组显示+可展开分组+每个item可左右滑动+多级分组。
Android中listView分组显示内容和下拉刷新
07-17
listview的分组显示数据，在项目中非常常用，尤其是在理财项目中，这个demo是我在网上找的
android UI——分组+悬停 listview
boolean的博客
06-12 5711
能够使头部悬停的listview在项目中是经常用到的，例如qq的好友列表或者地区选择。先不多说，看效果图：（懒得上gif图了） 这里借鉴了别人的核心代码，我做了一些分析。 主要是使用PinnedSectionListView来替换listview。 这里的PinnedSectionListView是别人的。我们主要看如何使用这个PinnedSectionListView以及如何适配
Android Listview 实现分组显示
aoaoaoxinharry的博客
02-17 909
Android Listview 实现分组显示 实现效果如下： 主要思路： ①普通数据项与组别项采用同一数据类； ②普通数据项与组别项通过类中某一属性的值加以区分； ③在实现不同显示效果时，通过②中的特殊属性的值，用判断语句分辨普通数据项与组别项，并实现不同的显示效果以及显示位置 GroupListView: public class GroupListViewFragment extends Fragment { /** Called when the activity is first cr
编程回忆之Android回忆（有关Android 列表分组显示的问题）
stop_pig的专栏
03-20 1501
最近做了一个有关android 列表分组显示的问题，我在网上查了很多资料，基本上的思路都是一样的，但是感觉都存在一个问题，就是当数据量过大的时候，会存在内存溢出的问题. @Override public View getView(int position, View convertView, ViewGroup parent) { View view
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值