城市选择

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

源码

  城市选择