[Android精品源码] Android 仿美团网,探索ListView的A-Z字母排序功能实现选择城市

来源：互联网发布：qq空间怎么做淘宝客编辑：程序博客网时间：2024/04/28 15:30

Material Design中文版Code4APPPHP100UI4APP

开启辅助访问设为首页收藏本站快捷导航切换到宽版切换风格

石刚 | |我的 |签到打卡 |设置 |消息 |提醒(2) |退出

积分: 36 |用户组: 初级码农

首页
安卓源码
开发工具
技术博客
求职招聘
VIP
QQ群
线下活动
任务
创业生态
帮助

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户»首页›安卓巴士-安卓论坛›Android精品源码›Android 仿美团网,探索ListView的A-Z字母排序功能实现选 ...

1234567 / 7 页下一页

返回列表

查看: 157|回复: 33

[Android精品源码] Android 仿美团网,探索ListView的A-Z字母排序功能实现选择城市

[复制链接]

MrlLee

成长值: 1020

2338

主题

2631

帖子

2万

安币

管理员

Rank: 9 Rank: 9 Rank: 9

积分: 3434

签到达人活跃会员推广达人优秀版主元老勋章明星会员

发消息

电梯直达

楼主

发表于 3 天前 | 只看该作者 |只看大图回帖奖励

Android精品源码封面图:

Android 仿美团网,探索ListView的A-Z字母排序功能实现选择城市记得在我刚开始接触到美团网的时候就对美团网这个城市定位、选择城市功能很感兴趣，觉得它做得很棒。有如下几个点：一：实现ListView的A-Z字母排序功能二：根据输入框的输入值改变来过滤搜索结果，如果输入框里面的值为空，更新为原来的列表，否则为过滤数据列表三：汉字转成拼音的功能，很多时候实现联系人或者城市列表等实现A-Z的排序功能，我们可以直接从数据库中获取他的汉字拼音，而对于一般的数据，我们怎么实现A-Z的排序，这里我使用了PinYin4j.jar将汉字转换为拼音.按照惯例先来看一下最终效果图：

接下来分析下整个功能模块的布局结构：（1）首先一个带删除按钮的EditText，我们在输入框中输入我们查找的城市可以自动过滤出最终的结果，当输入框中没有数据自动替换到原来的数据列表；（2）中间是当前定位的城市和热门的城市，其中热门城市使用到了GridView；（3）下面是一个ListView用来显示数据列表，右侧是一个字母索引表，当我们点击不同的字母,ListView会定位到该字母地方现在我们来看下项目结构图

按照项目中类的顺序来一一介绍1.PinYin4j.jar用于将汉字转换为拼音，你还可以使用其他方式将汉子转换为拼音，我之前有介绍过，这里就不详讲啦，探索PinYin4j.jar将汉字转换为拼音的基本用法2.CitySortModel一个实体类，一个显示的城市和相对应的拼音首字母

[Java] 查看源文件复制代码

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
packagecom.adan.selectcitydome.view;
 
publicclass CitySortModel {
 
    privateString name;//显示的数据
    privateString sortLetters;//显示数据拼音的首字母
 
    publicString getName() {
        returnname;
    }
 
    publicvoid setName(String name) {
        this.name = name;
    }
 
    publicString getSortLetters() {
        returnsortLetters;
    }
 
    publicvoid setSortLetters(String sortLetters) {
        this.sortLetters = sortLetters;
    }
}

3.EditTextWithDel类是自定义的一个带清除功能的输入框控件,也可以用Android原生的EditText，这个类上一篇博客有介绍，这里就不贴上代码了Android 带清除功能的输入框控件EditTextWithDel4.MyGridView类就是自定义GridView，主要是解决了在热门城市中嵌套Grideview的显示不完全的问题

[Java] 查看源文件复制代码

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
packagecom.adan.selectcitydome.view;
 
importandroid.content.Context;
importandroid.util.AttributeSet;
importandroid.widget.GridView;
 
/**
 * 自定义GridView，解决嵌套Grideview的显示不完全的问题
 */
publicclass MyGridView extendsGridView {
 
    publicMyGridView(Context context, AttributeSet attrs, intdefStyle) {
        super(context, attrs, defStyle);
    }
 
    publicMyGridView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
 
    publicMyGridView(Context context) {
        super(context);
    }
 
    /**
     * 其中onMeasure函数决定了组件显示的高度与宽度；
     * makeMeasureSpec函数中第一个函数决定布局空间的大小，第二个参数是布局模式
     * MeasureSpec.AT_MOST的意思就是子控件需要多大的控件就扩展到多大的空间
     */
    @Override
    protectedvoid onMeasure(intwidthMeasureSpec, intheightMeasureSpec) {
 
        intexpandSpec = MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2,
                MeasureSpec.AT_MOST);
        super.onMeasure(widthMeasureSpec, expandSpec);
    }
 
}

5.PinyinComparator类用来对ListView中的数据根据A-Z进行排序，前面两个if判断主要是将不是以汉字开头的数据放在后面

[Java] 查看源文件复制代码

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
packagecom.adan.selectcitydome.view;
 
importjava.util.Comparator;
 
/**
 * 用来对ListView中的数据根据A-Z进行排序，前面两个if判断主要是将不是以汉字开头的数据放在后面
 */
publicclass PinyinComparator implementsComparator<CitySortModel> {
 
    publicint compare(CitySortModel o1, CitySortModel o2) {
        //这里主要是用来对ListView里面的数据根据ABCDEFG...来排序
        if(o1.getSortLetters().equals("@")
                || o2.getSortLetters().equals("#")) {
            return-1;
        }elseif (o1.getSortLetters().equals("#")
                || o2.getSortLetters().equals("@")) {
            return1;
        }else{
            returno1.getSortLetters().compareTo(o2.getSortLetters());
        }
    }
}

6.PinyinUtils类，就是第一点所讲的PinYin4j.jar用于将汉字转换为拼音啦，这里就不粘贴代码啦7.SideBar类就是ListView右侧的字母索引View，我们需要使用setTextView(TextView mTextDialog)来设置用来显示当前按下的字母的TextView,以及使用setOnTouchingLetterChangedListener方法来设置回调接口，在回调方法onTouchingLetterChanged(String s)中来处理不同的操作

[Java] 查看源文件复制代码

?
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
packagecom.adan.selectcitydome.view;
 
importandroid.content.Context;
importandroid.graphics.Canvas;
importandroid.graphics.Color;
importandroid.graphics.Paint;
importandroid.graphics.Typeface;
importandroid.util.AttributeSet;
importandroid.view.MotionEvent;
importandroid.view.View;
importandroid.widget.TextView;
 
importcom.adan.selectcitydome.R;
 
importjava.util.ArrayList;
importjava.util.Arrays;
importjava.util.List;
 
/**
 * ListView右侧的字母索引View
 */
publicclass SideBar extendsView {
 
    publicstatic String[] INDEX_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"};
 
    privateOnTouchingLetterChangedListener onTouchingLetterChangedListener;
    privateList<String> letterList;
    privateint choose = -1;
    privatePaint paint = newPaint();
    privateTextView mTextDialog;
 
    publicSideBar(Context context) {
        this(context,null);
    }
 
    publicSideBar(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
 
    publicSideBar(Context context, AttributeSet attrs, intdefStyle) {
        super(context, attrs, defStyle);
        init();
    }
 
    privatevoid init() {
        setBackgroundColor(Color.parseColor("#F0F0F0"));
        letterList = Arrays.asList(INDEX_STRING);
    }
 
    protectedvoid onDraw(Canvas canvas) {
        super.onDraw(canvas);
        intheight = getHeight();// 获取对应高度
        intwidth = getWidth();// 获取对应宽度
        intsingleHeight = height / letterList.size();// 获取每一个字母的高度
        for(inti = 0; i < letterList.size(); i++) {
            paint.setColor(Color.parseColor("#606060"));
            paint.setTypeface(Typeface.DEFAULT_BOLD);
            paint.setAntiAlias(true);
            paint.setTextSize(20);
            // 选中的状态
            if(i == choose) {
                paint.setColor(Color.parseColor("#4F41FD"));
                paint.setFakeBoldText(true);
            }
            // x坐标等于中间-字符串宽度的一半.
            floatxPos = width / 2- paint.measureText(letterList.get(i)) / 2;
            floatyPos = singleHeight * i + singleHeight / 2;
            canvas.drawText(letterList.get(i), xPos, yPos, paint);
            paint.reset();// 重置画笔
        }
    }
 
    @Override
    publicboolean dispatchTouchEvent(MotionEvent event) {
        finalint action = event.getAction();
        finalfloat y = event.getY();// 点击y坐标
        finalint oldChoose = choose;
        finalOnTouchingLetterChangedListener listener = onTouchingLetterChangedListener;
        finalint c = (int) (y / getHeight() * letterList.size());// 点击y坐标所占总高度的比例*b数组的长度就等于点击b中的个数.
 
        switch(action) {
            caseMotionEvent.ACTION_UP:
                setBackgroundColor(Color.parseColor("#F0F0F0"));
                choose = -1;
                invalidate();
                if(mTextDialog != null) {
                    mTextDialog.setVisibility(View.GONE);
                }
                break;
            default:
                setBackgroundResource(R.drawable.sidebar_background);
                if(oldChoose != c) {
                    if(c >= 0&& c < letterList.size()) {
                        if(listener != null) {
                            listener.onTouchingLetterChanged(letterList.get(c));
                        }
                        if(mTextDialog != null) {
                            mTextDialog.setText(letterList.get(c));
                            mTextDialog.setVisibility(View.VISIBLE);
                        }
                        choose = c;
                        invalidate();
                    }
                }
                break;
        }
        returntrue;
    }
 
    publicvoid setIndexText(ArrayList<String> indexStrings) {
        this.letterList = indexStrings;
        invalidate();
    }
 
    /**
     * 为SideBar设置显示当前按下的字母的TextView
     *
     * @param mTextDialog
     */
    publicvoid setTextView(TextView mTextDialog) {
        this.mTextDialog = mTextDialog;
    }
 
    /**
     * 向外公开的方法
     *
     * @param onTouchingLetterChangedListener
     */
    publicvoid setOnTouchingLetterChangedListener(
            OnTouchingLetterChangedListener onTouchingLetterChangedListener) {
        this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;
    }
 
    /**
     * 接口
     */
    publicinterface OnTouchingLetterChangedListener {
        voidonTouchingLetterChanged(String s);
    }
 
}

8.CityAdapter就是热门城市中GridView的适配器

[Java] 查看源文件复制代码

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
packagecom.adan.selectcitydome;
 
importandroid.content.Context;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.ArrayAdapter;
importandroid.widget.Button;
importandroid.widget.LinearLayout;
 
importjava.util.List;
 
/**
 * @author: xiaolijuan
 * @description:
 * @projectName: SelectCityDome
 * @date: 2016-03-01
 * @time: 17:25
 */
publicclass CityAdapter extendsArrayAdapter<String> {
    /**
     * 需要渲染的item布局文件
     */
    privateint resource;
 
    publicCityAdapter(Context context, inttextViewResourceId, List<String> objects) {
        super(context, textViewResourceId, objects);
        resource = textViewResourceId;
    }
 
    @Override
    publicView getView(intposition, View convertView, ViewGroup parent) {
        LinearLayout layout = null;
        if(convertView == null) {
            layout = (LinearLayout) LayoutInflater.from(getContext()).inflate(resource, null);
        }else{
            layout = (LinearLayout) convertView;
        }
        Button name = (Button) layout.findViewById(R.id.tv_city);
        name.setText(getItem(position));
        returnlayout;
    }
}

9.SortAdapter 数据的适配器类，这里我们需要用到的就是SectionIndexer接口，它能够有效地帮助我们对分组进行控制。使用SectionIndexer接口需要实现三个方法：getSectionForPosition(int position)，getPositionForSection(int section)，getSections()，我们只需要自行实现前面两个方法：（一）getSectionForPosition(int position)是根据ListView的position来找出当前位置所在的分组（二）getPositionForSection(int section)就是根据首字母的Char值来获取在该ListView中第一次出现该首字母的位置,也就是当前分组所在的位置

[Java] 查看源文件复制代码

?
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
packagecom.adan.selectcitydome;
 
importandroid.content.Context;
importandroid.view.LayoutInflater;
importandroid.view.View;
importandroid.view.ViewGroup;
importandroid.widget.BaseAdapter;
importandroid.widget.SectionIndexer;
importandroid.widget.TextView;
 
importcom.adan.selectcitydome.view.CitySortModel;
 
importjava.util.List;
 
publicclass SortAdapter extendsBaseAdapter implementsSectionIndexer {
    privateList<CitySortModel> list = null;
    privateContext mContext;
 
    publicSortAdapter(Context mContext, List<CitySortModel> list) {
        this.mContext = mContext;
        this.list = list;
    }
 
    /**
     * 当ListView数据发生变化时,调用此方法来更新ListView
     *
     * @param list
     */
    publicvoid updateListView(List<CitySortModel> list) {
        this.list = list;
        notifyDataSetChanged();
    }
 
    publicint getCount() {
        returnthis.list.size();
    }
 
    publicObject getItem(intposition) {
        returnlist.get(position);
    }
 
    publiclong getItemId(intposition) {
        returnposition;
    }
 
    publicView getView(finalint position, View view, ViewGroup arg2) {
        ViewHolder viewHolder = null;
        finalCitySortModel mContent = list.get(position);
        if(view == null) {
            viewHolder = newViewHolder();
            view = LayoutInflater.from(mContext).inflate(R.layout.item_select_city, null);
            viewHolder.tvTitle = (TextView) view.findViewById(R.id.tv_city_name);
            view.setTag(viewHolder);
            viewHolder.tvLetter = (TextView) view.findViewById(R.id.tv_catagory);
        }else{
            viewHolder = (ViewHolder) view.getTag();
        }
 
        intsection = getSectionForPosition(position);
 
        if(position == getPositionForSection(section)) {
            viewHolder.tvLetter.setVisibility(View.VISIBLE);
            viewHolder.tvLetter.setText(mContent.getSortLetters());
        }else{
            viewHolder.tvLetter.setVisibility(View.GONE);
        }
 
        viewHolder.tvTitle.setText(this.list.get(position).getName());
 
        returnview;
 
    }
 
 
    finalstatic class ViewHolder {
        TextView tvLetter;
        TextView tvTitle;
    }
 
    publicint getSectionForPosition(intposition) {
        returnlist.get(position).getSortLetters().charAt(0);
    }
 
    publicint getPositionForSection(intsection) {
        for(inti = 0; i < getCount(); i++) {
            String sortStr = list.get(i).getSortLetters();
            charfirstChar = sortStr.toUpperCase().charAt(0);
            if(firstChar == section) {
                returni;
            }
        }
        return-1;
    }
 
    @Override
    publicObject[] getSections() {
        returnnull;
    }
}

10.MainActivity 对EditTextWithDel设置addTextChangedListener监听，当输入框内容发生变化根据里面的值过滤ListView，里面的值为空显示原来的列表和给ListView添加表头等

[Java] 查看源文件复制代码

?
001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044
045
046
047
048
049
050
051
052
053
054
055
056
057
058
059
060
061
062
063
064
065
066
067
068
069
070
071
072
073
074
075
076
077
078
079
080
081
082
083
084
085
086
087
088
089
090
091
092
093
094
095
096
097
098
099
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
packagecom.adan.selectcitydome;
 
importandroid.app.Activity;
importandroid.os.Bundle;
importandroid.text.Editable;
importandroid.text.TextUtils;
importandroid.text.TextWatcher;
importandroid.view.View;
importandroid.widget.AdapterView;
importandroid.widget.GridView;
importandroid.widget.ListView;
importandroid.widget.TextView;
importandroid.widget.Toast;
 
importcom.adan.selectcitydome.view.CitySortModel;
importcom.adan.selectcitydome.view.EditTextWithDel;
importcom.adan.selectcitydome.view.PinyinComparator;
importcom.adan.selectcitydome.view.PinyinUtils;
importcom.adan.selectcitydome.view.SideBar;
 
importjava.util.ArrayList;
importjava.util.Collections;
importjava.util.List;
 
publicclass MainActivity extendsActivity {
    privateListView sortListView;
    privateSideBar sideBar;
    privateTextView dialog, mTvTitle;
    privateSortAdapter adapter;
    privateEditTextWithDel mEtCityName;
    privateList<CitySortModel> SourceDateList;
 
    @Override
    protectedvoid onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initViews();
    }
 
    privatevoid initViews() {
        mEtCityName = (EditTextWithDel) findViewById(R.id.et_search);
        sideBar = (SideBar) findViewById(R.id.sidrbar);
        dialog = (TextView) findViewById(R.id.dialog);
        mTvTitle = (TextView) findViewById(R.id.tv_title);
        sortListView = (ListView) findViewById(R.id.country_lvcountry);
        initDatas();
        initEvents();
        setAdapter();
    }
 
    privatevoid setAdapter() {
        SourceDateList = filledData(getResources().getStringArray(R.array.provinces));
        Collections.sort(SourceDateList,newPinyinComparator());
        adapter = newSortAdapter(this, SourceDateList);
        sortListView.addHeaderView(initHeadView());
        sortListView.setAdapter(adapter);
    }
 
    privatevoid initEvents() {
        //设置右侧触摸监听
        sideBar.setOnTouchingLetterChangedListener(newSideBar.OnTouchingLetterChangedListener() {
            @Override
            publicvoid onTouchingLetterChanged(String s) {
                //该字母首次出现的位置
                intposition = adapter.getPositionForSection(s.charAt(0));
                if(position != -1) {
                    sortListView.setSelection(position + 1);
                }
            }
        });
 
        //ListView的点击事件
        sortListView.setOnItemClickListener(newAdapterView.OnItemClickListener() {
 
            @Override
            publicvoid onItemClick(AdapterView<?> parent, View view,
                                    intposition, longid) {
                mTvTitle.setText(((CitySortModel) adapter.getItem(position - 1)).getName());
                Toast.makeText(getApplication(), ((CitySortModel) adapter.getItem(position)).getName(), Toast.LENGTH_SHORT).show();
            }
        });
 
        //根据输入框输入值的改变来过滤搜索
        mEtCityName.addTextChangedListener(newTextWatcher() {
            @Override
            publicvoid beforeTextChanged(CharSequence s, intstart, intcount, intafter) {
 
            }
 
            @Override
            publicvoid onTextChanged(CharSequence s, intstart, intbefore, intcount) {
                //当输入框里面的值为空，更新为原来的列表，否则为过滤数据列表
                filterData(s.toString());
            }
 
            @Override
            publicvoid afterTextChanged(Editable s) {
 
            }
        });
    }
 
    privatevoid initDatas() {
        sideBar.setTextView(dialog);
    }
 
    privateView initHeadView() {
        View headView = getLayoutInflater().inflate(R.layout.headview, null);
        GridView mGvCity = (GridView) headView.findViewById(R.id.gv_hot_city);
        String[] datas = getResources().getStringArray(R.array.city);
        ArrayList<String> cityList = newArrayList<>();
        for(inti = 0; i < datas.length; i++) {
            cityList.add(datas[i]);
        }
        CityAdapter adapter = newCityAdapter(getApplicationContext(), R.layout.gridview_item, cityList);
        mGvCity.setAdapter(adapter);
        returnheadView;
    }
 
    /**
     * 根据输入框中的值来过滤数据并更新ListView
     *
     * @param filterStr
     */
    privatevoid filterData(String filterStr) {
        List<CitySortModel> mSortList = newArrayList<>();
        if(TextUtils.isEmpty(filterStr)) {
            mSortList = SourceDateList;
        }else{
            mSortList.clear();
            for(CitySortModel sortModel : SourceDateList) {
                String name = sortModel.getName();
                if(name.toUpperCase().indexOf(filterStr.toString().toUpperCase()) != -1|| PinyinUtils.getPingYin(name).toUpperCase().startsWith(filterStr.toString().toUpperCase())) {
                    mSortList.add(sortModel);
                }
            }
        }
        // 根据a-z进行排序
        Collections.sort(mSortList,newPinyinComparator());
        adapter.updateListView(mSortList);
    }
 
    privateList<CitySortModel> filledData(String[] date) {
        List<CitySortModel> mSortList = newArrayList<>();
        ArrayList<String> indexString = newArrayList<>();
 
        for(inti = 0; i < date.length; i++) {
            CitySortModel sortModel = newCitySortModel();
            sortModel.setName(date[i]);
            String pinyin = PinyinUtils.getPingYin(date[i]);
            String sortString = pinyin.substring(0,1).toUpperCase();
            if(sortString.matches("[A-Z]")) {
                sortModel.setSortLetters(sortString.toUpperCase());
                if(!indexString.contains(sortString)) {
                    indexString.add(sortString);
                }
            }
            mSortList.add(sortModel);
        }
        Collections.sort(indexString);
        sideBar.setIndexText(indexString);
        returnmSortList;
    }
}