前言
在实际开发中避免不了字母排序，过滤搜索等问题，闲暇时对此做了个demo，希望对大家有所帮助，本demo分别用ListView，RecyclerView各实现了一版本，所以大家可以因情况随便使用
首先看下效果
sidebar-master.gif
实现目标
1、汉字转拼音，按拼音排序
2、字母显示一次
3、顶部字母悬停效果，上滑动画效果实现
4、侧滑字母栏索引跳转到指定字母
5、搜索框字母、数字等多条件搜索
分步骤开始实现
1、汉字转拼音，按拼音排序
如果想按字母排序，必然会涉及到汉字转拼音，本demo是用pinyin4j来实现的，需要将pingyin4j.jar包导入项目，或者在线依赖也可以，需要工具类如下
public static String getPingYin(String chineseStr) throws BadHanyuPinyinOutputFormatCombination { String zhongWenPinYin = ""; char[] chars = chineseStr.toCharArray(); for (int i = 0; i < chars.length; i++) { String[] pinYin = PinyinHelper.toHanyuPinyinStringArray(chars[i], getDefaultOutputFormat()); if (pinYin != null) zhongWenPinYin += pinYin[0]; else zhongWenPinYin += chars[i]; } return zhongWenPinYin; } private static HanyuPinyinOutputFormat getDefaultOutputFormat() { HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat(); format.setCaseType(HanyuPinyinCaseType.UPPERCASE); format.setToneType(HanyuPinyinToneType.WITHOUT_TONE); format.setVCharType(HanyuPinyinVCharType.WITH_U_AND_COLON); return format; }
将集合中字母转化为拼音，将第一字母取出，保存到实体类中
for (int i = 0; i < mList.size(); i++) { String pinyin = PinYinKit.getPingYin(mList.get(i).getName()); String sortString = ""; if (!TextUtils.isEmpty(pinyin)) { sortString = pinyin.substring(0, 1).toUpperCase(); } if (sortString.matches("[A-Z]")) { mList.get(i).setSortLetters(sortString.toUpperCase()); } else { mList.get(i).setSortLetters("#"); } }
对集合中字母进行排序
//排序 Collections.sort(mList, new PinyinComparatorAdmin()); public static class PinyinComparatorAdmin implements Comparator<CountryBean> { @Override public int compare(CountryBean o1, CountryBean o2) { if (o1.getSortLetters().equals("@") || o2.getSortLetters().equals("#")) { return -1; } else if (o1.getSortLetters().equals("#") || o2.getSortLetters().equals("@")) { return 1; } else { return o1.getSortLetters().compareTo(o2.getSortLetters()); } } }
2、字母显示一次
通过上述代码，拼音已进行排序，字母如果只显示一次，我们可以遍历集合，取出当前position对应的拼音，如果它是第一个出现的，代表同类字母第一次出现，让这个position字母显示，其余同类字母全部隐藏
public static void initLetter(List<CountryBean> mList) { for (int i = 0; i < mList.size(); i++) { if (i == getPositionForSection(mList, mList.get(i).getSortLetters().charAt(0))) { mList.get(i).setLetter(true); } else { mList.get(i).setLetter(false); } } } /** * 方法含义：将当前字母传入方法体中， 来获取当前字母在集合中第一次出现的位置position 如果等于当前item的position，UI字母栏 * 显示，如果不是，UI字母栏隐藏 * * @param section * @return 对应集合中第一个出现的字母 */ public static int getPositionForSection(List<CountryBean> mList, int section) { for (int i = 0; i < mList.size(); i++) { String sortStr = mList.get(i).getSortLetters(); char firstChar = sortStr.toUpperCase().charAt(0); if (firstChar == section) { return i; } } return -1; }
3、顶部字母悬停效果，上滑动画效果实现
布局列表顶部放一个固定控件如A控件，每个item都需要含有个A控件(同类字母A控件只显示一次)，监听列表的最顶部的item，A控件显示列表最顶部item对应的首字母，列表向上滑动，如果显示字母的item滑动到距顶部高度等于A控件高度时，让A控件跟随向上平移，当A控件平移距离等于A控件高度时，证明列表中字母控件和A控件位置重叠，所以让A控件显示在最初位置，这样便实现了完美视差体验
所以需要通过Listview或RecyclerView的OnScrollListener来实现此效果
RecyclerView 监听
private class mScrollListener extends RecyclerView.OnScrollListener { private int mFlowHeight = 0; private int mCurrentPosition = -1; @Override public void onScrollStateChanged(RecyclerView recyclerView, int newState) { if (mLlIndex != null || mFlowHeight < 1) { mFlowHeight = mLlIndex.getMeasuredHeight(); } } @Override public void onScrolled(RecyclerView recyclerView, int dx, int dy) { int firstVisibleItemPosition = layoutManager.findFirstVisibleItemPosition(); View view = layoutManager.findViewByPosition(firstVisibleItemPosition + 1); if (view != null) { //当item距顶部距离小于等于A控件原始高度，并且当前item是第一个字母 便让A控件平移，反之固定到起始位置 if (view.getTop() <= mFlowHeight && mCountryList.get(firstVisibleItemPosition + 1).getLetter()) { mLlIndex.setY(view.getTop() - mFlowHeight); } else { mLlIndex.setY(0); } } mCurrentPosition = firstVisibleItemPosition; if (mCountryList.size() > 0) { mTvIndex.setText(mCountryList.get(mCurrentPosition).getSortLetters()); mLlIndex.setVisibility(View.VISIBLE); } else { mLlIndex.setVisibility(View.GONE); } } }
ListView 监听
private class mScrollListener implements AbsListView.OnScrollListener { private int mCurrentPosition = -1; @Override public void onScrollStateChanged(AbsListView absListView, int i) { if (mLlIndex != null || mFlowHeight < 1) { mFlowHeight = mLlIndex.getMeasuredHeight(); } } @Override public void onScroll(AbsListView absListView, int position, int i1, int i2) { int firstVisibleItemPosition = absListView.getFirstVisiblePosition(); View view = absListView.getChildAt(position + 1 - absListView.getFirstVisiblePosition()); if (view != null) { //当item距顶部距离小于等于A控件原始高度，并且当前item是第一个字母 便让A控件平移，反之固定到起始位置 if (view.getTop() <= mFlowHeight && mCountryList.get(firstVisibleItemPosition + 1).getLetter()) { mLlIndex.setY(view.getTop() - mFlowHeight); } else { mLlIndex.setY(0); } } if (mCurrentPosition != firstVisibleItemPosition) { mCurrentPosition = firstVisibleItemPosition; if (mCountryList.size() > 0) { mTvIndex.setText(mCountryList.get(mCurrentPosition).getSortLetters()); } } } }
4、侧滑字母栏索引跳转到指定字母
侧滑字母栏索就不必说了，有前人造好的轮子，介绍下ListView和RecyclerView各自的跳到指定position方法
LIstView跳转方法
mListView.setSelection(position);
RecyclerView跳转方法
/** * 直接到指定位置 */ layoutManager.scrollToPositionWithOffset(position, 0); // layoutManager.setStackFromEnd(true); /** * 滚动到指定位置（有滚动效果） */ // LinearSmoothScroller s1 = new TopSmoothScroller(this); // s1.setTargetPosition(position); // layoutManager.startSmoothScroll(s1);
5、搜索框字母、数字等多条件搜索
此步注意一步，根据拼音搜索或数字搜索出来的集合字母出现次数已发生改变，所有必须再次对集合进行排序，UI才能正常显示
private void filerData(String str) throws BadHanyuPinyinOutputFormatCombination { if (TextUtils.isEmpty(str)) { mCountryList.clear(); mCountryList.addAll(mCountryListAll); } else { mCountryList.clear(); for (CountryBean ms : mCountryListAll) { String name = ms.getName(); String code = ms.getCode(); if (name.indexOf(str.toString()) != -1 || PinYinKit.getPingYin(name).startsWith(str.toString()) || PinYinKit.getPingYin(name).startsWith(str.toUpperCase().toString()) || name.contains(str) || PinYinKit.getPingYin(code).startsWith(str.toString()) || PinYinKit.getPingYin(code).startsWith(str.toUpperCase().toString()) || code.contains(str) ) { mCountryList.add(ms); } } } PinYinKit.initLetter(mCountryList); layoutManager.scrollToPositionWithOffset(0, 0); mAdapter.notifyDataSetChanged(); }
最后，祝大家创作愉快
