介绍
在开发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" /> <stroke android: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;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
getSupportActionBar().setDisplayShowHomeEnabled(false);// 隐藏logo
getSupportActionBar().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() {
@Override
public 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);
// 初始化PopupWindow
initPopupWindow(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() {
@Override
public 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个换行，所以%3
if (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() {
@Override
public 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();
}
@Override
public 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;
}
@Override
public 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" > <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:background="#ffffff" > <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="wrap_content" > </ListView> <!-- 选中索引时，屏幕中间显示的大写字母 --> <TextView android: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" /> <!-- 右侧快速索引列表 --> <LinearLayout android: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显示，其他隐藏 --> <TextView android: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" /> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingBottom="10dp" android:paddingLeft="10dp" android:paddingTop="10dp" > <TextView android: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;
}
}
}
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}
@Override
public Object getItem(int arg0) {
// TODO Auto-generated method stub
return list.get(arg0);
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return 0;
}
@Override
public 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());
// 显示index
String currentStr = item.getIndex();
// 上一项的index
String 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;
}
}
/**
* @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;// 中间显示标题的文本
@Override
public 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);
}
@Override
public 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);
}
@Override
public 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() {
@Override
public 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> {
@Override
public 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
7346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
