仿美團實作地域選擇（二）

介紹

上篇實作了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 
 */
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 
 */
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

仿美團實作地域選擇（二）

介紹

原理

實作

繼續閱讀

Java小案例——随機數猜測随機數猜測

nginx location中斜線的位置的重要性

27 Best Free Eclipse Plug-ins for Java Developer to be ProductiveCode Quality PluginsText Editor PluginsDependency ManagementVersion Control Integration PluginsFramework Development Continuous Integration Related PluginsOther Utility Plugins

Java String.format方法的簡單使用

neo4j之cypher使用文檔

GitHub連夜封殺！這份阿裡 10W 字内部 Java 字面試手冊到底有多強？

spark/scala關于【資源檔案】加載方法概述外部檔案加載方案測試資源檔案打包入jar包中小結

mybatis_入門程式Mybatis入門

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Effective Java 8:通用程式設計

OOM三種類型

工廠模式-三種類型

【遞歸】高效率求2的n次幂

Android APK檔案反編譯Android APK檔案反編譯

win10本地scala和spark安裝安裝scala安裝spark

scala (3) Function 和 Method