Android 开源库StickyListHeadersListView来实现ListView列表分组效果

  项目中有一新的需求,要求能像一些Android机带“联系人列表”一样,数据可以自动分组,且在列表滑动过程中,列表头固定在顶部,效果图如下:

Android 开源库StickyListHeadersListView来实现ListView列表分组效果


  下面就带大家实现上面的效果, 首先,我们要介绍的一个重要的开源库:StickyListHeaders,它的Github地址是:https://github.com/emilsjolander/StickyListHeaders, 使用该库,可以更加方便的实现ListView数据分组,且Header固定在顶部。

  首先,把github上的项目下载下来,加压后,可看到其中有一个library库,我们需要将该库(Module)导入到新建的项目中,并在自己的Module引入该Library。

Android 开源库StickyListHeadersListView来实现ListView列表分组效果


  项目建成后,开始使用该库进行开发:

1. 布局中引入StickyListHeadersListView:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <se.emilsjolander.stickylistheaders.StickyListHeadersListView
        android:id="@+id/list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:cacheColorHint="#00000000"
        android:clipToPadding="false"
        android:drawSelectorOnTop="true"
        android:fastScrollEnabled="true"
        android:listSelector="#00000000"
        android:overScrollMode="never"
        android:scrollbarStyle="outsideOverlay" />

</RelativeLayout>

2. 创建要显示的数据实体

public class LangyaSimple {

    private String id;
    private String proj_id;
    private String title;
    private String desc;
    private String project_title;

    public LangyaSimple(String id, String proj_id, String title, String desc, String project_title) {
        this.id = id;
        this.proj_id = proj_id;
        this.title = title;
        this.desc = desc;
        this. = project_title;
    }

    public String getId() {
        return id;
    }

    public void setId(String id) {
        this.id = id;
    }

    public String getProj_id() {
        return proj_id;
    }

    public void setProj_id(String proj_id) {
        this.proj_id = proj_id;
    }

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public String getDesc() {
        return desc;
    }

    public void setDesc(String desc) {
        this.desc = desc;
    }

    public String getProject_title() {
        return project_title;
    }

    public void setProject_title(String project_title) {
        this.project_title = project_title;
    }

    @Override
    public String toString() {
        return "LangyaSimple{" +
                "id='" + id + '\'' +
                ", proj_id='" + proj_id + '\'' +
                ", title='" + title + '\'' +
                ", desc='" + desc + '\'' +
                ", project_title='" + project_title + '\'' +
                '}';
    }
}

注: id是data数据的id,proj_id是该数据所属的组的意思,proj_title是该组的名字;


3. 定义StickyListHeadersListView要显示的适配器:

import android.app.Activity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

import se.emilsjolander.stickylistheaders.StickyListHeadersAdapter;

public class LangyaAdapter extends BaseAdapter implements StickyListHeadersAdapter {

    private LayoutInflater inflater;

    private List<LangyaSimple> mPlanDetails;

    public LangyaAdapter(Activity context, List<LangyaSimple> mPlanDetails) {
        inflater = LayoutInflater.from(context);
        this.mPlanDetails = mPlanDetails;

    }

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

    @Override
    public Object getItem(int position) {
        return mPlanDetails.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;

        if (convertView == null) {
            holder = new ViewHolder();
            convertView = inflater.inflate(R.layout.list_item_proj_plan, parent, false);

            holder.img_plan = (ImageView) convertView.findViewById(R.id.img_plan);

            holder.text_plan_name = (TextView) convertView.findViewById(R.id.text_plan_name);
            holder.text_plan_info = (TextView) convertView.findViewById(R.id.text_plan_info);

            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        LangyaSimple planDetail = this.mPlanDetails.get(position);

        if (planDetail != null) {

//            ImageLoaderUtil.getInstance().displayListItemImage(imgUrl, holder.img_plan);
            holder.text_plan_name.setText(planDetail.getTitle());
            holder.text_plan_info.setText(planDetail.getDesc());
        }

        return convertView;
    }

    @Override
    public View getHeaderView(int position, View convertView, ViewGroup parent) {
        HeaderViewHolder holder;
        if (convertView == null) {
            holder = new HeaderViewHolder();
            convertView = inflater.inflate(R.layout.proj_plans_header, parent, false);
            holder.text = (TextView) convertView.findViewById(R.id.text1);
            convertView.setTag(holder);
        } else {
            holder = (HeaderViewHolder) convertView.getTag();
        }
        //set proj_plans_header text as first char in name
        String headerText = this.mPlanDetails.get(position).getProject_title();
        holder.text.setText(headerText);
        return convertView;
    }

    @Override
    public long getHeaderId(int position) {
        //return the first character of the country as ID because this is what headers are based upon
        return Long.parseLong(this.mPlanDetails.get(position).getProj_id());
    }

    class HeaderViewHolder {
        TextView text;
    }

    class ViewHolder {
        ImageView img_plan;

        TextView text_plan_name;

        TextView text_plan_info;
    }
}

  适配器是List数据显示最重要的部分,为了实现数据分组,该适配器必须要实现StickyListHeadersAdapter接口,并重写其中的getHeaderView(int position, View convertView, ViewGroup parent);和long getHeaderId(int position);方法。 

  说明:

     getHeaderView方法指定了Header的View的显示;

     getHeaderId决定header出现的时机,如果当前的headerid和前一个headerid不同时,就会显示。


4. 定义数据显示的Activity:

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.AdapterView;

import java.util.ArrayList;
import java.util.List;

import se.emilsjolander.stickylistheaders.StickyListHeadersListView;

public class MainActivity extends Activity {

    public StickyListHeadersListView list;

    private LangyaAdapter langyaAdapter;

    private List<LangyaSimple> mLangyaDatas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        list = (StickyListHeadersListView) findViewById(R.id.list);
        mLangyaDatas = new ArrayList<LangyaSimple>();

        initDatas();

        list.setOnItemClickListener(new OnPlanItemClick());
        list.setOnItemLongClickListener(new OnPlanItemLongClick());

        langyaAdapter = new LangyaAdapter(this, mLangyaDatas);
        list.setAdapter(langyaAdapter);

    }

    private void updateData() {

        if (langyaAdapter != null && mLangyaDatas != null) {

            langyaAdapter.notifyDataSetChanged();
        }
    }

    private class OnPlanItemClick implements AdapterView.OnItemClickListener {

        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            LangyaSimple oLangyaSimple = (LangyaSimple) parent.getAdapter().getItem(
                    position);
            Log.e("tag", oLangyaSimple.toString());
        }
    }

    private class OnPlanItemLongClick implements AdapterView.OnItemLongClickListener {

        @Override
        public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {

            LangyaSimple oLangyaSimple = mLangyaDatas.get(position);

            Log.e("tag", oLangyaSimple.toString());

            mLangyaDatas.remove(oLangyaSimple);

            updateData();

            return true;
        }
    }

    private void initDatas() {

        mLangyaDatas.add(new LangyaSimple("1", "1", "无缘公子", "无缘公子无缘公子无缘公子无缘公子", "公子榜"));
        mLangyaDatas.add(new LangyaSimple("2", "1", "无请公子", "无请公子无请公子无请公子无请公子", "公子榜"));
        mLangyaDatas.add(new LangyaSimple("3", "1", "无名公子", "无名公子无名公子无名公子无名公子", "公子榜"));
        mLangyaDatas.add(new LangyaSimple("4", "1", "无非公子", "无非公子无非公子无非公子无非公子", "公子榜"));
        mLangyaDatas.add(new LangyaSimple("5", "1", "无能公子", "无能公子无能公子无能公子无能公子", "公子榜"));

        mLangyaDatas.add(new LangyaSimple("6", "2", "最无情", "最无情最无情最无情最无情最无情", "高手榜"));
        mLangyaDatas.add(new LangyaSimple("7", "2", "最无情", "最无情最无情最无情最无情最无情", "高手榜"));
        mLangyaDatas.add(new LangyaSimple("8", "2", "最无情", "最无情最无情最无情最无情最无情", "高手榜"));
        mLangyaDatas.add(new LangyaSimple("9", "2", "最无情", "最无情最无情最无情最无情最无情", "高手榜"));
        mLangyaDatas.add(new LangyaSimple("10", "2", "最无情", "最无情最无情最无情最无情最无情", "高手榜"));

        mLangyaDatas.add(new LangyaSimple("11", "3", "情殇", "情殇情殇情殇情殇情殇情殇情殇", "美人榜"));
        mLangyaDatas.add(new LangyaSimple("12", "3", "情殇", "情殇情殇情殇情殇情殇情殇情殇", "美人榜"));
        mLangyaDatas.add(new LangyaSimple("13", "3", "情殇", "情殇情殇情殇情殇情殇情殇情殇", "美人榜"));
        mLangyaDatas.add(new LangyaSimple("14", "3", "情殇", "情殇情殇情殇情殇情殇情殇情殇", "美人榜"));
        mLangyaDatas.add(new LangyaSimple("15", "3", "情殇", "情殇情殇情殇情殇情殇情殇情殇", "美人榜"));
    }
}

  该Activity实现了较多的方法,1. 数据显示, 2. 列表的单机事件, 3. 列表的长按事件, 4. 数据更新等;

有个地方需要着重说明,那就是在初始化数据时,数据必须proj_id必须按分组排列,即,不要将proj_id不同的数据参差着放在集合中,否则容易造成列表显示多组相同组名的数据。

  对StickyListHeadersListView其余的操作(点击、长按),和普通的ListView一致,包括在xml中设置的属性也是一致的。

  如此这般,便可实现上述的效果了!


源码下载地址(免费):http://download.csdn.net/detail/zuiwuyuan/9274693


上一篇:Maxcompute Spark作业管控利器—Cupid Console


下一篇:Flink 最佳实践之使用 Canal 同步 MySQL 数据至 TiDB