26字母快速索引

Paste_Image.png

左边列表,右边索引条

  1. 对快速索引效果进行模块划分,分为左右2部分,每部分的功能如下:
    o 右边字母View,需要绘制26个字母,并且能够获取当前所触摸的字母;
    o 左边listview,需要对条目数据按照首字母进行分割,并且根据当前所触摸的字母将对应的条目放置到顶端;
    下载拼音排序jar包

直接上码

public class QuickIndexBar extends View {
    private static final String TAG = "QuickIndexBar";
    private String[] letterArr = {"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 paint;
    public QuickIndexBar(Context context) {
        this(context, null);
    }

    public QuickIndexBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public QuickIndexBar(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);//设置抗锯齿
        paint.setColor(Color.WHITE);
        int size = getResources().getDimensionPixelSize(R.dimen.qib_text_size);
        paint.setTextSize(size);
        //画笔绘制文字默认的起点是文字的左下角,android系统绘制文字是按照基准线来绘制的
        paint.setTextAlign(Paint.Align.CENTER);//center是文字的底边的中心

    }

    float cellHeight;//格子的高度
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        cellHeight = getMeasuredHeight()*1f/letterArr.length;
    }

    @Override
    protected void onDraw(Canvas canvas) {

        //遍历数组绘制26个字母
        for (int i = 0; i < letterArr.length; i++) {
            String text = letterArr[i];
            float x = getMeasuredWidth()/2;
            //y:格子高度一半 + 文字高度一半 + i*格子高
            float y = cellHeight/2 + getTextHeight(text)/2 + i*cellHeight;

            paint.setColor(i==lastIndex?Color.BLACK:Color.WHITE);

            canvas.drawText(text,x,y,paint);
        }

    }

    int lastIndex = -1;//记录上次字母的索引
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
            case MotionEvent.ACTION_MOVE:
                int index = (int) (event.getY() / cellHeight);
                if(lastIndex!=index){

                    //对索引进行安全性的判断
                    if(index>=0 && index<letterArr.length){
                        String letter = letterArr[index];
                        if(listener!=null){
                            listener.onLetterChange(letter);
                        }
                    }

                }
                lastIndex = index;
                break;
            case MotionEvent.ACTION_UP:
                //抬起手指重置
                lastIndex = -1;
                if(listener!=null){
                    listener.onRelease();
                }
                break;
        }

        //刷新重绘
        invalidate();

        return true;
    }

    /**
     * 获取文字的高度
     * @param text
     * @return
     */
    private int getTextHeight(String text) {
        Rect bounds = new Rect();
        //方法一执行完,bounds就有值了
        paint.getTextBounds(text,0,text.length(),bounds);
        return bounds.height();
    }
    private OnLetterChangeListener listener;
    public void setOnLetterChangeListener(OnLetterChangeListener listener){
        this.listener = listener;
    }
    public interface OnLetterChangeListener{
        void onLetterChange(String letter);
        void onRelease();
    }
}

布局

<?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.kailing.quickindex99.MainActivity">

    <ListView
        android:id="@+id/listview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <com.kailing.quickindex99.QuickIndexBar
        android:layout_alignParentRight="true"
        android:layout_width="30dp"
        android:id="@+id/quickIndexBar"
        android:background="#ff0000"
        android:layout_height="match_parent" />

    <TextView
        android:id="@+id/tv_letter"
        android:gravity="center"
        android:textSize="45sp"
        android:text="A"
        android:visibility="gone"
        android:layout_centerInParent="true"
        android:textColor="#fff"
        android:background="@drawable/bg"
        android:layout_width="110dp"
        android:layout_height="110dp"
         />

</RelativeLayout>

填充数据的bean类,使用pinyin排序

public class Friend implements Comparable<Friend>{
    public String name;
    public String pinyin;

    public Friend(String name) {
        this.name = name;
        pinyin = PinYinUtil.getPinYin(name);
    }

    @Override
    public int compareTo(@NonNull Friend o) {
        return this.pinyin.compareTo(o.pinyin);
    }
}

mainactivity

public class MainActivity extends AppCompatActivity {
    private static final String TAG = "MainActivity";
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        quickIndexBar.setOnLetterChangeListener(new QuickIndexBar.OnLetterChangeListener() {
            @Override
            public void onLetterChange(String letter) {
                //从集合中找到首字母为letter的位置,然后将其置顶
                for (int i = 0; i < friends.size(); i++) {
                    String s = friends.get(i).pinyin.charAt(0) + "";
                    if (s.equals(letter)) {
                        //说明找到了,将其置顶
                        listview.setSelection(i);
                        //找到就中断
                        break;
                    }
                }

                //显示当前触摸的字母
                showLetter(letter);
            }
            @Override
            public void onRelease() {
                tvLetter.setVisibility(View.GONE);
            }
        });

        //设置数据
        prepareData();
        //排序
        Collections.sort(friends);

        //设置adapter
        listview.setAdapter(new FriendAdapter(friends));
    }

    /**
     * 显示当前触摸的字母
     * @param letter
     */
    private void showLetter(String letter) {
        tvLetter.setText(letter);
        tvLetter.setVisibility(View.VISIBLE);
    }

    private void prepareData() {
        friends.add(new Friend("李伟"));
        friends.add(new Friend("张三"));
        friends.add(new Friend("阿三"));
        friends.add(new Friend("阿四"));
        friends.add(new Friend("段誉"));
        friends.add(new Friend("段正淳"));
        friends.add(new Friend("张三丰"));
        friends.add(new Friend("王二"));
        friends.add(new Friend("王二b"));
        friends.add(new Friend("赵四"));
        friends.add(new Friend("杨坤"));
        friends.add(new Friend("赵子龙"));
        friends.add(new Friend("杨坤1"));
        friends.add(new Friend("李伟1"));
        friends.add(new Friend("宋江"));
        friends.add(new Friend("宋江1"));
        friends.add(new Friend("李伟3"));
    }
}

adapter

public class FriendAdapter extends BaseAdapter {
    ArrayList<Friend> friends;

    public FriendAdapter(ArrayList<Friend> friends) {
        this.friends = friends;
    }

    @Override
    public int getCount() {
        return friends.size();
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        FriendHolder holder = null;
        if (convertView == null) {
            convertView = View.inflate(parent.getContext(), R.layout.adapter_friend, null);
            holder = new FriendHolder(convertView);
            convertView.setTag(holder);
        }else {
            holder = (FriendHolder) convertView.getTag();
        }

        //绑定数据
        Friend friend = friends.get(position);

        String letter = friend.pinyin.charAt(0)+"";

        //获取上一个条目的首字母
        if(position>0){
            String lastLetter = friends.get(position-1).pinyin.charAt(0)+"";
            if(letter.equals(lastLetter)){
                //如果和上一个首字母相同,则隐藏当前的字母TextView
                holder.tvLetter.setVisibility(View.GONE);
            }else {
                //如果不一样,就显示
                holder.tvLetter.setVisibility(View.VISIBLE);
                holder.tvLetter.setText(letter);
            }
        }else {
            //说明当前是第0条
            holder.tvLetter.setVisibility(View.VISIBLE);
            holder.tvLetter.setText(letter);
        }

        holder.tvName.setText(friend.name);

        return convertView;
    }

    static class FriendHolder {
        @BindView(R.id.tv_letter)
        TextView tvLetter;
        @BindView(R.id.tv_name)
        TextView tvName;

        FriendHolder(View view) {
            ButterKnife.bind(this, view);
        }
    }
}

pinyinutils

public class PinYinUtil {
    /**
     * 获取指定汉字的拼音
     * @param chinese
     * @return
     */
    public static String getPinYin(String chinese){
        if(TextUtils.isEmpty(chinese))return null;

        //控制输出的拼音的格式,比如字母的大小写,需不需声调
        HanyuPinyinOutputFormat format = new HanyuPinyinOutputFormat();
        format.setCaseType(HanyuPinyinCaseType.UPPERCASE);//大写字母
        format.setToneType(HanyuPinyinToneType.WITHOUT_TONE);//不要声调

        //由于只支持单个汉字的获取,因此要将字符串转为字符数组,对每个汉字获取,最后拼接
        char[] charArr = chinese.toCharArray();
        StringBuilder builder = new StringBuilder();

        for (int i = 0; i < charArr.length; i++) {
            char c = charArr[i];
            //1.过滤空格,选择忽略空格
            if(Character.isWhitespace(c)){
                continue;
            }

            //2.过滤非中文字符:  &&a齐*天*大*圣a&&
            //简单判断:由于中文在utf8中占据3个字节(-128~127),所以中文肯定大于127
            if(c > 127){
                //说明有可能是中文,获取它的拼音
                try {
                    //由于多音字的存在,比如: 单:[dan, chan, shan]
                    String[] pinyinArr = PinyinHelper.toHanyuPinyinStringArray(c, format);
                    if(pinyinArr!=null){
                        //此处,我们取第0个,因为我们无能为力了。我们目前木办法去精准判断该字的读音。
                        //如果要实现精准读音,需要这样几个技术配合:分词算法,字库培养,服务器api支持.
                        builder.append(pinyinArr[0]);
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                    //说明获取失败,不用管
                }
            }else {
                //肯定不是中文,一般是那些因为字母:abcd,直接拼接即可
                builder.append(c);
            }

        }
        return builder.toString();
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容