??在開發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 的理解有很大幫助。提醒一下，我們不要一味用別人的代碼，有時候也因該了解一下如何實現，才能創造出更好的代碼，不是么?
源碼下載
?城市選擇
