ListView实现城市快速索引功能

进点点

于 2016-08-03 23:12:53 发布

阅读量1.4k

点赞数

分类专栏： android-UI 文章标签：索引 android ui listview

本文链接：https://blog.youkuaiyun.com/TobeStrong_csdn/article/details/52108227

版权

android-UI 专栏收录该内容

3 篇文章

订阅专栏

今天我们用ListView+自定义组件SlideBar来实现城市的快速索引(当然其他相似的功能也是一样的)，虽然网上已经有很多大神做出来了，也更加的丰富，但我还是做一个小demo来练习巩固一下，毕竟多动动手总没坏处是吧，哈哈，先看效果图吧

看了效果图后我们就开始实现吧，其实也是很简单的(卧槽，图怎么这么大 =。=)

先是我们的布局文件，整体非常简单的布局：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <FrameLayout
            android:id="@+id/city_loacal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <ListView
                android:id="@+id/city_rv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"/>
            <TextView
                android:id="@+id/float_letter"
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:layout_gravity="center"
                android:background="#dcdcdc"
                android:gravity="center"
                android:textSize="40sp"
                android:visibility="gone" />
            <com.cn.listviewsliderbar.SlideBar
                android:id="@+id/slidebar"
                android:layout_width="23dp"
                android:background="#dcdcdc"
                android:layout_height="wrap_content"
                android:layout_gravity="right|bottom" />
    </FrameLayout>
</LinearLayout>

布局就是这么简单，然后是我们的Activity的代码:

import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ListView;
import android.widget.TextView;

/**
 */
public class CityActivty extends Activity implements SlideBar.OnTouchLetterChangeListenner{
    CityListAdapter mAdapter;
    TextView float_letter;
    ListView cityList;
    SlideBar slideBar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_city);

        mAdapter = new CityListAdapter(this);

        cityList= (ListView) findViewById(R.id.city_rv);
        float_letter = (TextView) findViewById(R.id.float_letter);
        slideBar= (SlideBar) findViewById(R.id.slidebar);
//      cityRv.addHeaderView(v);
        cityList.setAdapter(mAdapter);
        slideBar.setOnTouchLetterChangeListenner(this);
    }

    @Override
    public void onTouchLetterChange(boolean isTouched, String s) {
        float_letter.setText(s);
        if (isTouched) {
            float_letter.setVisibility(View.VISIBLE);
        } else {
            float_letter.postDelayed(new Runnable() {
                @Override
                public void run() {
                    float_letter.setVisibility(View.GONE);
                }
            }, 100);
        }
        int moveToPosition = mAdapter
                .getPositionForSection(s.charAt(0));
        if (moveToPosition >= 0) {
            cityList.setSelectionFromTop(moveToPosition, 0);
        }
    }
}

OnTouchLetterChangeListener是我们SlideBar里面定义的接口，是SlideBar的滑动与listView相关联的监听方法，我们通过实现它的方法onTouchLetterChange来调用ListView的setSelectionFromTop来完成索引功能。

下面是Adapter的代码：

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.SectionIndexer;
import android.widget.TextView;
import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.List;
import java.util.Locale;


public class CityListAdapter extends BaseAdapter implements SectionIndexer{

    Context context;
    List<CityEntity> data=getCityList();

    public CityListAdapter(Context context) {
        this.context = context;
    }

    @Override
    public int getCount() {
        return data.size();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        CityViewHolder_2 holder_2 = null;
        if (convertView == null){
                holder_2=new CityViewHolder_2();
                convertView= LayoutInflater.from(context).inflate(R.layout.item_listview_city,null);
                holder_2.word_tv= (TextView) convertView.findViewById(R.id.city_word_tv);
                holder_2.city_tv= (TextView) convertView.findViewById(R.id.city_list_tv);
                convertView.setTag(holder_2);
        }else{
                holder_2= (CityViewHolder_2) convertView.getTag();
        }
            holder_2.city_tv.setText(getCityList().get(position).getCityname());
            holder_2.word_tv.setText(getFirstChar(getCityList().get(position).getWord()));

            int section = getSectionForPosition(position);
            int sectionPos = getPositionForSection(section);
            if(position == sectionPos) {
                holder_2.word_tv.setVisibility(View.VISIBLE);
            } else {
                holder_2.word_tv.setVisibility(View.GONE);
            }

        return convertView;
    }

    private String getFirstChar(String sortKey) {
        return sortKey.substring(0, 1).toUpperCase(Locale.CHINA);
    }

    @Override
    public Object[] getSections() {
        return new Object[0];
    }

    @Override
    public int getPositionForSection(int sectionIndex) {
        int position = -1;
        for (int i = 0; i < data.size(); i++) {
            int currentChar = getSectionForPosition(i);
            if(currentChar == sectionIndex) {
                position = i;
                break;
            }
        }
        return position;
    }

    @Override
    public int getSectionForPosition(int position) {
        return data.get(position).getWord().toUpperCase(Locale.CHINA).charAt(0);
    }

    class CityViewHolder_2{
        TextView word_tv,city_tv;
    }

    @Override
    public Object getItem(int position) {
        return null;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    public List<CityEntity> getCityList(){
        List<CityEntity> data=new ArrayList<CityEntity>();
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("金华","jinhua"));
        data.add(new CityEntity("金华","jinhua"));
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("金华","jinhua"));
        data.add(new CityEntity("金华","jinhua"));
        data.add(new CityEntity("金华","jinhua"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("金华","jinhua"));
        data.add(new CityEntity("金华","jinhua"));
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("成都","chengdu"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("郑州","zhengzhou"));
        data.add(new CityEntity("金华","jinhua"));
        data.add(new CityEntity("金华","jinhua"));
        data.add(new CityEntity("金华","jinhua"));

        Collections.sort(data, new Comparator<CityEntity>() {
            @Override
            public int compare(CityEntity lhs, CityEntity rhs) {
                return lhs.getWord().compareTo(rhs.getWord());
            }
        });
        return data;
    }
}

这个里面的重点是SectionIndexer这个接口，我们一般的索引都会用到这个接口，这个接口它主要实现了两个方法是： getSectionForPosition()和getPositionForSection() ，前者是根据位置找索引号，后者是根据索引号找位置，具体的不同大家可以参考一下博客：http://blog.youkuaiyun.com/jack_l1/article/details/14165291

到这里我们这个功能的具体实现就这么多了，因为功能还是比较单一的，所以代码量也不是很多，SlideBar的代码会和源码一起给大家o(^▽^)o

---------------------------------------------------END

源码下载地址：http://download.youkuaiyun.com/detail/tobestrong_csdn/9594317