城市选择

  在开发O2O相关应用的时候，选择所在城市这个东西肯定不会少。个人感觉美团的城市选择用户体验更好，就模仿了美团的城市选择。现在就和大家分享下，我在开发项目时的城市选择如何做出来的。
  城市选择看起来这么高大上，有木有很难实现呢？其实不然，做起来很简单。定位和区域选择也很简单就不做了。在这个信息丰富的世界中，学啥都很简单，只要你想，你就能站在巨人的肩膀上。

• 说这么多，还不如看看效果图

;

• 我们先了解一下选择城市的基本流程

;

• 在做城市选择前，你必须有个城市列表的本地数据库。在没了解城市选择前，我还以为城市列表数据需要在服务器获取，然而却是本地数据库。我把数据库放到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 的理解。提醒一下，我们不要一味用别人的代码，有时候也因该了解一下如何实现，才能创造出更好的代码，不是么?

• 源码

  城市选择