您当前的位置： 首页 >  android

xiangzhihong8

暂无认证

  • 1浏览

    0关注

    1324博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

android自定义listview实现header悬浮框效果

xiangzhihong8 发布时间：2015-08-24 07:54:22 ，浏览量：1

之前在使用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的文本，图片等，这个方法是由调用者去实现的。
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. /** 
  2.  * Adapter interface.  The list adapter must implement this interface. 
  3.  */  
  4. public interface PinnedHeaderAdapter {  
  5.   
  6.     /** 
  7.      * Pinned header state: don't show the header. 
  8.      */  
  9.     public static final int PINNED_HEADER_GONE = 0;  
  10.   
  11.     /** 
  12.      * Pinned header state: show the header at the top of the list. 
  13.      */  
  14.     public static final int PINNED_HEADER_VISIBLE = 1;  
  15.   
  16.     /** 
  17.      * Pinned header state: show the header. If the header extends beyond 
  18.      * the bottom of the first shown element, push it up and clip. 
  19.      */  
  20.     public static final int PINNED_HEADER_PUSHED_UP = 2;  
  21.   
  22.     /** 
  23.      * Computes the desired state of the pinned header for the given 
  24.      * position of the first visible list item. Allowed return values are 
  25.      * {@link #PINNED_HEADER_GONE}, {@link #PINNED_HEADER_VISIBLE} or 
  26.      * {@link #PINNED_HEADER_PUSHED_UP}. 
  27.      */  
  28.     int getPinnedHeaderState(int position);  
  29.   
  30.     /** 
  31.      * Configures the pinned header view to match the first visible list item. 
  32.      * 
  33.      * @param header pinned header view. 
  34.      * @param position position of the first visible list item. 
  35.      * @param alpha fading of the header view, between 0 and 255. 
  36.      */  
  37.     void configurePinnedHeader(View header, int position, int alpha);  
  38. }  
1.2、如何绘制Header View
这是在dispatchDraw方法中绘制的：
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. @Override  
  2. protected void dispatchDraw(Canvas canvas) {  
  3.     super.dispatchDraw(canvas);  
  4.     if (mHeaderViewVisible) {  
  5.         drawChild(canvas, mHeaderView, getDrawingTime());  
  6.     }  
  7. }  
1.3、配置Header View
核心就是根据不同的状态值来控制Header View的状态，比如PINNED_HEADER_GONE（隐藏）的情况，可能需要设置一个flag标记，不绘制Header View，那么就达到隐藏的效果。当PINNED_HEADER_PUSHED_UP状态时，可能需要根据不同的位移来计算Header View的移动位移。下面是具体的实现：
[java]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. public void configureHeaderView(int position) {  
  2.     if (mHeaderView == null || null == mAdapter) {  
  3.         return;  
  4.     }  
  5.       
  6.     int state = mAdapter.getPinnedHeaderState(position);  
  7.     switch (state) {  
  8.         case PinnedHeaderAdapter.PINNED_HEADER_GONE: {  
  9.             mHeaderViewVisible = false;  
  10.             break;  
  11.         }  
  12.   
  13.         case PinnedHeaderAdapter.PINNED_HEADER_VISIBLE: {  
  14.             mAdapter.configurePinnedHeader(mHeaderView, position, MAX_ALPHA);  
  15.             if (mHeaderView.getTop() != 0) {  
  16.                 mHeaderView.layout(0, 0, mHeaderViewWidth, mHeaderViewHeight);  
  17.             }  
  18.             mHeaderViewVisible = true;  
  19.             break;  
  20.         }  
  21.   
  22.         case PinnedHeaderAdapter.PINNED_HEADER_PUSHED_UP: {  
  23.             View firstView = getChildAt(0);  
  24.             int bottom = firstView.getBottom();  
  25.               int itemHeight = firstView.getHeight();  
  26.             int headerHeight = mHeaderView.getHeight();  
  27.             int y;  
  28.             int alpha;  
  29.             if (bottom = 0 && position 
关注
打赏
1482932726
查看更多评论

最近更新

热门博客

[ 申请 ]友情链接：

ClashX教程 绘画宝宝 配音宝宝
立即登录/注册

微信扫码登录

0.1216s