Android之联系人PinnedHeaderListView使用

最新推荐文章于 2016-08-07 22:04:20 发布
最新推荐文章于 2016-08-07 22:04:20 发布
阅读量9.7k 收藏 27
点赞数 9
分类专栏： Android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/way_ping_li/article/details/9090857
版权

Android联系人中的ListView是做得比较独特的，但是源码写得比较复制，当我们想使用他的时候再从源码中提取，实属不易啊，而且容易出错，这几天，我把他提取出来了，写成一个简单的例子，一是给自己备忘，而是跟大家分享一下，好了，先来看看效果图：

   


首先是封装好的带头部的PinnedHeaderListView：

public class PinnedHeaderListView extends ListView {

	public interface PinnedHeaderAdapter {
		public static final int PINNED_HEADER_GONE = 0;
		public static final int PINNED_HEADER_VISIBLE = 1;
		public static final int PINNED_HEADER_PUSHED_UP = 2;

		int getPinnedHeaderState(int position);

		void configurePinnedHeader(View header, int position, int alpha);
	}

	private static final int MAX_ALPHA = 255;

	private PinnedHeaderAdapter mAdapter;
	private View mHeaderView;
	private boolean mHeaderViewVisible;
	private int mHeaderViewWidth;
	private int mHeaderViewHeight;

	public PinnedHeaderListView(Context context) {
		super(context);
	}

	public PinnedHeaderListView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public PinnedHeaderListView(Context context, AttributeSet attrs,
			int defStyle) {
		super(context, attrs, defStyle);
	}
    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, 0, mHeaderViewWidth, mHeaderViewHeight);
            configureHeaderView(getFirstVisiblePosition());
        }
    }
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        if (mHeaderView != null) {
            measureChild(mHeaderView, widthMeasureSpec, heightMeasureSpec);
            mHeaderViewWidth = mHeaderView.getMeasuredWidth();
            mHeaderViewHeight = mHeaderView.getMeasuredHeight();
        }
    }
	public void setPinnedHeaderView(View view) {
		mHeaderView = view;
		if (mHeaderView != null) {
			setFadingEdgeLength(0);
		}
		requestLayout();
	}
    public void setAdapter(ListAdapter adapter) {
        super.setAdapter(adapter);
        mAdapter = (PinnedHeaderAdapter)adapter;
    }

	public void configureHeaderView(int position) {
		if (mHeaderView == null) {
			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, 0, mHeaderViewWidth, mHeaderViewHeight);
			}
			mHeaderViewVisible = true;
			break;
		}

		case PinnedHeaderAdapter.PINNED_HEADER_PUSHED_UP: {
			View firstView = getChildAt(0);
			int bottom = firstView.getBottom();
			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, position, alpha);
			if (mHeaderView.getTop() != y) {
				mHeaderView.layout(0, y, mHeaderViewWidth, mHeaderViewHeight
						+ y);
			}
			mHeaderViewVisible = true;
			break;
		}
		}
	}

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


然后是旁边那个快速导航BladeView(刀锋)：

public class BladeView extends View {
	private OnItemClickListener mOnItemClickListener;
	String[] b = { "#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K",
			"L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X",
			"Y", "Z" };
	int choose = -1;
	Paint paint = new Paint();
	boolean showBkg = false;
	private PopupWindow mPopupWindow;
	private TextView mPopupText;
	private Handler handler = new Handler();

	public BladeView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
	}

	public BladeView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public BladeView(Context context) {
		super(context);
	}

	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		if (showBkg) {
			canvas.drawColor(Color.parseColor("#00000000"));
		}

		int height = getHeight();
		int width = getWidth();
		int singleHeight = height / b.length;
		for (int i = 0; i < b.length; i++) {
			paint.setColor(Color.BLACK);
			paint.setTypeface(Typeface.DEFAULT_BOLD);
			paint.setFakeBoldText(true);
			paint.setAntiAlias(true);
			if (i == choose) {
				paint.setColor(Color.parseColor("#3399ff"));
			}
			float xPos = width / 2 - paint.measureText(b[i]) / 2;
			float yPos = singleHeight * i + singleHeight;
			canvas.drawText(b[i], xPos, yPos, paint);
			paint.reset();
		}

	}

	@Override
	public boolean dispatchTouchEvent(MotionEvent event) {
		final int action = event.getAction();
		final float y = event.getY();
		final int oldChoose = choose;
		final int c = (int) (y / getHeight() * b.length);

		switch (action) {
		case MotionEvent.ACTION_DOWN:
			showBkg = true;
			if (oldChoose != c) {
				if (c > 0 && c < b.length) {
					performItemClicked(c);
					choose = c;
					invalidate();
				}
			}

			break;
		case MotionEvent.ACTION_MOVE:
			if (oldChoose != c) {
				if (c > 0 && c < b.length) {
					performItemClicked(c);
					choose = c;
					invalidate();
				}
			}
			break;
		case MotionEvent.ACTION_UP:
			showBkg = false;
			choose = -1;
			dismissPopup();
			invalidate();
			break;
		}
		return true;
	}

	private void showPopup(int item) {
		if (mPopupWindow == null) {
			handler.removeCallbacks(dismissRunnable);
			mPopupText = new TextView(getContext());
			mPopupText.setBackgroundColor(Color.GRAY);
			mPopupText.setTextColor(Color.CYAN);
			mPopupText.setTextSize(50);
			mPopupText.setGravity(Gravity.CENTER_HORIZONTAL
					| Gravity.CENTER_VERTICAL);
			mPopupWindow = new PopupWindow(mPopupText, 100, 100);
		}

		String text = "";
		if (item == 0) {
			text = "#";
		} else {
			text = Character.toString((char) ('A' + item - 1));
		}
		mPopupText.setText(text);
		if (mPopupWindow.isShowing()) {
			mPopupWindow.update();
		} else {
			mPopupWindow.showAtLocation(getRootView(),
					Gravity.CENTER_HORIZONTAL | Gravity.CENTER_VERTICAL, 0, 0);
		}
	}

	private void dismissPopup() {
		handler.postDelayed(dismissRunnable, 800);
	}

	Runnable dismissRunnable = new Runnable() {

		@Override
		public void run() {
			// TODO Auto-generated method stub
			if (mPopupWindow != null) {
				mPopupWindow.dismiss();
			}
		}
	};

	public boolean onTouchEvent(MotionEvent event) {
		return super.onTouchEvent(event);
	}

	public void setOnItemClickListener(OnItemClickListener listener) {
		mOnItemClickListener = listener;
	}

	private void performItemClicked(int item) {
		if (mOnItemClickListener != null) {
			mOnItemClickListener.onItemClick(b[item]);
			showPopup(item);
		}
	}

	public interface OnItemClickListener {
		void onItemClick(String s);
	}

}



接下来就是使用了，先在布局文件中声明activity_main.xml：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <com.way.view.PinnedHeaderListView
        android:id="@+id/friends_display"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:cacheColorHint="#00000000"
        android:divider="@null"
        android:footerDividersEnabled="false"
        android:headerDividersEnabled="false" />

    <com.way.view.BladeView
        android:id="@+id/friends_myletterlistview"
        android:layout_width="30dip"
        android:layout_height="fill_parent"
        android:layout_alignParentRight="true"
        android:background="#00000000" />

</RelativeLayout>

然后是一个独立Adapter，这次我没有作为内部类放在MainActivity中： 

public class FriendsAdapter extends BaseAdapter implements SectionIndexer,
		PinnedHeaderAdapter, OnScrollListener {
	private int mLocationPosition = -1;
	private String[] mDatas;
	// 首字母集
	private List<String> mFriendsSections;
	private List<Integer> mFriendsPositions;
	private LayoutInflater inflater;

	public FriendsAdapter(Context context,String[] datas, List<String> friendsSections,
			List<Integer> friendsPositions) {
		// TODO Auto-generated constructor stub
		inflater = LayoutInflater.from(context);
		mDatas = datas;
		mFriendsSections = friendsSections;
		mFriendsPositions = friendsPositions;
	}

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

	@Override
	public Object getItem(int position) {
		// TODO Auto-generated method stub
		return mDatas[position];
	}

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

	@Override
	public View getView(int position, View convertView, ViewGroup parent) {
		// TODO Auto-generated method stub
		int section = getSectionForPosition(position);
		if (convertView == null) {
			convertView = inflater.inflate(R.layout.listview_item, null);
		}
		LinearLayout mHeaderParent = (LinearLayout) convertView
				.findViewById(R.id.friends_item_header_parent);
		TextView mHeaderText = (TextView) convertView
				.findViewById(R.id.friends_item_header_text);
		if (getPositionForSection(section) == position) {
			mHeaderParent.setVisibility(View.VISIBLE);
			mHeaderText.setText(mFriendsSections.get(section));
		} else {
			mHeaderParent.setVisibility(View.GONE);
		}
		TextView textView = (TextView) convertView
				.findViewById(R.id.friends_item);
		textView.setText(mDatas[position]);
		return convertView;
	}

	@Override
	public void onScrollStateChanged(AbsListView view, int scrollState) {
		// TODO Auto-generated method stub

	}

	@Override
	public void onScroll(AbsListView view, int firstVisibleItem,
			int visibleItemCount, int totalItemCount) {
		// TODO Auto-generated method stub
		if (view instanceof PinnedHeaderListView) {
			((PinnedHeaderListView) view).configureHeaderView(firstVisibleItem);
		}
	}

	@Override
	public int getPinnedHeaderState(int position) {
		int realPosition = position;
		if (realPosition < 0
				|| (mLocationPosition != -1 && mLocationPosition == realPosition)) {
			return PINNED_HEADER_GONE;
		}
		mLocationPosition = -1;
		int section = getSectionForPosition(realPosition);
		int nextSectionPosition = getPositionForSection(section + 1);
		if (nextSectionPosition != -1
				&& realPosition == nextSectionPosition - 1) {
			return PINNED_HEADER_PUSHED_UP;
		}
		return PINNED_HEADER_VISIBLE;
	}

	@Override
	public void configurePinnedHeader(View header, int position, int alpha) {
		// TODO Auto-generated method stub
		int realPosition = position;
		int section = getSectionForPosition(realPosition);
		String title = (String) getSections()[section];
		((TextView) header.findViewById(R.id.friends_list_header_text))
				.setText(title);
	}

	@Override
	public Object[] getSections() {
		// TODO Auto-generated method stub
		return mFriendsSections.toArray();
	}

	@Override
	public int getPositionForSection(int section) {
		if (section < 0 || section >= mFriendsSections.size()) {
			return -1;
		}
		return mFriendsPositions.get(section);
	}

	@Override
	public int getSectionForPosition(int position) {
		// TODO Auto-generated method stub
		if (position < 0 || position >= getCount()) {
			return -1;
		}
		int index = Arrays.binarySearch(mFriendsPositions.toArray(), position);
		return index >= 0 ? index : -index - 2;
	}

}


最后就是MainActivity中的处理了：

public class MainActivity extends Activity {
	private static final String FORMAT = "^[a-z,A-Z].*$";
	private PinnedHeaderListView mListView;
	private BladeView mLetter;
	private FriendsAdapter mAdapter;
	private String[] datas;
	// 首字母集
	private List<String> mSections;
	// 根据首字母存放数据
	private Map<String, List<String>> mMap;
	// 首字母位置集
	private List<Integer> mPositions;
	// 首字母对应的位置
	private Map<String, Integer> mIndexer;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initData();
		initView();
	}

	private void initData() {
		datas = getResources().getStringArray(R.array.countries);
		mSections = new ArrayList<String>();
		mMap = new HashMap<String, List<String>>();
		mPositions = new ArrayList<Integer>();
		mIndexer = new HashMap<String, Integer>();

		for (int i = 0; i < datas.length; i++) {
			String firstName = datas[i].substring(0, 1);
			if (firstName.matches(FORMAT)) {
				if (mSections.contains(firstName)) {
					mMap.get(firstName).add(datas[i]);
				} else {
					mSections.add(firstName);
					List<String> list = new ArrayList<String>();
					list.add(datas[i]);
					mMap.put(firstName, list);
				}
			} else {
				if (mSections.contains("#")) {
					mMap.get("#").add(datas[i]);
				} else {
					mSections.add("#");
					List<String> list = new ArrayList<String>();
					list.add(datas[i]);
					mMap.put("#", list);
				}
			}
		}

		Collections.sort(mSections);
		int position = 0;
		for (int i = 0; i < mSections.size(); i++) {
			mIndexer.put(mSections.get(i), position);// 存入map中，key为首字母字符串，value为首字母在listview中位置
			mPositions.add(position);// 首字母在listview中位置，存入list中
			position += mMap.get(mSections.get(i)).size();// 计算下一个首字母在listview的位置
		}
	}

	private void initView() {
		// TODO Auto-generated method stub
		mListView = (PinnedHeaderListView) findViewById(R.id.friends_display);
		mLetter = (BladeView) findViewById(R.id.friends_myletterlistview);
		mLetter.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(String s) {
				if (mIndexer.get(s) != null) {
					mListView.setSelection(mIndexer.get(s));
				}
			}
		});
		mAdapter = new FriendsAdapter(this, datas, mSections, mPositions);
		mListView.setAdapter(mAdapter);
		mListView.setOnScrollListener(mAdapter);
		mListView.setPinnedHeaderView(LayoutInflater.from(this).inflate(
				R.layout.listview_head, mListView, false));
	}

}

还有一个数据arrays.xml，我就不贴出来了，有兴趣的朋友可以下源码看看：http://download.csdn.net/detail/weidi1989/5576125


Broncho.Lee
关注
  • 9
    点赞
  • 踩
  • 27
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
使用PinnedHeaderListView实现固定头部的列表
ruancoder的博客
07-30 4799
在手机自带的通讯录中，我们会发现联系人被分组，按首字母索引排列，当列表向上滑动时，分组的标题栏会悬浮在列表顶部。 常用的一些app如美团的选择城市，也是使用的这种效果。 效果图如下。 关于这个效果，实现的方式有多种，这里使用PinnedHeaderListView实现固定头部的列表。 实现步骤： (1).PinnedHeaderListView的实现 首先是Pi
Android 为ListView添加头部试图
luffy207的博客
10-07 1956
一般我们使用listview的时候会遇到这样的情况，在头部有一个TextView之类的组件，但是对listview中的内容滑动的时候头部并没有一起滑动，所以为了解决这个问题，为listview添加一个头部试图就可以一起滑动，具体实现代码如下： public class MainActivity extends Activity { private ListView lv; private A
安卓Android源码——PinnedHeaderListView联系人listview.zip
10-14
安卓Android源码——PinnedHeaderListView联系人listview.zip
Android PinnedHeaderListView 详解
热门推荐
提升心智
02-19 1万+
Android PinnedHeaderListView 使用详解 PinnedHeaderListView 提供一些 钉头 会定在头部 它看起来像是 应用程序在Android 4.0以上的联系人 能够平滑的悬浮 github 开源地址: https://github.com/JimiSmith/PinnedHeaderListView 效果图: 下载后导入 编辑工具里 libray 只有2个类 PinnedHeaderListView.java Sectioned
android中字母导航和PinnedHeaderListView(listview头部固定)
老花的博客
06-14 3203
市面上使用listview头部在顶部固定和字母导航的app是非常之多，今天自己也结合之前做的项目，整理了一个在listview中实现头部固定和字母快速定位导航的功能。 效果图如下：
Android自定义View之PinnedHeaderListView
vv_bug
08-07 1279
做android已经有一年的时间了，还停留在初级程序员的道路，听了许多大牛们的成长之路，就是要不断的总结。于是我开始写博客了，大牛勿喷！^~^ 本次研究的东西是PinnedHeaderListView，也就是头部悬浮，并且不断的更新，想必大家已经在很多地方看到过了， ![运行效果图如下] 实现的方式 （一）可以用一个FramLayout底下放一个ListView,上面覆盖一个需要悬浮的布
Android中ListView添加头部
翟浩浩Android专栏
05-13 1万+
效果图： MainActivity中 public class MainActivity extends Activity { private ListView lv_test; private View vHead; @Override protected void onCreate(Bundle savedInstanceState)
Android之联系人PinnedHeaderListView使用介绍
09-05
然而，Android系统联系人的ListView实现有其独特之处，特别是在处理分组数据时，它会有一个固定的头部（pinned header），即使在滚动时也会保持在屏幕的可见位置。这就是PinnedHeaderListView的核心功能。在本文中，...
android PinnedHeaderListView联系人listview源码.rar
11-03
在实际项目中，我们可以结合PinnedHeaderListView来构建更复杂的UI，例如在联系人应用中，每个分组代表一个字母，对应的头部就是该字母，这样用户可以快速找到以特定字母开头的联系人。同时，PinnedHeaderListView还...
PinnedHeaderListView ListView固定头部
01-27
使用PinnedHeaderListView ListView固定头部 http://blog.csdn.net/qq_27030835/article/details/50560953
PinnedHeaderListView
08-17
PinnedHeaderListView案例，熟悉系统PinnedHeaderListView在通讯录，也可移植过来自定义实现城市列表或相关具有相同属性的列表。
PinnedHeaderView:固定标头ListView for android（如iOS）
05-09
PinnedHeaderView 类似iOS上可折叠头部的ListView，效果如下图所示 ###Gradle compile 'com.hjy.library:PinnedHeaderListView:1.0.3' ###使用方法 #####PinnedHeaderListView 仅实现可折叠头部的ListView，右边无索引条 在layout里配置： <com.hjy.pinnedheaderlistview.PinnedHeaderListView android:id="@+id/ListView_Country" android:layout_width="match_parent" android:layout_height="match_parent" android:cacheColorHint="#00000000"
android PinnerListView
09-22
不重写ListView实现ListView快速滑动和分组挤压动画
Android使用PinnedHeaderListView实现固定头部的列表
07-30
使用PinnedHeaderListView实现固定头部的列表，应用场景如通讯录，选择城市。
PinnedHeaderListView联系人listview.zip
最新发布
04-19
《PinnedHeaderListView联系人listview.zip》是一个包含Android源码学习材料的压缩包，主要聚焦于PinnedHeaderListView这一特定组件的实现。PinnedHeaderListView是Android开发中一种特殊的ListView，它允许在滚动...
Android学习之联系人PinnedHeaderListView（通讯录）
欢迎来到下一天
07-29 610
今天学习的是通讯录~~根据自己的理解~~添加了部分注释。 1.  BladView，主要实现了触摸时返回对应字母 package com.way.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import
PinnedHeaderListView通讯录列表 Bug修复与封装
总结总结总结
03-20 541
项目用到通讯录列表，百度找到PinnedHeaderListView，但是用起来发现还有几个bug例如空组时抬头显示错误等等，接入也比较麻烦需要重新很多方法内部处理算法也没完全封装起来，所以就自己修复了下里面的bug并封装了代码，现在只需要重写一个adapter就能实现通讯录效果。 package com.test.view; import android.view.View;

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值