一、效果图展示
二、功能特点
1.好友排序:按照拼音顺序对好友进行排序,兼容英文数字符号等
2.字母索引:右侧字母导航条,既可拖动也可点击,联动ListView滑动
三、实现
接下来就让我们一步步显示这个效果吧。
1.右侧字母索引的导航条
这个我们可以在网上找到很多类似的,你大可找一个自己喜欢的甚至自己写一个出来,这里我在网上找了一个带波浪效果的,看起来比较炫酷一点吧。
这是原地址:https://github.com/AlexLiuSheng/AnimSideBar
然后我把它导入到了我们项目中并修改了部分代码,以下是我项目中的SideBar.Java
- package com.afei.indexlistview;
- import android.content.Context;
- import android.content.res.TypedArray;
- import android.graphics.Canvas;
- import android.graphics.Paint;
- import android.util.AttributeSet;
- import android.view.MotionEvent;
- import android.widget.TextView;
- public class SideBar extends TextView {
- private String[] letters = new String[]{“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”, “#”};
- private Paint textPaint;
- private Paint bigTextPaint;
- private Paint scaleTextPaint;
- private Canvas canvas;
- private int itemH;
- private int w;
- private int h;
- /**
- * 普通情况下字体大小
- */
- float singleTextH;
- /**
- * 缩放离原始的宽度
- */
- private float scaleWidth;
- /**
- * 滑动的Y
- */
- private float eventY = 0;
- /**
- * 缩放的倍数
- */
- private int scaleSize = 1;
- /**
- * 缩放个数item,即开口大小
- */
- private int scaleItemCount = 6;
- private ISideBarSelectCallBack callBack;
- public SideBar(Context context) {
- this(context, );
- }
- public SideBar(Context context, AttributeSet attrs) {
- this(context, attrs, 0);
- }
- public SideBar(Context context, AttributeSet attrs, int defStyleAttr) {
- super(context, attrs, defStyleAttr);
- init(attrs);
- }
- private void init(AttributeSet attrs) {
- if (attrs != ) {
- TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.SideBar);
- scaleSize = ta.getInteger(R.styleable.SideBar_scaleSize, 1);
- scaleItemCount = ta.getInteger(R.styleable.SideBar_scaleItemCount, 6);
- scaleWidth = ta.getDimensionPixelSize(R.styleable.SideBar_scaleWidth, dp(100));
- ta.recycle();
- }
- textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- textPaint.setColor(getCurrentTextColor());
- textPaint.setTextSize(getTextSize());
- textPaint.setTextAlign(Paint.Align.CENTER);
- bigTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- bigTextPaint.setColor(getCurrentTextColor());
- bigTextPaint.setTextSize(getTextSize() * (scaleSize + 3));
- bigTextPaint.setTextAlign(Paint.Align.CENTER);
- scaleTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
- scaleTextPaint.setColor(getCurrentTextColor());
- scaleTextPaint.setTextSize(getTextSize() * (scaleSize + 1));
- scaleTextPaint.setTextAlign(Paint.Align.CENTER);
- }
- public void setDataResource(String[] data) {
- letters = data;
- invalidate();
- }
- public void setOnStrSelectCallBack(ISideBarSelectCallBack callBack) {
- this.callBack = callBack;
- }
- /**
- * 设置字体缩放比例
- *
- * @param scale
- */
- public void setScaleSize(int scale) {
- scaleSize = scale;
- invalidate();
- }
- /**
- * 设置缩放字体的个数,即开口大小
- *
- * @param scaleItemCount
- */
- public void setScaleItemCount(int scaleItemCount) {
- this.scaleItemCount = scaleItemCount;
- invalidate();
- }
- private int dp(int px) {
- final float scale = getContext().getResources().getDisplayMetrics().density;
- return (int) (px * scale + 0.5f);
- }
- @Override
- public boolean onTouchEvent(MotionEvent event) {
- switch (event.getAction()) {
- case MotionEvent.ACTION_DOWN:
- case MotionEvent.ACTION_MOVE:
- if (event.getX() > (w - getPaddingRight() - singleTextH - 10)) {
- eventY = event.getY();
- invalidate();
- return true;
- } else {
- eventY = 0;
- invalidate();
- break;
- }
- case MotionEvent.ACTION_CANCEL:
- eventY = 0;
- invalidate();
- return true;
- case MotionEvent.ACTION_UP:
- if (event.getX() > (w - getPaddingRight() - singleTextH - 10)) {
- eventY = 0;
- invalidate();
- return true;
- } else
- break;
- }
- return super.onTouchEvent(event);
- }
- @Override
- protected void onDraw(Canvas canvas) {
- this.canvas = canvas;
- DrawView(eventY);
- }
- private void DrawView(float y) {
- int currentSelectIndex = -1;
- if (y != 0) {
- for (int i = 0; i < letters.length; i++) {
- float currentItemY = itemH * i;
- float nextItemY = itemH * (i + 1);
- if (y >= currentItemY && y < nextItemY) {
- currentSelectIndex = i;
- if (callBack != ) {
- callBack.onSelectStr(currentSelectIndex, letters[i]);
- }
- //画大的字母
- Paint.FontMetrics fontMetrics = bigTextPaint.getFontMetrics();
- float bigTextSize = fontMetrics.descent - fontMetrics.ascent;
- canvas.drawText(letters[i], w - getPaddingRight() - scaleWidth - bigTextSize, singleTextH + itemH * i, bigTextPaint);
- }
- }
- }
- drawLetters(y, currentSelectIndex);
- }
- private void drawLetters(float y, int index) {
- //第一次进来没有缩放情况,默认画原图
- if (index == -1) {
- w = getMeasuredWidth();
- h = getMeasuredHeight();
- itemH = h / letters.length;
- Paint.FontMetrics fontMetrics = textPaint.getFontMetrics();
- singleTextH = fontMetrics.descent - fontMetrics.ascent;
- for (int i = 0; i < letters.length; i++) {
- canvas.drawText(letters[i], w - getPaddingRight(), singleTextH + itemH * i, textPaint);
- }
- //触摸的时候画缩放图
- } else {
- //遍历所有字母
- for (int i = 0; i < letters.length; i++) {
- //要画的字母的起始Y坐标
- float currentItemToDrawY = singleTextH + itemH * i;
- float centerItemToDrawY;
- if (index < i)
- centerItemToDrawY = singleTextH + itemH * (index + scaleItemCount);
- else
- centerItemToDrawY = singleTextH + itemH * (index - scaleItemCount);
- float delta = 1 - Math.abs((y - currentItemToDrawY) / (centerItemToDrawY - currentItemToDrawY));
- float maxRightX = w - getPaddingRight();
- //如果大于0,表明在y坐标上方
- scaleTextPaint.setTextSize(getTextSize() + getTextSize() * delta);
- float drawX = maxRightX - scaleWidth * delta;
- //超出边界直接花在边界上
- if (drawX > maxRightX)
- canvas.drawText(letters[i], maxRightX, singleTextH + itemH * i, textPaint);
- else
- canvas.drawText(letters[i], drawX, singleTextH + itemH * i, scaleTextPaint);
- }
- }
- }
- public interface ISideBarSelectCallBack {
- void onSelectStr(int index, String selectStr);
- }
- }
然后还有3个自定义的属性
- <?xml version=“1.0” encoding=“utf-8”?>
- <resources>
- <declare-styleable name=“SideBar”>
- <attr name=“scaleSize” format=“integer”/>
- <attr name=“scaleItemCount” format=“integer”/>
- <attr name=“scaleWidth” format=“dimension”/>
- </declare-styleable>
- </resources>
2.汉字转拼音工具类
我们知道,java中是没有提供接口和方法让我们直接将汉字转成拼音的。
这里,可以参见我的另一篇博客:Java/Android中汉字转拼音的两种方法,优劣比较
然后在此我选择了使用第三方jar包的方式,因为它体积不大而且更加准确。以下是我的Cn2Spell.java
- package com.afei.indexlistview;
- import net.sourceforge.pinyin4j.PinyinHelper;
- import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType;
- import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat;
- import net.sourceforge.pinyin4j.format.HanyuPinyinToneType;
- /**
- * 汉字转换位汉语拼音,英文字符不变
- */
- public class Cn2Spell {
- public static StringBuffer sb = new StringBuffer();
- /**
- * 获取汉字字符串的首字母,英文字符不变
- * 例如:阿飞→af
- */
- public static String getPinYinHeadChar(String chines) {
- sb.setLength(0);
- char[] chars = chines.toCharArray();
- HanyuPinyinOutputFormat defaultFormat = new HanyuPinyinOutputFormat();
- defaultFormat.setCaseType(HanyuPinyinCaseType.LOWERCASE);
- defaultFormat.setToneType(HanyuPinyinToneType.WITHOUT_TONE);
- for (int i = 0; i < chars.length; i++) {
- if (chars[i] > 128) {
- try {
- sb.append(PinyinHelper.toHanyuPinyinStringArray(chars[i], defaultFormat)[0].charAt(0));
- } catch (Exception e) {
- e.printStackTrace();
- }
- } else {
- sb.append(chars[i]);
- }
- }
- return sb.toString();
- }
- /**
- * 获取汉字字符串的第一个字母
- */
- public static String getPinYinFirstLetter(String str) {
- sb.setLength(0);
- char c = str.charAt(0);
- String[] pinyinArray = PinyinHelper.toHanyuPinyinStringArray(c);
- if (pinyinArray != ) {
- sb.append(pinyinArray[0].charAt(0));
- } else {
- sb.append(c);
- }
- return sb.toString();
- }
- /**
- * 获取汉字字符串的汉语拼音,英文字符不变
- */
- public static String getPinYin(String chines) {
- sb.setLength(0);
- 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 {
- sb.append(PinyinHelper.toHanyuPinyinStringArray(nameChar[i], defaultFormat)[0]);
- } catch (Exception e) {
- e.printStackTrace();
- }
- } else {
- sb.append(nameChar[i]);
- }
- }
- return sb.toString();
- }
- }
3.让你的好友可以根据拼音来排序
我们选择实现comparable接口,并重写comparaTo方法。以下是我的User.java
- package com.afei.indexlistview;
- /**
- * Created by Administrator on 2016/5/25.
- */
- public class User implements Comparable<User> {
- private String name; // 姓名
- private String pinyin; // 姓名对应的拼音
- private String firstLetter; // 拼音的首字母
- public User() {
- }
- public User(String name) {
- this.name = name;
- pinyin = Cn2Spell.getPinYin(name); // 根据姓名获取拼音
- firstLetter = pinyin.substring(0, 1).toUpperCase(); // 获取拼音首字母并转成大写
- if (!firstLetter.matches(“[A-Z]”)) { // 如果不在A-Z中则默认为“#”
- firstLetter = ”#”;
- }
- }
- public String getName() {
- return name;
- }
- public String getPinyin() {
- return pinyin;
- }
- public String getFirstLetter() {
- return firstLetter;
- }
- @Override
- public int compareTo(User another) {
- if (firstLetter.equals(“#”) && !another.getFirstLetter().equals(“#”)) {
- return 1;
- } else if (!firstLetter.equals(“#”) && another.getFirstLetter().equals(“#”)){
- return -1;
- } else {
- return pinyin.compareToIgnoreCase(another.getPinyin());
- }
- }
- }
原理很简单,就是先根据首字母判断,首字母为“#”都放在最后,都为“#”或者都是字母时才根据拼音来比较排序
4.万事俱备只欠东风,接下来就是组装这些东西了
activity_main.xml布局文件
- <?xml version=“1.0” encoding=“utf-8”?>
- <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=“com.afei.indexlistview.MainActivity”>
- <ListView
- android:id=“@+id/listView”
- android:layout_width=“match_parent”
- android:layout_height=“match_parent” />
- <com.afei.indexlistview.SideBar
- android:id=“@+id/side_bar”
- android:layout_width=“match_parent”
- android:layout_height=“match_parent”
- android:layout_alignParentRight=“true”
- android:paddingRight=“10dp”
- android:textColor=“@color/colorAccent”
- android:textSize=“15sp” />
- </RelativeLayout>
MainActivity.java
- package com.afei.indexlistview;
- import android.support.v7.app.AppCompatActivity;
- import android.os.Bundle;
- import android.widget.ListView;
- import java.util.ArrayList;
- import java.util.Collections;
- public class MainActivity extends AppCompatActivity {
- private ListView listView;
- private SideBar sideBar;
- private ArrayList<User> list;
- @Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.activity_main);
- initView();
- initData();
- }
- private void initView() {
- listView = (ListView) findViewById(R.id.listView);
- sideBar = (SideBar) findViewById(R.id.side_bar);
- sideBar.setOnStrSelectCallBack(new SideBar.ISideBarSelectCallBack() {
- @Override
- public void onSelectStr(int index, String selectStr) {
- for (int i = 0; i < list.size(); i++) {
- if (selectStr.equalsIgnoreCase(list.get(i).getFirstLetter())) {
- listView.setSelection(i); // 选择到首字母出现的位置
- return;
- }
- }
- }
- });
- }
- private void initData() {
- list = new ArrayList<>();
- list.add(new User(“亳州”)); // 亳[bó]属于不常见的二级汉字
- list.add(new User(“大娃”));
- list.add(new User(“二娃”));
- list.add(new User(“三娃”));
- list.add(new User(“四娃”));
- list.add(new User(“五娃”));
- list.add(new User(“六娃”));
- list.add(new User(“七娃”));
- list.add(new User(“喜羊羊”));
- list.add(new User(“美羊羊”));
- list.add(new User(“懒羊羊”));
- list.add(new User(“沸羊羊”));
- list.add(new User(“暖羊羊”));
- list.add(new User(“慢羊羊”));
- list.add(new User(“灰太狼”));
- list.add(new User(“红太狼”));
- list.add(new User(“孙悟空”));
- list.add(new User(“黑猫警长”));
- list.add(new User(“舒克”));
- list.add(new User(“贝塔”));
- list.add(new User(“海尔”));
- list.add(new User(“阿凡提”));
- list.add(new User(“邋遢大王”));
- list.add(new User(“哪吒”));
- list.add(new User(“没头脑”));
- list.add(new User(“不高兴”));
- list.add(new User(“蓝皮鼠”));
- list.add(new User(“大脸猫”));
- list.add(new User(“大头儿子”));
- list.add(new User(“小头爸爸”));
- list.add(new User(“蓝猫”));
- list.add(new User(“淘气”));
- list.add(new User(“叶峰”));
- list.add(new User(“楚天歌”));
- list.add(new User(“江流儿”));
- list.add(new User(“Tom”));
- list.add(new User(“Jerry”));
- list.add(new User(“12345”));
- list.add(new User(“54321”));
- list.add(new User(“_(:з」∠)_”));
- list.add(new User(“……%¥#¥%#”));
- Collections.sort(list); // 对list进行排序,需要让User实现Comparable接口重写compareTo方法
- SortAdapter adapter = new SortAdapter(this, list);
- listView.setAdapter(adapter);
- }
- }
这里负责初始化UI和数据,并且实现滑动或选择字母索引时的回调接口。既然用到了ListView,我们就还需要一个适配器。
SortAdapter.java
- package com.afei.indexlistview;
- import android.content.Context;
- import android.view.LayoutInflater;
- import android.view.View;
- import android.view.ViewGroup;
- import android.widget.BaseAdapter;
- import android.widget.TextView;
- import java.util.List;
- public class SortAdapter extends BaseAdapter{
- private List<User> list = ;
- private Context mContext;
- public SortAdapter(Context mContext, List<User> list) {
- this.mContext = mContext;
- this.list = list;
- }
- public int getCount() {
- return this.list.size();
- }
- public Object getItem(int position) {
- return list.get(position);
- }
- public long getItemId(int position) {
- return position;
- }
- public View getView(final int position, View view, ViewGroup arg2) {
- ViewHolder viewHolder;
- final User user = list.get(position);
- if (view == ) {
- viewHolder = new ViewHolder();
- view = LayoutInflater.from(mContext).inflate(R.layout.item, );
- viewHolder.name = (TextView) view.findViewById(R.id.name);
- viewHolder.catalog = (TextView) view.findViewById(R.id.catalog);
- view.setTag(viewHolder);
- } else {
- viewHolder = (ViewHolder) view.getTag();
- }
- //根据position获取首字母作为目录catalog
- String catalog = list.get(position).getFirstLetter();
- //如果当前位置等于该分类首字母的Char的位置 ,则认为是第一次出现
- if(position == getPositionForSection(catalog)){
- viewHolder.catalog.setVisibility(View.VISIBLE);
- viewHolder.catalog.setText(user.getFirstLetter().toUpperCase());
- }else{
- viewHolder.catalog.setVisibility(View.GONE);
- }
- viewHolder.name.setText(this.list.get(position).getName());
- return view;
- }
- final static class ViewHolder {
- TextView catalog;
- TextView name;
- }
- /**
- * 获取catalog首次出现位置
- */
- public int getPositionForSection(String catalog) {
- for (int i = 0; i < getCount(); i++) {
- String sortStr = list.get(i).getFirstLetter();
- if (catalog.equalsIgnoreCase(sortStr)) {
- return i;
- }
- }
- return -1;
- }
- }
适配器还用到了一个布局,即
item.xml
- <?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=“wrap_content”
- android:gravity=“center_vertical”
- android:orientation=“vertical” >
- <TextView
- android:id=“@+id/catalog”
- android:layout_width=“match_parent”
- android:layout_height=“match_parent”
- android:background=“#E0E0E0”
- android:textColor=“#454545”
- android:textSize=“20sp”
- android:padding=“10dp”/>
- <TextView
- android:id=“@+id/name”
- android:layout_width=“match_parent”
- android:layout_height=“match_parent”
- android:gravity=“center_vertical”
- android:textColor=“#336598”
- android:textSize=“16sp”
- android:padding=“10dp”/>
- </LinearLayout>
布局有两部分,一个是目录,即A,B,C,D这样的索引,仅当该目录下的第一项出现时才显示;一个则是姓名