效果:
这篇文章算是之前一篇的升级版,在上一篇的基础上新增了顶部悬停功能、波浪侧边栏和关于多音字的一个处理。
上一篇链接 :
《Android 使用RecyclerView实现(仿微信)的联系人A-Z字母排序和过滤搜索功能》
http://blog.csdn.net/silenceoo/article/details/75661590
主界面布局代码:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:focusable="true"
android:focusableInTouchMode="true">
<com.xp.wavesidebarrecyclerview.ClearEditText
android:id="@+id/filter_edit"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:background="#bef9b81b"
android:drawableLeft="@drawable/search_bar_icon_normal"
android:hint="请输入关键字"
android:maxLines="1"
android:textSize="15dp" />
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v7.widget.RecyclerView>
<com.xp.wavesidebar.WaveSideBar
android:id="@+id/sideBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:chooseTextColor="@android:color/white"
app:textColor="#969696"
app:backgroundColor="#bef9b81b"
app:textSize="10sp"
app:hintTextSize="32sp"
app:radius="24dp"
app:circleRadius="24dp"/>
</FrameLayout>
</LinearLayout>
这里的WaveSideBar参考的是:https://github.com/Solartisan/WaveSideBar
WaveSideBar下边的自定义属性也可以不设置,不设置的话就是使用默认值,详细的实现方式可以看源码。
主界面的逻辑代码主要是三个方法:
1、初始化的方法主要是对比较器的初始化,设置监听,对数据排序和对RecyclerView的初始化。
private void initViews() {
mComparator = new PinyinComparator();
mSideBar = (WaveSideBar) findViewById(R.id.sideBar);
//设置右侧SideBar触摸监听
mSideBar.setOnTouchLetterChangeListener(new WaveSideBar.OnTouchLetterChangeListener() {
@Override
public void onLetterChange(String letter) {
//该字母首次出现的位置
int position = mAdapter.getPositionForSection(letter.charAt(0));
if (position != -1) {
manager.scrollToPositionWithOffset(position, 0);
}
}
});
mRecyclerView = (RecyclerView) findViewById(R.id.rv);
mDateList = filledData(getResources().getStringArray(R.array.date));
// 根据a-z进行排序源数据
Collections.sort(mDateList, mComparator);
//RecyclerView设置manager
manager = new LinearLayoutManager(this);
manager.setOrientation(LinearLayoutManager.VERTICAL);
mRecyclerView.setLayoutManager(manager);
mAdapter = new SortAdapter(this, mDateList);
mRecyclerView.setAdapter(mAdapter);
mDecoration = new TitleItemDecoration(this, mDateList);
//如果add两个,那么按照先后顺序,依次渲染。
mRecyclerView.addItemDecoration(mDecoration);
mRecyclerView.addItemDecoration(new DividerItemDecoration(MainActivity.this, DividerItemDecoration.VERTICAL));
mClearEditText = (ClearEditText) findViewById(R.id.filter_edit);
//根据输入框输入值的改变来过滤搜索
mClearEditText.addTextChangedListener(new TextWatcher() {
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
//当输入框里面的值为空,更新为原来的列表,否则为过滤数据列表
filterData(s.toString());
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count,
int after) {
}
@Override
public void afterTextChanged(Editable s) {
}
});
}
列表顶部字母索引和悬停的实现使用的是RecyclerView的ItemDecoration。比之前每个item都包含一个字母索引更优雅。
接下来是将数据列表的内容按拼音排序的方法,先将汉字转化成拼音,在用正则表达式分类,下边是代码:
/**
* 为RecyclerView填充数据
*
* @param date
* @return
*/
private List<SortModel> filledData(String[] date) {
List<SortModel> mSortList = new ArrayList<>();
for (int i = 0; i < date.length; i++) {
SortModel sortModel = new SortModel();
sortModel.setName(date[i]);
//汉字转换成拼音
String pinyin = PinyinUtils.getPingYin(date[i]);
String sortString = pinyin.substring(0, 1).toUpperCase();
// 正则表达式,判断首字母是否是英文字母
if (sortString.matches("[A-Z]")) {
sortModel.setLetters(sortString.toUpperCase());
} else {
sortModel.setLetters("#");
}
mSortList.add(sortModel);
}
return mSortList;
}
最后就是根据输入的内容进行数据筛选的方法:
/**
* 根据输入框中的值来过滤数据并更新RecyclerView
*
* @param filterStr
*/
private void filterData(String filterStr) {
List<SortModel> filterDateList = new ArrayList<>();
if (TextUtils.isEmpty(filterStr)) {
filterDateList = filledData(getResources().getStringArray(R.array.date));
} else {
filterDateList.clear();
for (SortModel sortModel : mDateList) {
String name = sortModel.getName();
if (name.indexOf(filterStr.toString()) != -1 ||
PinyinUtils.getFirstSpell(name).startsWith(filterStr.toString())
//不区分大小写
|| PinyinUtils.getFirstSpell(name).toLowerCase().startsWith(filterStr.toString())
|| PinyinUtils.getFirstSpell(name).toUpperCase().startsWith(filterStr.toString())
) {
filterDateList.add(sortModel);
}
}
}
// 根据a-z进行排序
Collections.sort(filterDateList, mComparator);
mDateList.clear();
mDateList.addAll(filterDateList);
mAdapter.notifyDataSetChanged();
}
TitleItemDecoration:
An ItemDecoration allows the application to add a special drawing and layout offset to specific item views from the adapter's data set. This can be useful for drawing dividers between items, highlights, visual grouping boundaries and more.
ItemDecoration主要是用来对RecyclerView进行一些修饰,是对adapter数据集中的数据视图增加修饰或空位。经常被用来画分割线、强调效果、可见的分组边界等。
这个类是继承自RecyclerView.ItemDecoration。主要方法:
1、getItemOffsets():绘制间距,绘制标题栏空出间隙。主要逻辑是通过当前view的position判断是否需要在上方空出矩形范围。
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
super.getItemOffsets(outRect, view, parent, state);
int position = ((RecyclerView.LayoutParams) view.getLayoutParams()).getViewLayoutPosition();
if (position > -1) {
//等于0的时候绘制title
if (position == 0) {
outRect.set(0, mTitleHeight, 0, 0);
} else {
if (null != mData.get(position).getLetters() &&
!mData.get(position).getLetters().equals(mData.get(position - 1).getLetters())) {
//字母不为空,并且不等于前一个,绘制title
outRect.set(0, mTitleHeight, 0, 0);
} else {
outRect.set(0, 0, 0, 0);
}
}
}
}
2、onDraw():进行标题栏等绘制,即在每组view的上方,即getItemOffset()的区域进行标题栏的绘制
@Override
public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
super.onDraw(c, parent, state);
final int left = parent.getPaddingLeft();
final int right = parent.getWidth() - parent.getPaddingRight();
final int childCount = parent.getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = parent.getChildAt(i);
final RecyclerView.LayoutParams params = (RecyclerView.LayoutParams) child
.getLayoutParams();
int position = params.getViewLayoutPosition();
if (position > -1) {
if (position == 0) {//等于0的时候绘制title
drawTitle(c, left, right, child, params, position);
} else {
if (null != mData.get(position).getLetters() && !mData.get(position)
.getLetters().equals(mData.get(position - 1).getLetters())) {
//字母不为空,并且不等于前一个,也要title
drawTitle(c, left, right, child, params, position);
}
}
}
}
}
drawTitle():
/**
* 绘制Title区域背景和文字的方法
*最先调用,绘制最下层的title
* @param c
* @param left
* @param right
* @param child
* @param params
* @param position
*/
private void drawTitle(Canvas c, int left, int right, View child, RecyclerView.LayoutParams params, int position) {
mPaint.setColor(TITLE_BG_COLOR);
c.drawRect(left, child.getTop() - params.topMargin - mTitleHeight, right, child.getTop() - params.topMargin, mPaint);
mPaint.setColor(TITLE_TEXT_COLOR);
mPaint.getTextBounds(mData.get(position).getLetters(), 0, mData.get(position).getLetters().length(), mBounds);
c.drawText(mData.get(position).getLetters(),
child.getPaddingLeft(),
child.getTop() - params.topMargin - (mTitleHeight / 2 - mBounds.height() / 2), mPaint);
}
3、onDrawOver():实现悬浮分组栏,以及悬浮分组栏效果绘制。
对于整个列表的绘制流程,是遵循如下的顺序:
ItemDecoration#onDraw() -> ItemView的绘制 -> ItemDecoration#onDrawOver
在onDrawOver中实现可以满足“悬浮”,这个方法里实现了两种效果:一种是下边的字母将上边的顶上去;还有一种是下边的字母直接覆盖上边的字母。
/**
* 最后调用,绘制最上层的title
* @param c
* @param parent
* @param state
*/
@Override
public void onDrawOver(Canvas c, final RecyclerView parent, RecyclerView.State state) {
int position = ((LinearLayoutManager) (parent.getLayoutManager())).findFirstVisibleItemPosition();
if (position == -1) return;//在搜索到没有的索引的时候position可能等于-1,所以在这里判断一下
String tag = mData.get(position).getLetters();
View child = parent.findViewHolderForLayoutPosition(position).itemView;
//Canvas是否位移过的标志
boolean flag = false;
if ((position + 1) < mData.size()) {
//当前第一个可见的Item的字母索引,不等于其后一个item的字母索引,说明悬浮的View要切换了
if (null != tag && !tag.equals(mData.get(position + 1).getLetters())) {
//当第一个可见的item在屏幕中剩下的高度小于title的高度时,开始悬浮Title的动画
if (child.getHeight() + child.getTop() < mTitleHeight) {
c.save();
flag = true;
/**
* 下边的索引把上边的索引顶上去的效果
*/
c.translate(0, child.getHeight() + child.getTop() - mTitleHeight);
/**
* 头部折叠起来的视效(下边的索引慢慢遮住上边的索引)
*/
/*c.clipRect(parent.getPaddingLeft(),
parent.getPaddingTop(),
parent.getRight() - parent.getPaddingRight(),
parent.getPaddingTop() + child.getHeight() + child.getTop());*/
}
}
}
mPaint.setColor(TITLE_BG_COLOR);
c.drawRect(parent.getPaddingLeft(),
parent.getPaddingTop(),
parent.getRight() - parent.getPaddingRight(),
parent.getPaddingTop() + mTitleHeight, mPaint);
mPaint.setColor(TITLE_TEXT_COLOR);
mPaint.getTextBounds(tag, 0, tag.length(), mBounds);
c.drawText(tag, child.getPaddingLeft(),
parent.getPaddingTop() + mTitleHeight - (mTitleHeight / 2 - mBounds.height() / 2),
mPaint);
if (flag)
c.restore();//恢复画布到之前保存的状态
}
适配器里面的代码很简单,直接上代码吧:
public class SortAdapter extends RecyclerView.Adapter<SortAdapter.ViewHolder> {
private LayoutInflater mInflater;
private List<SortModel> mData;
private Context mContext;
public SortAdapter(Context context, List<SortModel> data) {
mInflater = LayoutInflater.from(context);
mData = data;
this.mContext = context;
}
@Override
public SortAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = mInflater.inflate(R.layout.item_name, parent,false);
ViewHolder viewHolder = new ViewHolder(view);
viewHolder.tvName = (TextView) view.findViewById(R.id.tvName);
return viewHolder;
}
@Override
public void onBindViewHolder(final SortAdapter.ViewHolder holder, final int position) {
if (mOnItemClickListener != null) {
holder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mOnItemClickListener.onItemClick(holder.itemView, position);
}
});
}
holder.tvName.setText(this.mData.get(position).getName());
holder.tvName.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(mContext, mData.get(position).getName(),Toast.LENGTH_SHORT).show();
}
});
}
@Override
public int getItemCount() {
return mData.size();
}
//**********************itemClick************************
public interface OnItemClickListener {
void onItemClick(View view, int position);
}
private OnItemClickListener mOnItemClickListener;
public void setOnItemClickListener(OnItemClickListener mOnItemClickListener) {
this.mOnItemClickListener = mOnItemClickListener;
}
//**************************************************************
public static class ViewHolder extends RecyclerView.ViewHolder {
TextView tvName;
public ViewHolder(View itemView) {
super(itemView);
}
}
/**
* 提供给Activity刷新数据
* @param list
*/
public void updateList(List<SortModel> list){
this.mData = list;
notifyDataSetChanged();
}
public Object getItem(int position) {
return mData.get(position);
}
/**
* 根据ListView的当前位置获取分类的首字母的char ascii值
*/
public int getSectionForPosition(int position) {
return mData.get(position).getLetters().charAt(0);
}
/**
* 根据分类的首字母的Char ascii值获取其第一次出现该首字母的位置
*/
public int getPositionForSection(int section) {
for (int i = 0; i < getItemCount(); i++) {
String sortStr = mData.get(i).getLetters();
char firstChar = sortStr.toUpperCase().charAt(0);
if (firstChar == section) {
return i;
}
}
return -1;
}
}
PinyinUtils
是一个将中文转化为拼音的工具类,主要提供汉字转拼音的方法和获取首字母的方法,新增了对多音字的处理方法,现在能够获取到所有的多音字的拼音,至于如何显示的问题,就要各位朋友根据需求,做相应的判断:
public class PinyinUtils {
/**
* 获取拼音
*
* @param inputString
* @return
*/
public static String getPingYin(String inputString) {
HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
format.setCaseType(HanyuPinyinCaseType.LOWERCASE);
format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
format.setVCharType(HanyuPinyinVCharType.WITH_V);
char[] input = inputString.trim().toCharArray();
String output = "";
try {
for (char curChar : input) {
if (Character.toString(curChar).matches("[\\u4E00-\\u9FA5]+")) {
String[] temp = PinyinHelper.toHanyuPinyinStringArray(curChar, format);
output += temp[0];
} else
output += Character.toString(curChar);
}
} catch (BadHanyuPinyinOutputFormatCombination e) {
e.printStackTrace();
}
return output;
}
/**
* 获取第一个字的拼音首字母
* @param chinese
* @return
*/
public static String getFirstSpell(String chinese) {
StringBuffer pinYinBF = new StringBuffer();
char[] arr = chinese.toCharArray();
HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();
defaultFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);
defaultFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
for (char curChar : arr) {
if (curChar > 128) {
try {
String[] temp = PinyinHelper.toHanyuPinyinStringArray(curChar, defaultFormat);
if (temp != null) {
pinYinBF.append(temp[0].charAt(0));
}
} catch (BadHanyuPinyinOutputFormatCombination e) {
e.printStackTrace();
}
} else {
pinYinBF.append(curChar);
}
}
return pinYinBF.toString().replaceAll("\\W", "").trim();
}
/**
* 汉字转换位汉语拼音首字母,英文字符不变,特殊字符丢失 支持多音字,生成方式如(长沙市长:cssc,zssz,zssc,cssz)
*
* @param chines
* 汉字
* @return 拼音
*/
public static String converterToFirstSpell(String chines) {
StringBuffer pinyinName = new StringBuffer();
char[] nameChar = chines.toCharArray();
HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();
defaultFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);
defaultFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
for (int i = 0; i < nameChar.length; i++) {
if (nameChar[i] > 128) {
try {
// 取得当前汉字的所有全拼
String[] str = PinyinHelper.toHanyuPinyinStringArray(
nameChar[i], defaultFormat);
if (str != null) {
for (int j = 0; j < str.length; j++) {
// 取首字母
pinyinName.append(str[j].charAt(0));
if (j != str.length - 1) {
pinyinName.append(",");
}
}
}
// else {
// pinyinName.append(nameChar[i]);
// }
} catch (BadHanyuPinyinOutputFormatCombination e) {
e.printStackTrace();
}
} else {
pinyinName.append(nameChar[i]);
}
pinyinName.append(" ");
}
// return pinyinName.toString();
return parseTheChineseByObject(discountTheChinese(pinyinName.toString()));
}
/**
* 汉字转换位汉语全拼,英文字符不变,特殊字符丢失
* 支持多音字,生成方式如(重当参:zhongdangcen,zhongdangcan,chongdangcen
* ,chongdangshen,zhongdangshen,chongdangcan)
*
* @param chines
* 汉字
* @return 拼音
*/
public static String converterToSpell(String chines) {
StringBuffer pinyinName = new StringBuffer();
char[] nameChar = chines.toCharArray();
HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();
defaultFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);
defaultFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
for (int i = 0; i < nameChar.length; i++) {
if (nameChar[i] > 128) {
try {
// 取得当前汉字的所有全拼
String[] str = PinyinHelper.toHanyuPinyinStringArray(
nameChar[i], defaultFormat);
if (str != null) {
for (int j = 0; j < str.length; j++) {
pinyinName.append(str[j]);
if (j != str.length - 1) {
pinyinName.append(",");
}
}
}
} catch (BadHanyuPinyinOutputFormatCombination e) {
e.printStackTrace();
}
} else {
pinyinName.append(nameChar[i]);
}
pinyinName.append(" ");
}
// return pinyinName.toString();
return parseTheChineseByObject(discountTheChinese(pinyinName.toString()));
}
/**
* 去除多音字重复数据
*
* @param theStr
* @return
*/
private static List<Map<String, Integer>> discountTheChinese(String theStr) {
// 去除重复拼音后的拼音列表
List<Map<String, Integer>> mapList = new ArrayList<>();
// 用于处理每个字的多音字,去掉重复
Map<String, Integer> onlyOne;
String[] firsts = theStr.split(" ");
// 读出每个汉字的拼音
for (String str : firsts) {
onlyOne = new Hashtable<>();
String[] china = str.split(",");
// 多音字处理
for (String s : china) {
Integer count = onlyOne.get(s);
if (count == null) {
onlyOne.put(s, new Integer(1));
} else {
onlyOne.remove(s);
count++;
onlyOne.put(s, count);
}
}
mapList.add(onlyOne);
}
return mapList;
}
/**
* 解析并组合拼音,对象合并方案(推荐使用)
*
* @return
*/
private static String parseTheChineseByObject(
List<Map<String, Integer>> list) {
Map<String, Integer> first = null; // 用于统计每一次,集合组合数据
// 遍历每一组集合
for (int i = 0; i < list.size(); i++) {
// 每一组集合与上一次组合的Map
Map<String, Integer> temp = new Hashtable<>();
// 第一次循环,first为空
if (first != null) {
// 取出上次组合与此次集合的字符,并保存
for (String s : first.keySet()) {
for (String s1 : list.get(i).keySet()) {
String str = s + s1;
temp.put(str, 1);
}
}
// 清理上一次组合数据
if (temp != null && temp.size() > 0) {
first.clear();
}
} else {
for (String s : list.get(i).keySet()) {
String str = s;
temp.put(str, 1);
}
}
// 保存组合数据以便下次循环使用
if (temp != null && temp.size() > 0) {
first = temp;
}
}
String returnStr = "";
if (first != null) {
// 遍历取出组合字符串
for (String str : first.keySet()) {
returnStr += (str + ",");
}
}
if (returnStr.length() > 0) {
returnStr = returnStr.substring(0, returnStr.length() - 1);
}
return returnStr;
}
}
就介绍到这里吧,代码还是比较多,就不全部贴出来了,有兴趣的朋友可以下载完整代码,欢迎star。