一迂求、效果圖展示

a.gif

二切揭、功能特點(diǎn)

1.好友排序：按照拼音順序?qū)糜堰M(jìn)行排序，兼容英文數(shù)字符號(hào)等

2.字母索引：右側(cè)字母導(dǎo)航條锁摔，既可拖動(dòng)也可點(diǎn)擊廓旬，聯(lián)動(dòng)ListView滑動(dòng)

三、實(shí)現(xiàn)

接下來(lái)就讓我們一步步顯示這個(gè)效果吧。

1.右側(cè)字母索引的導(dǎo)航條

這個(gè)我們可以在網(wǎng)上找到很多類似的孕豹，你大可找一個(gè)自己喜歡的甚至自己寫(xiě)一個(gè)出來(lái)涩盾，這里我在網(wǎng)上找了一個(gè)帶波浪效果的，看起來(lái)比較炫酷一點(diǎn)吧励背。

這是原地址：https://github.com/AlexLiuSheng/AnimSideBar

然后我把它導(dǎo)入到了我們項(xiàng)目中并修改了部分代碼春霍，以下是我項(xiàng)目中的

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;    /**     * 滑動(dòng)的Y     */    private float eventY = 0;    /**     * 縮放的倍數(shù)     */    private int scaleSize = 1;    /**     * 縮放個(gè)數(shù)item，即開(kāi)口大小     */    private int scaleItemCount = 6;    private ISideBarSelectCallBack callBack;     public SideBar(Context context) {        this(context, null);    }     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 != null) {            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;    }     /**     * 設(shè)置字體縮放比例     *     * @param scale     */    public void setScaleSize(int scale) {        scaleSize = scale;        invalidate();    }     /**     * 設(shè)置縮放字體的個(gè)數(shù)叶眉，即開(kāi)口大小     *     * @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 != null) {                        callBack.onSelectStr(currentSelectIndex, letters[i]);                    }                    //畫(huà)大的字母                    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) {        //第一次進(jìn)來(lái)沒(méi)有縮放情況址儒，默認(rèn)畫(huà)原圖        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);            }            //觸摸的時(shí)候畫(huà)縮放圖        } else {            //遍歷所有字母            for (int i = 0; i < letters.length; i++) {                //要畫(huà)的字母的起始Y坐標(biāo)                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坐標(biāo)上方                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個(gè)自定義的屬性

<?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.漢字轉(zhuǎn)拼音工具類

我們知道衅疙，java中是沒(méi)有提供接口和方法讓我們直接將漢字轉(zhuǎn)成拼音的莲趣。

這里，可以參見(jiàn)我的另一篇博客：Java/Android中漢字轉(zhuǎn)拼音的兩種方法饱溢，優(yōu)劣比較

然后在此我選擇了使用第三方j(luò)ar包的方式喧伞，因?yàn)樗w積不大而且更加準(zhǔn)確。以下是我的

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; /** * 漢字轉(zhuǎn)換位漢語(yǔ)拼音绩郎，英文字符不變 */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();    }     /**     * 獲取漢字字符串的第一個(gè)字母     */    public static String getPinYinFirstLetter(String str) {        sb.setLength(0);        char c = str.charAt(0);        String[] pinyinArray = PinyinHelper.toHanyuPinyinStringArray(c);        if (pinyinArray != null) {            sb.append(pinyinArray[0].charAt(0));        } else {            sb.append(c);        }        return sb.toString();    }     /**     * 獲取漢字字符串的漢語(yǔ)拼音，英文字符不變     */    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.讓你的好友可以根據(jù)拼音來(lái)排序

我們選擇實(shí)現(xiàn)comparable接口肋杖，并重寫(xiě)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; // 姓名對(duì)應(yīng)的拼音    private String firstLetter; // 拼音的首字母     public User() {    }     public User(String name) {        this.name = name;        pinyin = Cn2Spell.getPinYin(name); // 根據(jù)姓名獲取拼音        firstLetter = pinyin.substring(0, 1).toUpperCase(); // 獲取拼音首字母并轉(zhuǎn)成大寫(xiě)        if (!firstLetter.matches("[A-Z]")) { // 如果不在A-Z中則默認(rèn)為“#”            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());        }    }}

原理很簡(jiǎn)單，就是先根據(jù)首字母判斷状植，首字母為“#”都放在最后浊竟，都為“#”或者都是字母時(shí)才根據(jù)拼音來(lái)比較排序

4.萬(wàn)事俱備只欠東風(fēng)，接下來(lái)就是組裝這些東西了

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); // 選擇到首字母出現(xiàn)的位置                        return;                    }                }            }        });    }     private void initData() {        list = new ArrayList<>();        list.add(new User("亳州")); // 亳[bó]屬于不常見(jiàn)的二級(jí)漢字        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("黑貓警長(zhǎng)"));        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("沒(méi)頭腦"));        list.add(new User("不高興"));        list.add(new User("藍(lán)皮鼠"));        list.add(new User("大臉貓"));        list.add(new User("大頭兒子"));        list.add(new User("小頭爸爸"));        list.add(new User("藍(lán)貓"));        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); // 對(duì)list進(jìn)行排序，需要讓User實(shí)現(xiàn)Comparable接口重寫(xiě)compareTo方法        SortAdapter adapter = new SortAdapter(this, list);        listView.setAdapter(adapter);    }}

這里負(fù)責(zé)初始化UI和數(shù)據(jù)，并且實(shí)現(xiàn)滑動(dòng)或選擇字母索引時(shí)的回調(diào)接口垃瞧。既然用到了ListView吨娜，我們就還需要一個(gè)適配器。

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 = null;    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 == null) {            viewHolder = new ViewHolder();            view = LayoutInflater.from(mContext).inflate(R.layout.item, null);            viewHolder.name = (TextView) view.findViewById(R.id.name);            viewHolder.catalog = (TextView) view.findViewById(R.id.catalog);            view.setTag(viewHolder);        } else {            viewHolder = (ViewHolder) view.getTag();        }         //根據(jù)position獲取首字母作為目錄catalog        String catalog = list.get(position).getFirstLetter();         //如果當(dāng)前位置等于該分類首字母的Char的位置 ，則認(rèn)為是第一次出現(xiàn)        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首次出現(xiàn)位置     */    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;    } }

適配器還用到了一個(gè)布局，即

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>

布局有兩部分，一個(gè)是目錄徘郭，即A,B,C,D這樣的索引，僅當(dāng)該目錄下的第一項(xiàng)出現(xiàn)時(shí)才顯示丧肴；一個(gè)則是姓名

四残揉、項(xiàng)目地址

Git地址：http://git.oschina.net/afei_/IndexListView

@希望能幫到大家！