微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Anroid ListView分组和悬浮Header实现方法

分类：Android作者：编程之家

之前在使用iOS时，看到过一种分组的View，每一组都有一个Header，在上下滑动的时候，会有一个悬浮的Header，这种体验觉得很不错，请看下图：


上图中标红的1，2，3，4四张图中，当向上滑动时，仔细观察灰色条的Header变化，当第二组向上滑动时，会把第一组的悬浮Header挤上去。

这种效果在Android是没有的，iOS的SDK就自带这种效果。这篇文章就介绍如何在Android实现这种效果。

1、悬浮Header的实现

其实Android自带的联系人的App中就有这样的效果，我也是把他的类直接拿过来的，实现了PinnedHeaderListView这么一个类，扩展于ListView，核心原理就是在ListView的最顶部绘制一个调用者设置的Header View，在滑动的时候，根据一些状态来决定是否向上或向下移动Header View（其实就是调用其layout方法，理论上在绘制那里作一些平移也是可以的）。下面说一下具体的实现：

1.1、PinnedHeaderAdapter接口

这个接口需要ListView的Adapter来实现，它定义了两个方法，一个是让Adapter告诉ListView当前指定的position的数据的状态，比如指定position的数据可能是组的header；另一个方法就是设置Header View，比如设置Header View的文本，图片等，这个方法是由调用者去实现的。

/** 
 * Adapter interface. The list adapter must implement this interface. 
 */ 
public interface PinnedHeaderAdapter { 
 
  /** 
   * Pinned header state: don't show the header. 
   */ 
  public static final int PINNED_HEADER_GONE = 0; 
 
  /** 
   * Pinned header state: show the header at the top of the list. 
   */ 
  public static final int PINNED_HEADER_VISIBLE = 1; 
 
  /** 
   * Pinned header state: show the header. If the header extends beyond 
   * the bottom of the first shown element,push it up and clip. 
   */ 
  public static final int PINNED_HEADER_PUSHED_UP = 2; 
 
  /** 
   * Computes the desired state of the pinned header for the given 
   * position of the first visible list item. Allowed return values are 
   * {@link #PINNED_HEADER_GONE},{@link #PINNED_HEADER_VISIBLE} or 
   * {@link #PINNED_HEADER_PUSHED_UP}. 
   */ 
  int getPinnedHeaderState(int position); 
 
  /** 
   * Configures the pinned header view to match the first visible list item. 
   * 
   * @param header pinned header view. 
   * @param position position of the first visible list item. 
   * @param alpha fading of the header view,between 0 and 255. 
   */ 
  void configurePinnedHeader(View header,int position,int alpha); 
}

1.2、如何绘制Header View

这是在dispatchDraw方法中绘制的：

@Override 
protected void dispatchDraw(Canvas canvas) { 
  super.dispatchDraw(canvas); 
  if (mHeaderViewVisible) { 
    drawChild(canvas,mHeaderView,getDrawingTime()); 
  } 
}

1.3、配置Header View

核心就是根据不同的状态值来控制Header View的状态，比如PINNED_HEADER_GONE（隐藏）的情况，可能需要设置一个flag标记，不绘制Header View，那么就达到隐藏的效果。当PINNED_HEADER_PUSHED_UP状态时，可能需要根据不同的位移来计算Header View的移动位移。下面是具体的实现：

public void configureHeaderView(int position) { 
  if (mHeaderView == null || null == mAdapter) { 
    return; 
  } 
   
  int state = mAdapter.getPinnedHeaderState(position); 
  switch (state) { 
    case PinnedHeaderAdapter.PINNED_HEADER_GONE: { 
      mHeaderViewVisible = false; 
      break; 
    } 
 
    case PinnedHeaderAdapter.PINNED_HEADER_VISIBLE: { 
      mAdapter.configurePinnedHeader(mHeaderView,position,MAX_ALPHA); 
      if (mHeaderView.getTop() != 0) { 
        mHeaderView.layout(0,mHeaderViewWidth,mHeaderViewHeight); 
      } 
      mHeaderViewVisible = true; 
      break; 
    } 
 
    case PinnedHeaderAdapter.PINNED_HEADER_PUSHED_UP: { 
      View firstView = getChildAt(0); 
      int bottom = firstView.getBottom(); 
       int itemHeight = firstView.getHeight(); 
      int headerHeight = mHeaderView.getHeight(); 
      int y; 
      int alpha; 
      if (bottom < headerHeight) { 
        y = (bottom - headerHeight); 
        alpha = MAX_ALPHA * (headerHeight + y) / headerHeight; 
      } else { 
        y = 0; 
        alpha = MAX_ALPHA; 
      } 
      mAdapter.configurePinnedHeader(mHeaderView,alpha); 
      if (mHeaderView.getTop() != y) { 
        mHeaderView.layout(0,y,mHeaderViewHeight + y); 
      } 
      mHeaderViewVisible = true; 
      break; 
    } 
  } 
}

1.4、onLayout和onMeasure

在这两个方法中，控制Header View的位置及大小

@Override 
protected void onMeasure(int widthMeasureSpec,int heightMeasureSpec) { 
  super.onMeasure(widthMeasureSpec,heightMeasureSpec); 
  if (mHeaderView != null) { 
    measureChild(mHeaderView,widthMeasureSpec,heightMeasureSpec); 
    mHeaderViewWidth = mHeaderView.getMeasuredWidth(); 
    mHeaderViewHeight = mHeaderView.getMeasuredHeight(); 
  } 
} 
 
@Override 
protected void onLayout(boolean changed,int left,int top,int right,int bottom) { 
  super.onLayout(changed,left,top,right,bottom); 
  if (mHeaderView != null) { 
    mHeaderView.layout(0,mHeaderViewHeight); 
    configureHeaderView(getFirstVisiblePosition()); 
  } 
}

好了，到这里，悬浮Header View就完了，各位可能看不到完整的代码，只要明白这几个核心的方法，自己写出来，也差不多了。

2、ListView Section实现

有两种方法实现ListView Section效果：

方法一：

每一个ItemView中包含Header，通过数据来控制其显示或隐藏，实现原理如下图：


优点：

1，实现简单，在Adapter.getView的实现中，只需要根据数据来判断是否是header，不是的话，隐藏Item view中的header部分，否则显示。

2，Adapter.getItem(int n)始终返回的数据是在数据列表中对应的第n个数据，这样容易理解。

3，控制header的点击事件更加容易

缺点：
1、使用更多的内存，第一个Item view中都包含一个header view，这样会费更多的内存，多数时候都可能header都是隐藏的。

方法二：

使用不同类型的View：重写getItemViewType(int)和getViewTypeCount()方法。

优点：

1，允许多个不同类型的item

2，理解更加简单

缺点：

1，实现比较复杂

2，得到指定位置的数据变得复杂一些

到这里，我的实现方式是选择第二种方案，尽管它的实现方式要复杂一些，但优点比较明显。

3、Adapter的实现

这里主要就是说一下getPinnedHeaderState和configurePinnedHeader这两个方法的实现

private class ListViewAdapter extends BaseAdapter implements PinnedHeaderAdapter { 
   
  private ArrayList<Contact> mDatas; 
  private static final int TYPE_CATEGORY_ITEM = 0;  
  private static final int TYPE_ITEM = 1;  
   
  public ListViewAdapter(ArrayList<Contact> datas) { 
    mDatas = datas; 
  } 
   
  @Override 
  public boolean areAllItemsEnabled() { 
    return false; 
  } 
   
  @Override 
  public boolean isEnabled(int position) { 
    // 异常情况处理  
    if (null == mDatas || position < 0|| position > getCount()) { 
      return true; 
    }  
     
    Contact item = mDatas.get(position); 
    if (item.isSection) { 
      return false; 
    } 
     
    return true; 
  } 
   
  @Override 
  public int getCount() { 
    return mDatas.size(); 
  } 
   
  @Override 
  public int getItemViewType(int position) { 
    // 异常情况处理  
    if (null == mDatas || position < 0|| position > getCount()) { 
      return TYPE_ITEM; 
    }  
     
    Contact item = mDatas.get(position); 
    if (item.isSection) { 
      return TYPE_CATEGORY_ITEM; 
    } 
     
    return TYPE_ITEM; 
  } 
 
  @Override 
  public int getViewTypeCount() { 
    return 2; 
  } 
 
  @Override 
  public Object getItem(int position) { 
    return (position >= 0 && position < mDatas.size()) ? mDatas.get(position) : 0; 
  } 
 
  @Override 
  public long getItemId(int position) { 
    return 0; 
  } 
 
  @Override 
  public View getView(int position,View convertView,ViewGroup parent) { 
    int itemViewType = getItemViewType(position); 
    Contact data = (Contact) getItem(position); 
    TextView itemView; 
     
    switch (itemViewType) { 
    case TYPE_ITEM: 
      if (null == convertView) { 
        itemView = new TextView(SectionListView.this); 
        itemView.setLayoutParams(new AbsListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,mItemHeight)); 
        itemView.setTextSize(16); 
        itemView.setPadding(10,0); 
        itemView.setGravity(Gravity.CENTER_VERTICAL); 
        //itemView.setBackgroundColor(Color.argb(255,20,20)); 
        convertView = itemView; 
      } 
       
      itemView = (TextView) convertView; 
      itemView.setText(data.toString()); 
      break; 
       
    case TYPE_CATEGORY_ITEM: 
      if (null == convertView) { 
        convertView = getHeaderView(); 
      } 
      itemView = (TextView) convertView; 
      itemView.setText(data.toString()); 
      break; 
    } 
     
    return convertView; 
  } 
 
  @Override 
  public int getPinnedHeaderState(int position) { 
    if (position < 0) { 
      return PINNED_HEADER_GONE; 
    } 
     
    Contact item = (Contact) getItem(position); 
    Contact itemNext = (Contact) getItem(position + 1); 
    boolean isSection = item.isSection; 
    boolean isNextSection = (null != itemNext) ? itemNext.isSection : false; 
    if (!isSection && isNextSection) { 
      return PINNED_HEADER_PUSHED_UP; 
    } 
     
    return PINNED_HEADER_VISIBLE; 
  } 
 
  @Override 
  public void configurePinnedHeader(View header,int alpha) { 
    Contact item = (Contact) getItem(position); 
    if (null != item) { 
      if (header instanceof TextView) { 
        ((TextView) header).setText(item.sectionStr); 
      } 
    } 
  } 
}

在getPinnedHeaderState方法中，如果第一个item不是section，第二个item是section的话，就返回状态PINNED_HEADER_PUSHED_UP，否则返回PINNED_HEADER_VISIBLE。
在configurePinnedHeader方法中，就是将item的section字符串设置到header view上面去。

【重要说明】

Adapter中的数据里面已经包含了section(header)的数据，数据结构中有一个方法来标识它是否是section。那么，在点击事件就要注意了，通过position可能返回的是section数据结构。

数据结构Contact的定义如下：

public class Contact { 
  int id; 
  String name; 
  String pinyin; 
  String sortLetter = "#"; 
  String sectionStr; 
  String phoneNumber; 
  boolean isSection; 
  static CharacterParser sParser = CharacterParser.getInstance(); 
   
  Contact() { 
     
  } 
   
  Contact(int id,String name) { 
    this.id = id; 
    this.name = name; 
    this.pinyin = sParser.getSpelling(name); 
    if (!TextUtils.isEmpty(pinyin)) { 
      String sortString = this.pinyin.substring(0,1).toupperCase(); 
      if (sortString.matches("[A-Z]")) { 
        this.sortLetter = sortString.toupperCase(); 
      } else { 
        this.sortLetter = "#"; 
      } 
    } 
  } 
   
  @Override 
  public String toString() { 
    if (isSection) { 
      return name; 
    } else { 
      //return name + " (" + sortLetter + "," + pinyin + ")"; 
      return name + " (" + phoneNumber + ")"; 
    } 
  } 
}

完整的代码

package com.lee.sdk.test.section; 
 
import java.util.ArrayList; 
 
import android.graphics.Color; 
import android.os.Bundle; 
import android.view.Gravity; 
import android.view.View; 
import android.view.ViewGroup; 
import android.widget.AbsListView; 
import android.widget.AdapterView; 
import android.widget.AdapterView.OnItemClickListener; 
import android.widget.BaseAdapter; 
import android.widget.TextView; 
import android.widget.Toast; 
 
import com.lee.sdk.test.GABaseActivity; 
import com.lee.sdk.test.R; 
import com.lee.sdk.widget.PinnedHeaderListView; 
import com.lee.sdk.widget.PinnedHeaderListView.PinnedHeaderAdapter; 
 
public class SectionListView extends GABaseActivity { 
 
  private int mItemHeight = 55; 
  private int mSecHeight = 25; 
   
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
     
    float density = getResources().getdisplayMetrics().density; 
    mItemHeight = (int) (density * mItemHeight); 
    mSecHeight = (int) (density * mSecHeight); 
     
    PinnedHeaderListView mListView = new PinnedHeaderListView(this); 
    mListView.setAdapter(new ListViewAdapter(ContactLoader.getInstance().getContacts(this))); 
    mListView.setPinnedHeaderView(getHeaderView()); 
    mListView.setBackgroundColor(Color.argb(255,20)); 
    mListView.setonItemClickListener(new OnItemClickListener() { 
      @Override 
      public void onItemClick(AdapterView<?> parent,View view,long id) { 
        ListViewAdapter adapter = ((ListViewAdapter) parent.getAdapter()); 
        Contact data = (Contact) adapter.getItem(position); 
        Toast.makeText(SectionListView.this,data.toString(),Toast.LENGTH_SHORT).show(); 
      } 
    }); 
 
    setContentView(mListView); 
  } 
   
  private View getHeaderView() { 
    TextView itemView = new TextView(SectionListView.this); 
    itemView.setLayoutParams(new AbsListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,mSecHeight)); 
    itemView.setGravity(Gravity.CENTER_VERTICAL); 
    itemView.setBackgroundColor(Color.WHITE); 
    itemView.setTextSize(20); 
    itemView.setTextColor(Color.GRAY); 
    itemView.setBackgroundResource(R.drawable.section_listview_header_bg); 
    itemView.setPadding(10,itemView.getPaddingBottom()); 
     
    return itemView; 
  } 
 
  private class ListViewAdapter extends BaseAdapter implements PinnedHeaderAdapter { 
     
    private ArrayList<Contact> mDatas; 
    private static final int TYPE_CATEGORY_ITEM = 0;  
    private static final int TYPE_ITEM = 1;  
     
    public ListViewAdapter(ArrayList<Contact> datas) { 
      mDatas = datas; 
    } 
     
    @Override 
    public boolean areAllItemsEnabled() { 
      return false; 
    } 
     
    @Override 
    public boolean isEnabled(int position) { 
      // 异常情况处理  
      if (null == mDatas || position < 0|| position > getCount()) { 
        return true; 
      }  
       
      Contact item = mDatas.get(position); 
      if (item.isSection) { 
        return false; 
      } 
       
      return true; 
    } 
     
    @Override 
    public int getCount() { 
      return mDatas.size(); 
    } 
     
    @Override 
    public int getItemViewType(int position) { 
      // 异常情况处理  
      if (null == mDatas || position < 0|| position > getCount()) { 
        return TYPE_ITEM; 
      }  
       
      Contact item = mDatas.get(position); 
      if (item.isSection) { 
        return TYPE_CATEGORY_ITEM; 
      } 
       
      return TYPE_ITEM; 
    } 
 
    @Override 
    public int getViewTypeCount() { 
      return 2; 
    } 
 
    @Override 
    public Object getItem(int position) { 
      return (position >= 0 && position < mDatas.size()) ? mDatas.get(position) : 0; 
    } 
 
    @Override 
    public long getItemId(int position) { 
      return 0; 
    } 
 
    @Override 
    public View getView(int position,ViewGroup parent) { 
      int itemViewType = getItemViewType(position); 
      Contact data = (Contact) getItem(position); 
      TextView itemView; 
       
      switch (itemViewType) { 
      case TYPE_ITEM: 
        if (null == convertView) { 
          itemView = new TextView(SectionListView.this); 
          itemView.setLayoutParams(new AbsListView.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,mItemHeight)); 
          itemView.setTextSize(16); 
          itemView.setPadding(10,0); 
          itemView.setGravity(Gravity.CENTER_VERTICAL); 
          //itemView.setBackgroundColor(Color.argb(255,20)); 
          convertView = itemView; 
        } 
         
        itemView = (TextView) convertView; 
        itemView.setText(data.toString()); 
        break; 
         
      case TYPE_CATEGORY_ITEM: 
        if (null == convertView) { 
          convertView = getHeaderView(); 
        } 
        itemView = (TextView) convertView; 
        itemView.setText(data.toString()); 
        break; 
      } 
       
      return convertView; 
    } 
 
    @Override 
    public int getPinnedHeaderState(int position) { 
      if (position < 0) { 
        return PINNED_HEADER_GONE; 
      } 
       
      Contact item = (Contact) getItem(position); 
      Contact itemNext = (Contact) getItem(position + 1); 
      boolean isSection = item.isSection; 
      boolean isNextSection = (null != itemNext) ? itemNext.isSection : false; 
      if (!isSection && isNextSection) { 
        return PINNED_HEADER_PUSHED_UP; 
      } 
       
      return PINNED_HEADER_VISIBLE; 
    } 
 
    @Override 
    public void configurePinnedHeader(View header,int alpha) { 
      Contact item = (Contact) getItem(position); 
      if (null != item) { 
        if (header instanceof TextView) { 
          ((TextView) header).setText(item.sectionStr); 
        } 
      } 
    } 
  } 
}

最后来一张截图：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Android 性能优化——之控件的优化
Android性能优化——之控件的优化 前面讲了图像的优化，接下来分享一下控件的性能优化，这里主要是面向自定义View的优化。 1、首先先说一下我们在自定义View中可能会犯的3个错误： 1）UselesscallstoonDraw()：我们知道调用View.invalidate()会触发Vi...
android TextView描边
前言 上一篇已经讲了如何实现textView中粗字体效果，里面主要重写了onDraw方法。 这一边讲一个进阶功能，实现textView的描边效果。 上效果图。 上代码： 原理讲解： 效果实现思路是：因为系统api只给paint设置strokewidth方法，却没有提供设置描边的色值的方法，而且我们通
GreenDao教程1
最近项目重构，涉及到了数据库和文件下载，发现GreenDao这个框架还是不错的。直接面向对象的，可以通过对对象的操作，实现数据的存储。 但是官网上的API是在不敢恭维，文档写的很糙，看了半天，才搞懂一系列的流程。在此进行一下纪念。免得那天需要修改的时候，一脸懵逼。直接上干货 官网地址：http://
WebView加载页面的两种方式——网络页面和本地页面
WebView加载页面的两种方式 一、加载网络页面 加载网络页面，是最简单的一种方式，只需要传入http的URL就可以，实现WebView加载网络页面 代码如下图： 二、加载本地页面 1、加载assets目录下的HTML页面： 加载assets目录的页面，大多数可以用来做页面数据的存储打包，这样可以
Android 全局使用第三方字体
给APP全局设置字体主要分为两个方面来介绍 一、给原生界面设置第三方字体 1、准备工作-下载第三方字体：传送门 将文件放入工程assets目录下。（一般个人习惯单独命名一个文件夹放字体文件，也可直接放入根目录，但记得改引用路径） 2、代码实现 a、自定义application，将第三方的字体，替换当
Android中粗字体
前言 最近UI大牛出了一版新的效果图，按照IOS的效果做的，页面里面有普通字体、中粗字体、加粗字体。对于IOS的小伙伴，分分钟搞定，但是对于Android开发的我，瞬间懵逼了。WTF！ 安卓只有粗和不粗呀，哪有中粗这回事。硬着头皮做出来一版之后，看到UI嫌弃的表情。深深的刺痛了我的完美心。说啥也要搞
TabLayout基本使用
前言 Tablayout继承自HorizontalScrollView，可以用作顶部标签效果、底部导航栏效果。一般多与ViewPager一起使用。 想直接了解如何实现短下滑效果的请看：TabLayout的高级用法 首先上几个效果图。 图： 使用方法 下面我们来看如何使用， 第一步，先在gradle引
AndroidStudio 各种异常情况处理大法
最近使用AndroidStudio出现了.java文件，显示为xml文件等问题，通过各种采坑之后，发现删除本地的缓存文件这个方法最管用，差不多可以根治95%的莫名其妙的问题。解决办法如下； 先将AS关闭，然后找到你电脑的目录C:\Users\用户名\.AndroidStudio3.5\system\
Android文件各种存储路径的比较
1、File cacheDir = context.getCacheDir(); 应用内部存储空间（数据文件私有）文件存储到这个路径下，不需要申请权限，当应用被卸载的时候，目录下的文件会被删除。 需要注意的是，这个文件的目录和应用的存储位置有关， 当应用被移动到外部存储设备的时候，文件的绝对路径也是
汉诺塔问题
汉诺塔问题 最近面试题遇到过汉诺塔的问题，当时竟然懵逼了，不会了！！大学研究的问题竟然都忘光了，于是抓紧捡起来。然而在网上看了看博客，发现非递归算法还真挺多。下面总结了一下。 一、递归算法 1、递归算法优缺点：递归算法算是最易于理解也是最容易实现的，但是对内存的消耗也是巨大的，因为递归需要系统堆栈来
苹果市值2025年有望达4万亿美元
pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native