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

介绍

上篇实现了PopupWindow选择地域，这篇介绍如何实现带有首字母的快速索引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;
    }
}

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;// 中间显示标题的文本

    @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());
        }
    }
}

最后看起来应该是这样的

demo地址：

链接：http://pan.baidu.com/s/1o6keEKE 密码：ssbn

大多都是参考别人的，还有许多地方不完善呢，慢慢来吧。

参考：

http://blog.csdn.net/pathuang68/article/details/6692882

http://www.cnblogs.com/Jaylong/archive/2013/04/13/android_view.html

http://blog.csdn.net/wwj_748/article/details/17305195

http://blog.csdn.net/xiaanming/article/details/12684155

时间： 2024-10-25 06:42:40

仿美团实现地域选择（二）的相关文章

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

介绍 在开发O2O相关应用的时候,肯定会有定位,选择所在城市,选择地域,然后再向服务器请求该地区的相关数据,这时就需要我们提供一个导向让用户选择所在区域. 看来看去,最终还是选择模仿美团,感觉用户体验最好. <-美团的地域选择看起来是这样的 原理 1.定位我们可以使用第三方API,例如百度地图,腾讯地图等,官方文档写的非常清楚了. 百度地图地址:http://developer.baidu.com/map/index.php?title=androidsdk,这里不再多述,demo也不涉及定位相

高仿美团&lt;二&gt;

由于在简书上已经把项目的思路和个个模块写的很清楚了. 点击以下链接高仿美团<2> 版权声明:本文为博主原创文章,未经博主允许不得转载.

开源分享 一（StickerCamera + 仿微信多图选择）

开源分享 一 由于项目需要,后期会在项目中加入给图片贴图或者打标签的功能,无意在网上发现一个类似的开源项目,便在此分享,与大家分享学习.除了该项目外,也同时分享一个仿微信实现多图选择的例子,下面做简单介绍. 一.StickerCamera 介绍: 一款集成了相机,图片裁剪,给图片贴图,打标签的APP.所需要的编译是 java 8. 运行效果展示: 使用说明: 实现相机功能 实现对图片进行裁剪功能 图片的滤镜功能 能为图片添加贴纸(贴纸可移动,放大,旋转) 能为图片添加标签(同样可以移动) 本地保

仿美团二级菜单

最近要做一个仿美团似的二级菜单 在csdn上找了demo 下载下来有错误不能运行   自己又整理了一下  终于可以运行实现效果了.布局xml就不贴出代码了,demo可以去csdn去下载:(后续补上链接) 1)分析思路,最外围的是一个Activity,顶部包含了一个View的容器,这个容器主要是装载ToggleButton来实现诸如美团里面的“美食,全城,理我最近,刷选”这一行.这一行一点就会弹出对应的下来菜单. 2)下拉菜单是如何实现的呢?,这里我们利用了PopupWindow来实现这一弹出式窗

Android开发：仿美团下拉列表菜单，帮助类，复用简单

最近在项目中需要用到下拉菜单,公司比较推崇美团的下拉菜单,于是要实现该功能,想着,这个功能应该是一个经常会用到的,于是何不写一个帮助类,只要往这个类里面传入特定的参数,既可以实现下来菜单,而且还可以实现菜单选择的回调,既可以重复使用,有简单便捷 首先,查看界面效果图 界面倒是比较简单,主要列下功能: 这个是靠一个帮助类实现的,下次想在自己的项目中实现该功能,一句引用代码,传入特定的参数既可以实现该功能 菜单弹出的时候,背景变灰色,菜单收回,背景回复白色 自动给选定的选项添加背景色,如果下次选择的

Android 轻松实现仿淘宝地区选择

代码地址如下:<br>http://www.demodashi.com/demo/11122.html 一.准备工作 Android开发环境,学习Android的童鞋肯定都知道了,这里我就不累述了. 二.运行效果 说了效果可能不太直观,下面上两张图看看效果淘宝地区选择效果 再来一张自己的效果 gif的效果可能不太好,大家自己用Android手机打开淘宝看看 三.项目结构 四.程序实现 展示很简单,ListView就可以了.对于动画效果,只需要在getView的时候获取到要展示的View,通过属

Docker 性质及版本选择 [二]

Docker 性质及版本选择 [二] Docker 时间:2016年11月8日 本文由李磊提供--->QQ:550376681 Docker的性质 Docker的组成其实很简单.你需要搭建registry,专属于你自己的私有仓库,然后就是docker的镜像和docker的容器.Docker的镜像,就类似与windos的系统盘,你只有有了它,你才能够跑起来容器. Docker的容器,很多人下载一个镜像,然后跑起来一个容器,就想进容器里看一看究竟.各位看官,很明确的告诉你们,你这个想法本身就是错误的

高仿美团应用客户端项目源码

源码Tuan,这个案例是模仿MJ老师ipad版美团(swift版),高仿美团iOS版,版本号:5.7, 已更新到Swift 2.0 基于Xcode 7 源码下载: http://code.662p.com/view/11383.html <ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore_js_op> <ignore

高仿美团应用客户端布局源码

高仿美团框架基本已搭好.代码简单易懂,适合新人.适合新人. 源码下载:http://code.662p.com/list/12_1.html新人. <ignore_js_op> <ignore_js_op> 详细说明:http://ios.662p.com/thread-2774-1-1.html