城市选择

  在开发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 的理解有很大帮助。提醒一下，我们不要一味用别人的代码，有时候也因该了解一下如何实现，才能创造出更好的代码，不是么?

源码下载

 城市选择