Android项目实战（八）：列表右侧边栏拼音展示效果-白红宇

之前忙着做项目，好久之前的技术都没有时间总结，而发现自己的博客好多写的技术都比自己掌握的时候晚了很多。不管怎么样，写技术博客一定是一个想成为优秀程序猿或者已经是优秀程序猿必须做的。好吧，下面进行学习阶段。

记得很久之前就使用过侧边拼音栏了，先看下它的效果，一个列表，列表的右侧有一个拼音列表，当列表发生滑动的时候，拼音列表也随着滑动，而规律就是拼音列表滑动的位置为显示列表的当前位置的文字的首字母决定，当然，直接点击拼音列表的一个位置，显示列表也会直接滑动到对应拼音开头的文字所在位置。

下面看一个使用的示例，这里我们使用本地的XML城市数据文件来给列表显示数据,只是为了给自己练习SAX解析XML文件。可能大家看起来有点复杂，大家可以用一个简单的List数据测试即可，

而我的这个注意xml文件要放在assets文件夹下

cityarrays.xml

一、写布局文件：

看上面效果图可以看出，省市名是一种布局，拼音标签是一种布局。那么就需要先写两种布局

1、拼音标签布局

item_city_list_label.xml

2、省市名布局

item_city_list_city.xml

3、主布局文件

main.xml

二、现在写java代码了

1、首先看我们主要使用的一个自定义View,用来显示拼音列表，大家可以看看源码，将内容显示为自己喜欢的样子

1 package com.xqx.SideBarDemo;  2   3 import android.content.Context;  4 import android.graphics.Canvas;  5 import android.graphics.Color;  6 import android.graphics.Paint;  7 import android.util.AttributeSet;  8 import android.view.MotionEvent;  9 import android.view.View; 10 import android.widget.TextView; 11  12  13 public class SideBar extends View { 14  15     public String[] characters = new String[] { "#", "A", "B", "C", "D", "E", "F", 16             "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", 17             "X", "Y", "Z" }; 18  19     private Paint paint; 20     private int textSize = 20;        //拼音文字大小 21     private int defaultTextColor =   //默认拼音文字的颜色 Color.parseColor("#D2D2D2");  22     private int selectedTextColor =  //选中后的拼音文字的颜色 Color.parseColor("#2DB7E1"); 23     private int touchedBgColor =    //触摸时的拼音文字的颜色 Color.parseColor("#F5F5F5"); 24     private TextView  text_dialog; 25  26     private OnTouchingLetterChangedListener onTouchingLetterChangedListener; 27  28     private int position = -1; 29  30     public SideBar(Context context) { 31         super(context); 32     } 33  34     public SideBar(Context context, AttributeSet attrs) { 35         super(context, attrs); 36         init(); 37     } 38  39     public SideBar(Context context, AttributeSet attrs, int defStyle) { 40         super(context, attrs, defStyle); 41         init(); 42     } 43      44     public void setTextDialog(TextView textView){ 45         this.text_dialog = textView; 46     }  47  48     private void init() { 49         paint = new Paint(); 50         paint.setAntiAlias(true); 51     } 52  53     @Override 54     protected void onDraw(Canvas canvas) { 55         super.onDraw(canvas); 56  57         int height = getHeight(); 58         int width = getWidth(); 59         int singleHeight = height / characters.length; 60  61         for (int i = 0; i < characters.length; i++) { 62             if (i == position) { 63                 paint.setColor(selectedTextColor); 64             } else { 65                 paint.setColor(defaultTextColor); 66             } 67             paint.setTextSize(textSize); 68  69             float xPos = width / 2 - paint.measureText(characters[i]) / 2; 70             float yPos = singleHeight * i + singleHeight; 71             canvas.drawText(characters[i], xPos, yPos, paint); 72         } 73     } 74  75     @Override 76     public boolean onTouchEvent(MotionEvent event) { 77         int action = event.getAction(); 78         float y = event.getY(); 79         position = (int) (y / (getHeight() / characters.length)); 80         if (position >= 0 && position <     Constants.CITY_TYPE.length) { 81             onTouchingLetterChangedListener.onTouchingLetterChanged(position); 82             switch (action) { 83                 case MotionEvent.ACTION_UP: 84                     setBackgroundColor(Color.TRANSPARENT); 85                     position = -1; 86                     invalidate(); 87                     if (text_dialog != null) { 88                         text_dialog.setVisibility(View.INVISIBLE); 89                     } 90                     break; 91                 default: 92                     setBackgroundColor(touchedBgColor); 93                     invalidate(); 94                     text_dialog.setText(characters[position]); 95                     break; 96             } 97         }else{ 98             setBackgroundColor(Color.TRANSPARENT); 99             if (text_dialog != null) {100                 text_dialog.setVisibility(View.INVISIBLE);101             }102 103         }104         return true;105     }106 107     public void setOnTouchingLetterChangedListener(108             OnTouchingLetterChangedListener onTouchingLetterChangedListener) {109         this.onTouchingLetterChangedListener = onTouchingLetterChangedListener;110     }111 112 113     public interface OnTouchingLetterChangedListener {114         public void onTouchingLetterChanged(int position);115     }116 117 }

SideBar.java

2、创建一个city的实体类

1 package com.xqx.SideBarDemo; 2  3  4 public class City { 5     // 标记  拼音，label 6     public static final int CITY_TYPE_LABEL = 0; 7     // 标记  城市名 8     public static final int CITY_TYPE_CITY = 1; 9 10     private String cityName; //城市名11     private String cityType; //城市类型12 13     @Override14     public String toString() {15         return "City{
     " +16                 "cityName='" + cityName + '\'' +17                 ", cityType='" + cityType + '\'' +18                 '}';19     }20 21     public static int getTypeCount(){22         return 2;23     }24 25     public int getType(){26 27         if(cityType.equals("label")){28             return CITY_TYPE_LABEL;29         }else{30             return CITY_TYPE_CITY;31         }32 33     }34 35     public String getCityName() {36         return cityName;37     }38 39     public void setCityName(String cityName) {40         this.cityName = cityName;41     }42 43     public void setCityType(String cityType) {44         this.cityType = cityType;45     }46 }

City.java

3、解析本地xml省市数据文件，获得省市的实体类列表

1 package com.xqx.SideBarDemo;  2   3   4 import org.xml.sax.Attributes;  5 import org.xml.sax.SAXException;  6 import org.xml.sax.helpers.DefaultHandler;  7   8 import java.io.FileNotFoundException;  9 import java.io.IOException; 10 import java.io.InputStream; 11 import java.util.ArrayList; 12 import java.util.List; 13 import java.util.TreeMap; 14  15 import javax.xml.parsers.ParserConfigurationException; 16 import javax.xml.parsers.SAXParser; 17 import javax.xml.parsers.SAXParserFactory; 18  19 /** 20  * 解析本地xml文件 SAX解析 21  */ 22 public class ParseXml extends DefaultHandler { 23  24     private TreeMap
      
       > cities; 25  26     private List
       
         city; 27  28     // 城市列表第一层 29     private List
        
          cityList; 30  31     private String tagName; 32  33     // 城市列表第一层城市数量 34     private int cityNum = 1; 35  36     public ParseXml(InputStream in) { 37  38         SAXParserFactory factory = SAXParserFactory.newInstance(); 39  40         try { 41  42             SAXParser parser = factory.newSAXParser(); 43  44             parser.parse(in, this); 45  46         } catch (ParserConfigurationException e) { 47             e.printStackTrace(); 48         } catch (SAXException e) { 49             e.printStackTrace(); 50         } catch (FileNotFoundException e) { 51             e.printStackTrace(); 52         } catch (IOException e) { 53             e.printStackTrace(); 54         } 55  56     } 57  58     public TreeMap
         
          > getCities(){ 59  60         return cities; 61  62     } 63  64     public List
          
            getCityList(){ 65  66         return cityList; 67  68     } 69  70     @Override 71     public void startDocument() throws SAXException { 72  73         cities = new TreeMap
           
            >(new CityComparator()); 74 75 cityList = new ArrayList
            
             (); 76 77 } 78 79 @Override 80 public void startElement(String uri, String localName, String qName, Attributes attributes) throws SAXException { 81 82 tagName = qName; 83 84 if("string-array".equals(qName)){ 85 86 if (attributes != null){ 87 88 for (int i = 0; i < attributes.getLength(); i++) { 89 90 String attrName = attributes.getQName(i); 91 92 String attrValue = attributes.getValue(i); 93 94 if("name".equals(attrName)){ 95 96 city = new ArrayList
             
              (); 97 98 cities.put(attrValue, city); 99 100 if(cityNum <= Constants.CITY_NUMBER) {101 102 cityList.add(attrValue);103 104 cityNum ++;105 }106 107 }108 109 }110 111 }112 113 }114 115 }116 117 @Override118 public void characters(char[] ch, int start, int length) throws SAXException {119 120 String data = new String(ch, start, length);121 122 if("item".equals(tagName)){123 124 city.add(data);125 126 }127 128 }129 130 @Override131 public void endElement(String uri, String localName, String qName) throws SAXException {132 133 tagName = null;134 135 }136 137 @Override138 public void endDocument() throws SAXException {139 }140 141 }

ParseXml.java

4、汉字转换为拼音的类

1 package com.xqx.SideBarDemo; 2  3 import net.sourceforge.pinyin4j.PinyinHelper; 4 import net.sourceforge.pinyin4j.format.HanyuPinyinCaseType; 5 import net.sourceforge.pinyin4j.format.HanyuPinyinOutputFormat; 6 import net.sourceforge.pinyin4j.format.HanyuPinyinToneType; 7 import net.sourceforge.pinyin4j.format.HanyuPinyinVCharType; 8 import net.sourceforge.pinyin4j.format.exception.BadHanyuPinyinOutputFormatCombination; 9 10 11 public class HanziToPinYin {12 13     /**14      * 如果字符串string是汉字，则转为拼音并返回15      * @param string16      * @return17      */18     public static char toPinYin(String string){19         HanyuPinyinOutputFormat hanyuPinyin = new HanyuPinyinOutputFormat();20         hanyuPinyin.setCaseType(HanyuPinyinCaseType.UPPERCASE);21         hanyuPinyin.setToneType(HanyuPinyinToneType.WITHOUT_TONE);22         hanyuPinyin.setVCharType(HanyuPinyinVCharType.WITH_U_UNICODE);23         String[] pinyinArray=null;24         char hanzi = string.charAt(0);25         try {26             //是否在汉字范围内27             if(hanzi>=0x4e00 && hanzi<=0x9fa5){28                 pinyinArray = PinyinHelper.toHanyuPinyinStringArray(hanzi, hanyuPinyin);29             }30         } catch (BadHanyuPinyinOutputFormatCombination e) {31             e.printStackTrace();32         }33         //将获取到的拼音返回34         return pinyinArray[0].charAt(0);35     }36 37 38 }

HanziToPinYin.java

5、ListView的适配器

1 package com.xqx.SideBarDemo; 2  3 import android.content.Context; 4 import android.view.LayoutInflater; 5 import android.view.View; 6 import android.view.ViewGroup; 7 import android.widget.BaseAdapter; 8 import android.widget.TextView; 9 10 import java.util.List;11 12 public class CityListAdapter extends BaseAdapter {13 14     private List
      
        cities;15     private Context context;16     public CityListAdapter(Context context, List
       
         cities) {17         this.cities = cities;18         this.context = context;19     }20     @Override21     public int getCount() {22         return cities.size();23     }24     @Override25     public int getViewTypeCount() {26         return City.getTypeCount();27     }28     @Override29     public Object getItem(int position) {30         return cities.get(position);31     }32     @Override33     public long getItemId(int position) {34         return position;35     }36 37     @Override38     public int getItemViewType(int position) {39         return cities.get(position).getType();40     }41 42     //判断是否可以点击，即判断是否是省市名拼音43     @Override44     public boolean isEnabled(int position) {45 46         if (getItemViewType(position) == City.CITY_TYPE_LABEL){47             return false;48         }49         return super.isEnabled(position);50     }51 52     @Override53     public View getView(int position, View convertView, ViewGroup parent) {54 55         // 如果是label 即拼音 就为label布局56         if(getItemViewType(position) == City.CITY_TYPE_LABEL){57             convertView = LayoutInflater.from(context).inflate(R.layout.item_city_list_label, parent, false);58         }else{59             //如果是城市，则为城市名称布局60             convertView = LayoutInflater.from(context).inflate(R.layout.item_city_list_city, parent, false);61         }62         //显示列表项文字63         TextView tv = (TextView) convertView.findViewById(R.id.tv_item_city);64         tv.setText(cities.get(position).getCityName());65         return convertView;66     }67 }

CityListAdapter.java

6、处理重庆问题（重庆会被分析为zhongqin ，注意，自己测试）

1 package com.xqx.SideBarDemo; 2  3 import java.text.CollationKey; 4 import java.text.Collator; 5 import java.text.RuleBasedCollator; 6 import java.util.Comparator; 7 import java.util.Locale; 8  9 10 public class CityComparator implements Comparator
      
        {11 12     private RuleBasedCollator collator;13 14     public CityComparator() {15 16         collator = (RuleBasedCollator) Collator.getInstance(Locale.CHINA);17 18     }19 20     @Override21     public int compare(String lhs, String rhs) {22 23         lhs = lhs.replace("重庆", "崇庆");24         rhs = rhs.replace("重庆", "崇庆");25         CollationKey c1 = collator.getCollationKey(lhs);26         CollationKey c2 = collator.getCollationKey(rhs);27 28         return c1.compareTo(c2);29     }30 }

CityComparator.java

7、存放一个常量的类

1 package com.xqx.SideBarDemo; 2  3 public class Constants { 4  5  6     public static final String XML_CITIES = "cityarrays.xml"; 7  8     // 根据cityarrays.xml文件确定城市列表第一层数量 9     public static final int CITY_NUMBER = 35;10 11 12     public static final String[] CITY_TYPE = new String[] { "#", "A", "B", "C", "D", "E", "F",13             "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W",14             "X", "Y", "Z" };15 16 }

Constants.xml

8、主MainActivity

1 package com.xqx.SideBarDemo;  2   3 import android.app.Activity;  4 import android.content.Intent;  5 import android.content.res.AssetManager;  6 import android.os.Bundle;  7 import android.view.View;  8 import android.view.Window;  9 import android.widget.AdapterView; 10 import android.widget.ListView; 11 import android.widget.TextView; 12  13 import java.io.IOException; 14 import java.io.InputStream; 15 import java.util.ArrayList; 16 import java.util.Collections; 17 import java.util.List; 18 import java.util.TreeMap; 19  20 public class MainActivity extends Activity implements AdapterView.OnItemClickListener { 21     /** 22      * Called when the activity is first created. 23      */ 24     private TreeMap
      
       > citiesAll; 25     // 存放正规带有标志的城市集合 26     private List
       
         cityList; 27     private CityListAdapter adapter; 28     private SideBar sideBar; 29     private TextView dialog_text; 30     private ListView cityListView; 31  32  33     @Override 34     protected void onCreate(Bundle savedInstanceState) { 35         super.onCreate(savedInstanceState); 36         requestWindowFeature(Window.FEATURE_NO_TITLE); 37         setContentView(R.layout.main); 38  39         cityListView = (ListView) findViewById(R.id.list_view_cities); 40  41  42         sideBar = (SideBar) findViewById(R.id.side_bar); 43  44         dialog_text = (TextView) findViewById(R.id.tv_text_dialog); 45  46         cityList = new ArrayList
        
         (); 47  48         adapter = new CityListAdapter(this, cityList); 49  50         cityListView.setAdapter(adapter); 51  52         cityListView.setOnItemClickListener(this); 53  54         initData(); 55         initSideBar(); 56     } 57  58     private void initSideBar() { 59  60         sideBar.setTextDialog(dialog_text); 61         // 设置拼音列表的滑动事件， 62         sideBar.setOnTouchingLetterChangedListener(new SideBar.OnTouchingLetterChangedListener() { 63             @Override 64             public void onTouchingLetterChanged(int position) { 65                 String city_label = Constants.CITY_TYPE[position]; 66                 for (int i = 0; i < cityList.size(); i++) { 67                     if (cityList.get(i).getCityName().equals(city_label)) { 68                         cityListView.setSelection(i); 69                         dialog_text.setVisibility(View.VISIBLE); 70                         break; 71                     } 72                     if(i == cityList.size() -1){ 73                         dialog_text.setVisibility(View.INVISIBLE); 74                     } 75                 } 76             } 77         }); 78  79     } 80  81     private void initData() { 82  83         //XML解析本地省市数据 84         AssetManager assets = getResources().getAssets(); 85         try { 86             InputStream open = assets.open(Constants.XML_CITIES); 87             //SAX解析 88             ParseXml parseXml = new ParseXml(open); 89             citiesAll = parseXml.getCities(); 90  91             // 存放第一层城市列表名称 92             List
         
           cities = parseXml.getCityList(); 93  94             // 对第一层城市列表排序 95             Collections.sort(cities, new CityComparator()); 96  97             // 添加第一个标签 98             String cityType = HanziToPinYin.toPinYin(cities.get(0)) + ""; 99 100             City city = new City();101 102             city.setCityName(cityType);103 104             city.setCityType("label");105 106             cityList.add(city);107 108             for (int i = 0; i < cities.size(); i++) {109 110                 String string = cities.get(i);111 112                 String s = null;113                 if(string.contains("重庆")){114 115                     s = HanziToPinYin.toPinYin("崇庆") + "";116                 }else{117 118                     s = HanziToPinYin.toPinYin(string) + "";119                 }120 121 122                 if(s.equals(cityType)){123 124                     city = new City();125                     city.setCityName(string);126                     city.setCityType(cityType);127 128                     cityList.add(city);129 130                 }else{131 132                     // 添加标签133                     cityType = s;134                     city = new City();135                     city.setCityName(cityType);136                     city.setCityType("label");137 138                     cityList.add(city);139 140                     // 添加城市141                     city = new City();142                     city.setCityName(string);143                     city.setCityType(cityType);144 145                     cityList.add(city);146 147                     adapter.notifyDataSetChanged();148 149                 }150             }151         } catch (IOException e) {152             e.printStackTrace();153         }154 155     }156 157     // 省市列表项点击事件158     @Override159     public void onItemClick(AdapterView
           parent, View view, int position, long id) {160 161     }162 163 }

MainActivity.java

最重要的一点：

pinyin4j-2.5.0.jar 这个jar包一定要有，放在libs下，大家可以百度去下载这个jar包