仿美团实现地域选择（一）

• 
  

转

仿美团实现地域选择（一）

分类：android

（200） （0） 举报 收藏

介绍

在开发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);
1
2
3

然后在窗口关闭的时候又恢复

    mPopuWindow.setOnDismissListener(new OnDismissListener() {

            // 在dismiss中恢复透明度
            public void onDismiss() {
                WindowManager.LayoutParams lp = getWindow().getAttributes();
                lp.alpha = 1f;
                getWindow().setAttributes(lp);
            }
        });
1
2
3
4
5
6
7
8
9

4、自定义RadioButton背景使用xml定义shape即可，然后通过selector定义状态样式。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas./apk/res/android" >
    <corners android:radius="3dp" />
    <solid android:color="#FFFFFF" />
    <stroke
        android:width="1dp"
        android:color="#cecece" />
</shape>
1
2
3
4
5
6
7
8

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas./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>
1
2
3
4
5
6

实现

核心代码

/**
 * @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);
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222

Demo看起来是这样的

demo下载地址：

链接：http://pan.baidu.com/s/1mg5NrlA 密码：d6ii

第二篇文章，我们将进一步实现城市列表选择，可以根据首字母进行快速索引。

我不怕千万人阻挡，只怕自己投降。

顶0 踩0

 

 

onPrepareOptionsMenu 和onCreateOptionsMenu 的区别

仿美团实现地域选择（二）