介紹

在開發O2O相關應用的時候，肯定會有定位，選擇所在城市，選擇地域，然后再向服務器請求該地區的相關數據，這時就需要我們提供一個導向讓用戶選擇所在區域。

看來看去，最終還是選擇模仿美團，感覺用戶體驗最好。

《-美團的地域選擇看起來是這樣的

原理

1、定位我們可以使用第三方API，例如百度地圖，騰訊地圖等，官方文檔寫的非常清楚了。

百度地圖地址：http://developer.baidu.com/map/index.php?title=androidsdk，這里不再多述，demo也不涉及定位相關代碼。

2、對于RadioButton的布局，之前嘗試過使用GridLayout，GridView，但是都無法完美的展示布局效果，最后決定使用LinearLayout+RadioButton動態生成，通過view.getChildCount()，view.getChildAt()循環遍歷所有的RadionButton，模擬實現換行的RadioGroup效果。

3、PopupWindow默認情況下窗口后的背景不是黑色透明的，我們可以通過這是窗口的alpha實現

　　　　　　　　　 WindowManager.LayoutParams lp = getWindow().getAttributes();lp.alpha = 0.4f;getWindow().setAttributes(lp);

然后在窗口關閉的時候又恢復

mPopuWindow.setOnDismissListener(new OnDismissListener() {// 在dismiss中恢復透明度public void onDismiss() {WindowManager.LayoutParams lp = getWindow().getAttributes();lp.alpha = 1f;getWindow().setAttributes(lp);}});

4、自定義RadioButton背景使用xml定義shape即可，然后通過selector定義狀態樣式。

<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" ><corners android:radius="3dp" /><solid android:color="#FFFFFF" /><strokeandroid:width="1dp"android:color="#cecece" /> </shape> <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"><item android:drawable="@drawable/radio_district_p" android:state_checked="true" /><item android:drawable="@drawable/radio_district_p" android:state_pressed="true"/><item android:drawable="@drawable/radio_district_n"/> </selector>

實現

核心代碼

/*** @author Leestar54 * http://www.cnblogs.com/leestar54*/ package com.example.popupwindow;import java.util.ArrayList;import android.support.v7.app.ActionBarActivity; import android.graphics.drawable.ColorDrawable; import android.os.Bundle; import android.view.LayoutInflater; import android.view.Menu; import android.view.MenuItem; import android.view.View; import android.view.View.OnClickListener; import android.view.WindowManager; import android.widget.LinearLayout; import android.widget.LinearLayout.LayoutParams; import android.widget.PopupWindow; import android.widget.PopupWindow.OnDismissListener; import android.widget.RadioButton; import android.widget.TextView;public class MainActivity extends ActionBarActivity {private PopupWindow mPopuWindow;private LinearLayout ll_location;private TextView txt_city_d;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);getSupportActionBar().setDisplayShowHomeEnabled(false);// 隱藏logogetSupportActionBar().setDisplayShowCustomEnabled(true);getSupportActionBar().setCustomView(R.layout.actionbar);txt_city_d = (TextView) getSupportActionBar().getCustomView().findViewById(R.id.txt_city);mPopuWindow = new PopupWindow(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);mPopuWindow.setOutsideTouchable(true);// 點擊外部可關閉窗口mPopuWindow.setFocusable(true);mPopuWindow.update();mPopuWindow.setOnDismissListener(new OnDismissListener() {// 在dismiss中恢復透明度public void onDismiss() {WindowManager.LayoutParams lp = getWindow().getAttributes();lp.alpha = 1f;getWindow().setAttributes(lp);}});ll_location = (LinearLayout) getSupportActionBar().getCustomView().findViewById(R.id.ll_location);ll_location.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// 這兩行代碼意義在于點擊窗體外時獲得響應ColorDrawable cd = new ColorDrawable(0x000000);mPopuWindow.setBackgroundDrawable(cd);// 打開窗口時設置窗體背景透明度WindowManager.LayoutParams lp = getWindow().getAttributes();lp.alpha = 0.4f;getWindow().setAttributes(lp);mPopuWindow.showAsDropDown(getSupportActionBar().getCustomView());}});// 模擬數據ArrayList<District> dlist = new ArrayList<District>();District d1 = new District();d1.setName("青秀區");District d2 = new District();d2.setName("興寧區");District d3 = new District();d3.setName("西鄉塘區");District d4 = new District();d4.setName("江南區");District d5 = new District();d5.setName("良慶區");District d6 = new District();d6.setName("近郊");dlist.add(d1);dlist.add(d2);dlist.add(d3);dlist.add(d4);dlist.add(d5);dlist.add(d6);// 初始化PopupWindowinitPopupWindow(dlist);}private void initPopupWindow(ArrayList<District> list) {LinearLayout root = (LinearLayout) LayoutInflater.from(MainActivity.this).inflate(R.layout.popup_district, null);// ((TextView) root.findViewById(R.id.txt_city)).setText(cityname);((LinearLayout) root.findViewById(R.id.ll_change_cities)).setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// Intent it = new Intent(MainActivity.this,// CitiesActivity.class);// startActivityForResult(it, 54);// mPopuWindow.dismiss();}});final LinearLayout view = (LinearLayout) root.findViewById(R.id.ll_district);LinearLayout ll = null;// 在列表最前面添加全部District d = new District();d.setName("全城");list.add(0, d);// 代碼動態生成for (int i = 0; i < list.size(); i++) {// 這里LinearLayout肯定會實例化，因為一開始i=0，由于3個換行，所以%3if (i % 3 == 0) {ll = new LinearLayout(MainActivity.this);ll.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT));ll.setOrientation(LinearLayout.HORIZONTAL);view.addView(ll);}District de = list.get(i);// 由于樣式設置麻煩，所以直接用xml聲明樣式了。View v = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_radio_district, null);((RadioButton) v.findViewById(R.id.rb_district)).setText(de.getName());((RadioButton) v.findViewById(R.id.rb_district)).setTag(de);LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);lp.weight = 1;// 一開始，設置“全部”RadioButton為選中狀態if (i == 0) {((RadioButton) v.findViewById(R.id.rb_district)).setChecked(true);}((RadioButton) v.findViewById(R.id.rb_district)).setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {RadioButton rb = (RadioButton) v;// check事件發生在click之前，模擬group操作。if (rb.isChecked()) {// 當點擊Button時，遍歷布局中所有的RadioButton，設置為未選中。for (int i = 0; i < view.getChildCount(); i++) {LinearLayout l = (LinearLayout) view.getChildAt(i);for (int j = 0; j < l.getChildCount(); j++) {// 根據xml布局的定義，可以知道具體是在第幾層LinearLayout里。RadioButton b = (RadioButton) ((LinearLayout) ((LinearLayout) l.getChildAt(j)).getChildAt(0)).getChildAt(0);b.setChecked(false);}}}// 完成后，設置該按鈕選中rb.setChecked(true);// 這里開始處理點擊District d = (District) rb.getTag();txt_city_d.setText("南寧" + "-" + d.getName());mPopuWindow.dismiss();}});ll.addView(v, lp);}// 填充RadioButton空白，使其布局對其，保證每行都有3個，只不過設置看不見而已。for (int i = list.size() % 3; i < 3 && i != 0; i++) {District dd = list.get(i);View v = LayoutInflater.from(MainActivity.this).inflate(R.layout.item_radio_district, null);((RadioButton) v.findViewById(R.id.rb_district)).setText(dd.getName());((RadioButton) v.findViewById(R.id.rb_district)).setVisibility(View.INVISIBLE);LayoutParams lp = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.MATCH_PARENT);lp.weight = 1;ll.addView(v, lp);}mPopuWindow.setContentView(root);mPopuWindow.update();}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {// Inflate the menu; this adds items to the action bar if it is present.getMenuInflater().inflate(R.menu.main, menu);return true;}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {// Handle action bar item clicks here. The action bar will// automatically handle clicks on the Home/Up button, so long// as you specify a parent activity in AndroidManifest.xml.int id = item.getItemId();if (id == R.id.action_settings) {return true;}return super.onOptionsItemSelected(item);} }

Demo看起來是這樣的

?

demo下載地址：

鏈接：http://pan.baidu.com/s/1mg5NrlA 密碼：d6ii

介紹如何實現帶有首字母的快速索引list，進行城市選擇，我也是參考了相關博文才弄出來的，知道了原理，才發現如此簡單。

其中有個開源項目可以參考，但與本文實現的方式略有不同。

地址：https://github.com/woozzu/IndexableListView

美團的城市選擇看起來是這樣的。本例中不包含搜索，有空再模仿研究下。

原理

1、側邊快速索引和首字母直接在framelayout中布局的，也可以用代碼動態生成。

2、獲取拼音首字寫用到了pinyin4j開源庫，但是這樣效率低下，可以考慮數據庫字段冗余拼音等方式提高效率。

3、使用Comparator對獲取首字母的列表進行了排序。

4、按下快速索引之后，使用Listview.setSelectionFromTop進行定位。

實現

activity_city_list.xml布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="fill_parent"android:layout_height="match_parent"android:background="#ffffff"android:orientation="vertical" ><FrameLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="#ffffff" ><ListViewandroid:id="@+id/listView1"android:layout_width="match_parent"android:layout_height="wrap_content" ></ListView><!-- 選中索引時，屏幕中間顯示的大寫字母 --><TextViewandroid:id="@+id/tv"android:layout_width="60dp"android:layout_height="60dp"android:layout_gravity="center"android:background="#aaffffff"android:gravity="center"android:text="A"android:textColor="#aa000000"android:textSize="30sp" /><!-- 右側快速索引列表 --><LinearLayoutandroid:id="@+id/layout"android:layout_width="wrap_content"android:layout_height="fill_parent"android:layout_gravity="right"android:layout_marginBottom="3dp"android:layout_marginLeft="3dp"android:layout_marginTop="3dp"android:background="#d7d7d7"android:gravity="center"android:orientation="vertical" ></LinearLayout></FrameLayout></LinearLayout>

item_city.xml布局

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical" ><!-- 列表中的index首字母，之后第一個首字母下的item顯示，其他隱藏 --><TextViewandroid:id="@+id/tv_index"android:layout_width="fill_parent"android:layout_height="wrap_content"android:background="#777777"android:paddingBottom="2dp"android:paddingLeft="10dp"android:paddingTop="2dp"android:text="index"android:textColor="#ffffff" /><LinearLayoutandroid:layout_width="fill_parent"android:layout_height="wrap_content"android:orientation="horizontal"android:paddingBottom="10dp"android:paddingLeft="10dp"android:paddingTop="10dp" ><TextViewandroid:id="@+id/tv1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_weight="1"android:text="城市" /></LinearLayout></LinearLayout>

CityListAdapter

/*** @author Leestar54 * http://www.cnblogs.com/leestar54*/ package com.example.popupwindow;import java.util.HashMap; import java.util.List; import java.util.Map;import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView;public class CityListAdapter extends BaseAdapter {private Context ctx;private ViewHolder holder;List<CityListItem> list;Map<String, Integer> selector;// 鍵值是索引表的字母，值為對應在listview中的位置String index[];//字母表public CityListAdapter(Context context, List<CityListItem> list, String[] index) {this.ctx = context;this.list = list;this.index = index;selector = new HashMap<String, Integer>();// 循環字母表，找出list中對應字母的位置for (int j = 0; j < index.length; j++) {for (int i = 0; i < list.size(); i++) {// 由于已經按照字母排序過了，匹配中第一個就找下一個下標了。if (list.get(i).getIndex().equals(index[j].toLowerCase())) {selector.put(index[j], i);break;}}}}@Overridepublic int getCount() {// TODO Auto-generated method stubreturn list.size();}@Overridepublic Object getItem(int arg0) {// TODO Auto-generated method stubreturn list.get(arg0);}@Overridepublic long getItemId(int position) {// TODO Auto-generated method stubreturn 0;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {try {if (convertView == null) {holder = new ViewHolder();convertView = LayoutInflater.from(ctx).inflate(R.layout.item_city, null);holder.tv1 = (TextView) convertView.findViewById(R.id.tv1);holder.index = (TextView) convertView.findViewById(R.id.tv_index);convertView.setTag(holder);} else {holder = (ViewHolder) convertView.getTag();}// 綁定數據CityListItem item = list.get(position);holder.tv1.setText(item.getName());// 顯示indexString currentStr = item.getIndex();// 上一項的indexString previewStr = (position - 1) >= 0 ? list.get(position - 1).getIndex() : " ";//判斷是否上一次的存在if (!previewStr.equals(currentStr)) {holder.index.setVisibility(View.VISIBLE);holder.index.setText(currentStr);// 文本顯示當前滑動的字母} else {holder.index.setVisibility(View.GONE);}} catch (OutOfMemoryError e) {Runtime.getRuntime().gc();} catch (Exception ex) {ex.printStackTrace();}return convertView;}class ViewHolder {TextView tv1;TextView index;//索引字母}public Map<String, Integer> getSelector() {return selector;}public void setSelector(Map<String, Integer> selector) {this.selector = selector;}public String[] getIndex() {return index;}public void setIndex(String[] index) {this.index = index;} } CitiesActivity

/*** @author Leestar54 * http://www.cnblogs.com/leestar54*/ package com.example.popupwindow;import java.text.Collator; import java.util.ArrayList; import java.util.Collections; import java.util.Comparator; import java.util.List;import android.graphics.Color; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.MenuItem; import android.view.MotionEvent; import android.view.View; import android.view.View.OnTouchListener; import android.widget.LinearLayout; import android.widget.LinearLayout.LayoutParams; import android.widget.ListView; import android.widget.TextView;public class CitiesActivity extends ActionBarActivity {LinearLayout layoutIndex;/** 字母索引表 */private 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" };// "#",private int height;// 字體高度private List<CityListItem> listData;private ListView listView;private CityListAdapter adapter;private TextView tv_show;// 中間顯示標題的文本@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);getSupportActionBar().setTitle("城市列表");getSupportActionBar().setDisplayHomeAsUpEnabled(true);getSupportActionBar().setHomeButtonEnabled(true);setContentView(R.layout.activity_city_list);layoutIndex = (LinearLayout) this.findViewById(R.id.layout);layoutIndex.setBackgroundColor(Color.parseColor("#00ffffff"));getData();tv_show = (TextView) findViewById(R.id.tv);tv_show.setVisibility(View.INVISIBLE);}@Overridepublic boolean onOptionsItemSelected(MenuItem item) {switch (item.getItemId()) {case android.R.id.home:finish();return true;}return false;}/*** 獲取城市列表*/public void getData() {CityListItem ci1=new CityListItem();ci1.setName("北京");CityListItem ci2=new CityListItem();ci2.setName("上海");CityListItem ci3=new CityListItem();ci3.setName("廣州");CityListItem ci4=new CityListItem();ci4.setName("廣西");CityListItem ci5=new CityListItem();ci5.setName("長沙");CityListItem ci6=new CityListItem();ci6.setName("貴陽");CityListItem ci7=new CityListItem();ci7.setName("福建");ArrayList<CityListItem> list=new ArrayList<CityListItem>();list.add(ci1);list.add(ci1);list.add(ci1);list.add(ci1);list.add(ci1);list.add(ci1);list.add(ci2);list.add(ci2);list.add(ci2);list.add(ci2);list.add(ci2);list.add(ci2);list.add(ci3);list.add(ci3);list.add(ci3);list.add(ci3);list.add(ci3);list.add(ci4);list.add(ci4);list.add(ci4);list.add(ci4);list.add(ci4);list.add(ci5); list.add(ci5); list.add(ci5); list.add(ci5);list.add(ci6);list.add(ci6);list.add(ci6);list.add(ci6);list.add(ci7);list.add(ci7);list.add(ci7);list.add(ci7);//獲取首字母for (CityListItem cityListItem : list) {cityListItem.setIndex(String.valueOf(ChineseUtils.getHanyuPinyin(cityListItem.getName()).charAt(0)));}//排序LetterComparator lc = new LetterComparator();Collections.sort(list, lc);listView = (ListView) findViewById(R.id.listView1);adapter = new CityListAdapter(CitiesActivity.this, list, str_index);listView.setAdapter(adapter);}@Overridepublic void onWindowFocusChanged(boolean hasFocus) {// 在oncreate里面執行下面的代碼沒反應，因為oncreate里面得到的getHeight=0// System.out.println("layoutIndex.getHeight()=" +// layoutIndex.getHeight());height = layoutIndex.getHeight() / str_index.length;getIndexView();}/** 繪制索引列表 */public void getIndexView() {LinearLayout.LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT, height);// params.setMargins(10, 5, 10, 0);for (int i = 0; i < str_index.length; i++) {final TextView tv = new TextView(this);tv.setLayoutParams(params);tv.setText(str_index[i]);tv.setPadding(10, 0, 10, 0);layoutIndex.addView(tv);layoutIndex.setOnTouchListener(new OnTouchListener() {@Overridepublic boolean onTouch(View v, MotionEvent event){float y = event.getY();int index = (int) (y / height);if (index > -1 && index < str_index.length) {// 防止越界String key = str_index[index];if (adapter.getSelector().containsKey(key)) {// 獲得位置int pos = adapter.getSelector().get(key);if (listView.getHeaderViewsCount() > 0) {// 防止ListView有標題欄，本例中沒有。listView.setSelectionFromTop(pos + listView.getHeaderViewsCount(), 0);} else {listView.setSelectionFromTop(pos, 0);// 滑動到第一項}tv_show.setVisibility(View.VISIBLE);tv_show.setText(str_index[index]);}}switch (event.getAction()) {case MotionEvent.ACTION_DOWN://按下顏色layoutIndex.setBackgroundColor(Color.parseColor("#aaffffff"));break;case MotionEvent.ACTION_MOVE:break;case MotionEvent.ACTION_UP://釋放還原layoutIndex.setBackgroundColor(Color.parseColor("#00ffffff"));tv_show.setVisibility(View.INVISIBLE);break;}return true;}});}}private class LetterComparator implements Comparator<CityListItem> {@Overridepublic int compare(CityListItem lhs, CityListItem rhs) {return Collator.getInstance().compare(lhs.getIndex(), rhs.getIndex());}} }

最后看起來應該是這樣的

?鏈接：http://pan.baidu.com/s/1o6keEKE 密碼：ssbn

上面附件的備份下載地址：

http://download.csdn.net/detail/jdsjlzx/9070539

總結

以上是生活随笔為你收集整理的仿美团实现地域选择和城市列表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。