最近開發專案有一個需要，選擇城市，有三級滾筒式的，有些醜，所以參考了他人的聯絡人列表選擇做了一個。先上圖看下效果：

https://img-blog.csdn.net/20170112141746730?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbjEwMDAx/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center

        具體效果，為左邊顯示城市列表，在每個拼音的開頭顯示大寫字母，右邊的控制元件點選滑動，會在中間顯示選中的字母，並有小框框顯示，列表滑動到相應的字母處。

具體程式碼如下：

右側字母表自定義控制元件：

public class SideCityBar extends View {
    private String[] letterStrings = {"#", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "S", "Y", "Z"};
    private Paint paint;
    private Paint mPaint;
    private Context mContext
 
;
    private int heght;
    private int postion;
    private boolean isShow = false;
    private Rect rect = new Rect();
    public SideCityBar(Context context) {
        super(context);
init(context);
}

    public SideCityBar(Context context, AttributeSet attrs) {
        super(context, attrs);
init(context);
 
}

    public SideCityBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
init(context);
}

    private void init(Context context) {
        mContext = context;
mPaint = new Paint();
mPaint.setColor(Color.WHITE);
mPaint.setTextSize(30);
mPaint.setAntiAlias(true);
paint = new Paint();
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(5);
}

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        heght = getHeight() / letterStrings.length;
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}

    @Override
protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
setBackgroundColor(Color.BLACK);
        for (int i = 0; i < letterStrings.length; i++) {
            String s1 = letterStrings[i];
mPaint.getTextBounds(s1, 0, s1.length(), rect);
            int h1 = rect.height();
            int w1 = rect.width();
//  mPaint.measureText(s1)只需要文字寬度可用此方法。
int h2 = heght / 2 + h1 / 2 + heght * i;
            int w2 = getWidth() / 2 - w1 / 2;
canvas.drawText(s1, w2, h2, mPaint);
            if (isShow && (i == postion)) {
                canvas.drawRect((getWidth() - heght) / 2, (0 + i * heght), (getWidth() + heght) / 2, (heght + i * heght), paint);
}
        }
    }

    @Override
public boolean onTouchEvent(MotionEvent event) {
        float y1 = event.getY();
        if (event.getAction() == MotionEvent.ACTION_UP) {
            isShow = false;
mTextView.setVisibility(GONE);
mOnchangeString.setTextShow(false);
invalidate();
            return true;
} else {
            isShow = true;
//計算框框的位置
postion = (int) (y1 / heght);
            if (postion < letterStrings.length) {
                mTextView.setVisibility(VISIBLE);
mTextView.setText(letterStrings[postion]);
mOnchangeString.getChangeString(letterStrings[postion]);
mOnchangeString.setTextShow(true);
invalidate();
}

            return true;
}
    }

    TextView mTextView;
    public void setTextView(TextView textView) {
        mTextView = textView;
}

    public void setOnChangeLis(OnchangeString onChangeLis) {
        mOnchangeString = onChangeLis;
}

    OnchangeString mOnchangeString;
    public interface OnchangeString {
        void getChangeString(String s);
        void setTextShow(boolean b);
}
}

資料封裝類：

public class CityModel {
    private String name;
    private String fistletter;
    public String getName() {
        return name;
}

    public void setName(String name) {
        this.name = name;
}

    public String getFistletter() {
        return fistletter;
}

    public void setFistletter(String fistletter) {
        this.fistletter = fistletter;
}
}

接著就是主佈局和列表佈局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
    <ListView
android:id="@+id/l1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
    <TextView
android:id="@+id/t1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerInParent="true"
android:background="#3CAC48"
android:gravity="center"
android:textColor="#ffffff"
android:textSize="50dp"
android:visibility="gone" />
    <allother.two.sidecity.SideCityBar
android:id="@+id/s1"
android:layout_width="40dp"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:layout_centerVertical="true" />
</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
    <TextView
android:id="@+id/t1"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="A" />
    <TextView
android:id="@+id/t2"
android:layout_width="match_parent"
android:layout_height="40dp"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:text="A" />
</LinearLayout>

public class SideCityActivity extends AppCompatActivity {
    private String TAG = "SideCityActivity:";
    private ListView listView;
    private TextView txtShowCurrentLetter;
    private SideCityBar sideBar;
    private List<CityModel> list = new ArrayList();
    private SideBarCityAdapter sideBarCityAdapter;
    private Map<String, Integer> map = new HashMap<>();
    private String[] nameStrings = {"$XXOO", "上海", "北京", "杭州", "廣州", "南京", "蘇州", "深圳", "成都", "重慶", "天津", "寧波", "揚州", "無錫", "福州",
"廈門", "武漢", "西安", "瀋陽", "大連", "青島", "濟南", "海口", "石家莊", "唐山", "秦皇島", "邯鄲", "邢臺", "保定", "張家口", "承德", "滄州", "廊坊",
"衡水", "太原", "大同", "陽泉", "長治", "晉城", "朔州", "晉中", "運城", "忻州", "臨汾", "呂梁", "呼和浩特", "包頭", "烏海", "赤峰", "通遼", "鄂爾多斯",
"呼倫貝爾", "興安盟", "錫林郭勒", "烏蘭察布", "巴彥淖爾", "阿拉善", "鞍山", "撫順", "本溪", "丹東", "錦州", "營口", "阜新", "遼陽", "盤錦", "鐵嶺", "朝陽",
"葫蘆島", "長春", "吉林", "四平", "遼源", "通化", "白山", "松原", "白城", "延邊", "哈爾濱", "齊齊哈爾", "雞西", "鶴崗", "雙鴨山", "大慶", "伊春", "佳木斯", "七臺河",
"牡丹江", "黑河", "綏化", "大興安嶺", "徐州", "常州", "南通", "連雲港", "淮安", "鹽城", "鎮江", "泰州", "宿遷", "溫州", "嘉興", "湖州", "紹興", "金華", "衢州", "舟山", "台州",
"麗水", "合肥", "蕪湖", "蚌埠", "淮南", "馬鞍山", "淮北", "銅陵", "安慶", "黃山", "滁州", "阜陽", "宿州", "六安", "亳州", "池州", "宣城", "莆田", "三明", "泉州", "漳州", "南平", "龍巖",
"寧德", "南昌", "景德鎮", "萍鄉", "九江", "新餘", "鷹潭", "贛州", "吉安", "宜春", "撫州", "上饒", "淄博", "棗莊", "東營", "煙臺", "濰坊", "濟寧", "泰安", "威海", "日照", "萊蕪", "臨沂", "德州",
"聊城", "濱州", "菏澤", "鄭州", "開封", "洛陽", "平頂山", "安陽", "鶴壁", "新鄉", "焦作", "濮陽", "許昌", "漯河", "三門峽", "南陽", "商丘", "信陽", "周口", "駐馬店", "黃石", "十堰", "宜昌", "襄陽", "鄂州",
"荊門", "孝感", "荊州", "黃岡", "咸寧", "隨州", "恩施州", "仙桃", "潛江", "天門", "株洲", "湘潭", "衡陽", "邵陽", "岳陽", "常德", "張家界", "益陽", "郴州", "永州", "懷化", "婁底", "湘西", "韶關", "珠海", "汕頭",
"佛山", "江門", "湛江", "茂名", "肇慶", "惠州", "梅州", "汕尾", "河源", "陽江", "清遠", "東莞", "中山", "潮州", "揭陽", "雲浮", "南寧", "柳州", "桂林", "梧州", "北海", "防城港", "欽州", "貴港", "玉林", "百色", "賀州",
"河池", "自貢", "攀枝花", "瀘州", "德陽", "綿陽", "廣元", "遂寧", "內江", "樂山", "南充", "眉山", "宜賓", "廣安", "達州", "雅安", "巴中", "資陽", "阿壩", "甘孜州", "涼山", "貴陽", "六盤水", "遵義", "安順", "銅仁地區",
"黔西南", "畢節地區", "黔東南", "黔南", "昆明", "曲靖", "玉溪", "保山", "昭通", "楚雄州", "紅河", "文山州", "普洱", "西雙版納", "大理州", "德巨集", "麗江", "怒江", "迪慶", "臨滄", "拉薩", "昌都地區", "山南",
"日喀則地區", "那曲", "阿里", "林芝地區", "銅川", "寶雞", "咸陽", "渭南", "延安", "漢中", "榆林", "安康", "商洛", "蘭州", "嘉峪關", "金昌", "白銀", "天水", "武威", "張掖", "平涼", "酒泉", "慶陽", "定西",
"隴南", "臨夏州", "甘南", "西寧", "海東", "海北", "黃南", "果洛", "玉樹", "海西", "銀川", "石嘴山", "吳忠", "固原", "烏魯木齊", "克拉瑪依", "吐魯番地區", "哈密地區", "昌吉州", "博爾塔拉", "巴音郭楞",
"阿克蘇地區", "克孜勒蘇", "喀什地區", "和田地區", "伊犁", "塔城地區", "阿勒泰地區", "石河子", "香港", "澳門", "長沙", "三亞", "中衛", "儋州", "保亭", "昌江", "澄邁縣", "崇左", "定安縣", "東方", "濟源",
"來賓", "樂東", "陵水", "瓊海", "神農架林區", "圖木舒克", "屯昌縣", "萬寧", "文昌", "海南州"};
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
setContentView(R.layout.act_two_sidecity);
txtShowCurrentLetter = (TextView) findViewById(R.id.t1);
sideBar = (SideCityBar) findViewById(R.id.s1);
listView = (ListView) findViewById(R.id.l1);
sideBar.setTextView(txtShowCurrentLetter);
getAllData();
sideBarCityAdapter = new SideBarCityAdapter();
listView.setAdapter(sideBarCityAdapter);
sideBar.setOnChangeLis(new SideCityBar.OnchangeString() {
            @Override
public void getChangeString(String s) {
                int a1 = getCurrentPosition(s);
                if (a1 != -1) {
                    listView.setSelection(a1);
} else {

                }
            }

            @Override
public void setTextShow(boolean b) {

            }
        });
listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                String city = list.get(position).getName();
}
        });
}

    /**
     * list獲取所有資料
     */
private void getAllData() {
        list = new ArrayList();
        for (int i = 0; i < nameStrings.length; i++) {
            CityModel cityModel = new CityModel();
cityModel.setName(nameStrings[i]);
//將漢字轉換為拼音
String pin = PinyinHelper.getShortPinyin(nameStrings[i]);
//將拼音字串轉換為大寫拼音
String pinD = String.valueOf(pin.charAt(0)).toUpperCase();
//獲取大寫拼音字串的第一個字元
char c1 = pinD.charAt(0);
            if (c1 < 'A' || c1 > 'Z') {
                cityModel.setFistletter("#");
} else {
                cityModel.setFistletter(String.valueOf(c1));
}
            list.add(cityModel);
}
        //將聯絡人列表的標題字母排序
Collections.sort(list, new Comparator<CityModel>() {
            @Override
public int compare(CityModel o1, CityModel o2) {
                return o1.getFistletter().compareTo(o2.getFistletter());
}
        });
//記錄字母所在位置
String s1 = list.get(0).getFistletter();
map.put(s1, 0);
        for (int i = 0; i < list.size(); i++) {
            String s2 = list.get(i).getFistletter();
            if (!s1.equals(s2)) {
                s1 = s2;
map.put(s2, i);
}
        }
    }


    private int getCurrentPosition(String s) {
        if (map.get(s) != null) {
            return map.get(s);
} else {
            return -1;
}
    }


    public class SideBarCityAdapter extends BaseAdapter {


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

        @Override
public Object getItem(int position) {
            return list.get(position);
}

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

        @Override
public View getView(int position, View convertView, ViewGroup parent) {
            ViewHolder viewHolder;
            if (convertView == null) {
                viewHolder = new ViewHolder();
convertView = LayoutInflater.from(SideCityActivity.this).inflate(R.layout.act_two_sidecity_item, null);
viewHolder.txtFirstLetter = (TextView) convertView.findViewById(R.id.t1);
viewHolder.txtName = (TextView) convertView.findViewById(R.id.t2);
convertView.setTag(viewHolder);
} else {
                viewHolder = (ViewHolder) convertView.getTag();
}
            viewHolder.txtName.setText(list.get(position).getName());
String s1 = list.get(position).getFistletter();
            if (map.get(s1) != null && map.get(s1).equals(position)) {
                viewHolder.txtFirstLetter.setText(s1);
viewHolder.txtFirstLetter.setVisibility(View.VISIBLE);
} else {
                viewHolder.txtFirstLetter.setVisibility(View.GONE);
}

            return convertView;
}

        public class ViewHolder {
            TextView txtFirstLetter, txtName;
}


    }
}