Android PinnedSectionListView实现滚动标题置顶/联系人列表效果

首先PinnedSectionListView是Github上的一个开源项目，项目地址：https://github.com/beworker/pinned-section-listview，由于原始的效果并不是我想要的，所以加以修改，先上效果图：

下面开始讲解：

1.首先自定义一个adapter，继承自BaseAdapter，安装接口PinnedSectionListAdapter，这也是这个案例中最重要的类

public class PinnedSectionAdapter extends BaseAdapter implements PinnedSectionListView.PinnedSectionListAdapter {
    private ArrayList list;
    private Context context;
    public ArrayList getList() {
        return list;
    }
    public void setList(ArrayList list) {
        if(list!=null){
            this.list = list;
        }else{
            list=new ArrayList();
        }
    }
    public PinnedSectionAdapter(Context context, ArrayList list){
        this.setList(list);
        this.context=context;
    }
    
    @Override
    public boolean isItemViewTypePinned(int viewType) {
        //置顶的栏目
        return viewType==Content.SECTION;
    }

    @Override
    public int getViewTypeCount() {
        return 2;
    }

    @Override
    public int getItemViewType(int position) {
        return (getItem(position)).type;
    }

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

    @Override
    public Content getItem(int position) {
        return list.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder vh=null;
        //对listview进行缓存
        if(convertView==null){
            vh=new ViewHolder();
            convertView= LayoutInflater.from(context).inflate(R.layout.item, null);
            vh.title=(TextView)convertView.findViewById(R.id.title);
            vh.content= (TextView) convertView.findViewById(R.id.content);
            vh.imageView=(ImageView)convertView.findViewById(R.id.imageView1);
            convertView.setTag(vh);
        }else{
            vh=(ViewHolder) convertView.getTag();
        }
        Content content= getItem(position);
        vh.title.setText(content.title);
        vh.content.setText(content.content);
        vh.imageView.setImageResource(content.imageViewId);
        if (content.type == Content.SECTION) {
            vh.title.setBackgroundResource(R.drawable.bg);
            //隐藏置顶栏图片
            vh.imageView.setVisibility(View.GONE);
            vh.title.setTextSize(14);
            //隐藏置顶栏的内容
            vh.content.setVisibility(View.GONE);
        }else{
            vh.title.setBackgroundResource(R.drawable.bg2);
            vh.imageView.setVisibility(View.VISIBLE);
        }
        return convertView;
    }

    class ViewHolder {
        public TextView title;
        public TextView content;
        public ImageView imageView;
    }
}

2.新建一个内容实体类

public class Content {
    public static final int ITEM = 0;
    public static final int SECTION = 1;

    public final int type;
    public final String title;
    public final String content;
    public int imageViewId;

    //修改构造器，可自定义内部控件
    public Content(int type, int imageViewId, String title, String content) {
        this.type = type;
        this.imageViewId=imageViewId;
        this.title = title;
        this.content=content;
    }

    @Override public String toString() {
        return null;
    }
    
    //设置控件的内容
    public static ArrayList getData(){
        ArrayList  list=new ArrayList();
        list.add(new Content(SECTION,R.drawable.ic_launcher ,"Title 1",""));
        list.add(new Content(ITEM,R.drawable.a , "标题1","内容1"));
        list.add(new Content(SECTION,R.drawable.ic_launcher ,"Title 2",""));
        list.add(new Content(ITEM,R.drawable.b , "标题2","内容2"));
        list.add(new Content(ITEM,R.drawable.c , "标题3","内容3"));
        list.add(new Content(ITEM,R.drawable.d , "标题4","内容4"));
        list.add(new Content(SECTION,R.drawable.ic_launcher ,"Title 3",""));
        list.add(new Content(ITEM,R.drawable.e , "标题5","内容5"));
        list.add(new Content(ITEM,R.drawable.f , "标题6","内容6"));
        list.add(new Content(ITEM,R.drawable.g , "标题7","内容7"));
        list.add(new Content(ITEM,R.drawable.h , "标题8","内容8"));
        list.add(new Content(ITEM,R.drawable.i , "标题9","内容9"));
        list.add(new Content(SECTION,R.drawable.ic_launcher ,"Title 4",""));
        list.add(new Content(ITEM,R.drawable.j , "标题10","内容10"));
        list.add(new Content(ITEM,R.drawable.k , "标题11","内容11"));
        list.add(new Content(ITEM,R.drawable.l , "标题12","内容12"));
        list.add(new Content(SECTION,R.drawable.ic_launcher ,"Title 5",""));
        list.add(new Content(ITEM,R.drawable.m , "标题13","内容13"));
        list.add(new Content(ITEM,R.drawable.n , "标题14","内容14"));
        list.add(new Content(ITEM,R.drawable.o , "标题15","内容15"));
        list.add(new Content(SECTION,R.drawable.ic_launcher ,"Title 6",""));
        list.add(new Content(ITEM,R.drawable.p , "标题16","内容16"));
        return list;
    }
}

3.最后修改MainActivity

public class MainActivity extends Activity {
    private PinnedSectionListView listView;
    private PinnedSectionAdapter mAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView= (PinnedSectionListView) findViewById(R.id.listview);
        mAdapter=new PinnedSectionAdapter(this, Content.getData());
        listView.setAdapter(mAdapter);
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView parent, View view, int position, long id) {
                Content content=mAdapter.getItem(position);
                if(content.type==Content.ITEM){
                    Toast.makeText(MainActivity.this, content.title, Toast.LENGTH_SHORT).show();
                }
                if(content.type==Content.SECTION){
                    Toast.makeText(MainActivity.this, content.title, Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

}

代码总体还是比较简单的，布局文件就不上传了，如果觉得看得还不过瘾，可以 点我下载项目。

如果有什么建议可以留言一起讨论，谢谢。