??在開發O2O相關應用的時候，選擇所在城市這個東西肯定不會少。個人感覺美團的城市選擇用戶體驗更好，就模仿了美團的城市選擇。現在就和大家分享下，我在開發項目時的城市選擇如何做出來的。

??城市選擇看起來這么高大上，有木有很難實現呢？其實不然，做起來很簡單。定位和區域選擇也很簡單就不做了。在這個信息豐富的世界中，學啥都很簡單，只要你想，你就能站在巨人的肩膀上。

效果

說這么多，還不如看看效果圖

城市選擇效果圖

流程

o2o app城市選擇的基本流程

??在做城市選擇前，你必須有個城市列表的本地數據庫。在沒了解城市選擇前，我還以為城市列表數據需要在服務器獲取，然而卻是本地數據庫。我把數據庫放到assets，其實參考美團的。數據庫中有城市的名字、名字的拼音和名字的拼音縮寫。如果要增加區域選擇的話，還需要區域列表。

城市列表數據庫位置

拼音包

還需要導入漢語拼音工具包，對城市名字按首字字母進行排列。 pinyin4j的使用

漢語拼音工具包

;

右邊索引view

/**
 * Created by kn on 2016/3/17.
 */
public class CityIndexListView extends View {

    OnTouchingIndexChangedListener onTouchingIndexChangedListener;
    String[] str_index = {"熱門", "全部", "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"};
    int choose = -1;
    Paint paint = new Paint();
    boolean showBkg = false;

    public CityIndexListView(Context context) {
        super(context);
    }

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

    public CityIndexListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if (showBkg) {
            canvas.drawColor(getResources().getColor(R.color.grey_bg));
        }
        int height = getHeight();
        int width = getWidth();
        int singleHeight = height / str_index.length;
        for (int i = 0; i < str_index.length; i++) {
            paint.setColor(getResources().getColor(R.color.grey));
            paint.setTextSize(26);
            // paint.setTypeface(Typeface.DEFAULT_BOLD);
            paint.setAntiAlias(true);
            /*if (i == choose) {
                paint.setColor(Color.parseColor("#3399ff"));
                paint.setFakeBoldText(true);
            }*/
            float xPos = width / 2 - paint.measureText(str_index[i]) / 2;
            float yPos = singleHeight * i + singleHeight;
            canvas.drawText(str_index[i], xPos, yPos, paint);
            paint.reset();
        }
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        final int action = event.getAction();
        final float y = event.getY();
        final int oldChoose = choose;
        final OnTouchingIndexChangedListener listener = onTouchingIndexChangedListener;
        final int c = (int) (y / getHeight() * str_index.length);
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                showBkg = true;
                if (oldChoose != c && listener != null) {
                    if (c >= 0 && c < str_index.length) {
                        listener.onTouchingIndexChanged(str_index[c]);
                        choose = c;
                        invalidate();
                    }
                }
                break;
            case MotionEvent.ACTION_MOVE:
                if (oldChoose != c && listener != null) {
                    if (c >= 0 && c < str_index.length) {
                        listener.onTouchingIndexChanged(str_index[c]);
                        choose = c;
                        invalidate();
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                showBkg = false;
                choose = -1;
                invalidate();
                break;
        }
        return true;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

    public void setOnTouchingIndexChangedListener(
            OnTouchingIndexChangedListener onTouchingIndexChangedListener) {
        this.onTouchingIndexChangedListener = onTouchingIndexChangedListener;
    }

    public interface OnTouchingIndexChangedListener {
        void onTouchingIndexChanged(String s);
    }
}

在布局文件中引用

    ……
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        ……

        <io.github.kntryer.CitySelect.ui.view.CityIndexListView
            android:id="@+id/ci_lv_index"
            android:layout_width="25dip"
            android:layout_height="fill_parent"
            android:layout_alignParentRight="true"
            android:layout_marginBottom="2dp"
            android:layout_marginTop="7dp" />
    </RelativeLayout>    
    ……

??說這么多好像懵懂懵懂的，其實這只是給你了解個大概，如果你真的要做出來的話，還需要仔細研究一下源碼，這個代碼挺好的，希望可以認真看一下，有助于你對 adapter 的理解有很大幫助。提醒一下，我們不要一味用別人的代碼，有時候也因該了解一下如何實現，才能創造出更好的代碼，不是么?

源碼下載

?城市選擇