ListView分栏--制作分栏音乐列表

之前我遇到过这样的需求，要求在ListView中按时间对数据分栏，当时的做法是在每个ListView的item中加入时间栏的布局，然后在代码中控制时间栏

的显示与隐藏。

但其实重写Adapter两个方法后就可以完成这个任务，当ListView中带有不同布局的时候，可以根据itemType来加载不同的布局。

int getItemViewType(int position) 返回指定position的itemView的viewType，用于加载不同布局。此方法必须返回0到getViewTypeCount()-1

的数字或者IGNORE_ITEM_VIEW_TYPE。

int getViewTypeCount() 返回你这个ListView有多少个不同的布局。

让我们先来看看两张分栏后的效果图：

     

这里按照歌曲名拼音的首字母分栏，把汉字转为拼音我用了Pinyin4j，例如"你好"可转为"NIHAO"，由于这不是这篇文章的重点，不知道的可自行百度。

那么下面来看看怎么一步步地实现吧！

1.由图中列表可以看出，我们要显示歌曲名，歌手名，分栏需要用到歌曲名对应的汉字拼音，所以有了下面的MediaItem实体。

public class MediaItem implements Serializable {
    private static final long serialVersionUID = 1L;

    private int id; // ID
    private String songName; // 歌曲名
    private String singerName; // 歌手名
    private String sortKey; // 歌曲名的拼音(如"你好"-->"NIHAO")

    public String getSongName() {
        return songName;
    }

    public void setSongName(String songName) {
        this.songName = songName;
    }

    public String getSingerName() {
        return singerName;
    }

    public void setSingerName(String singerName) {
        this.singerName = singerName;
    }

    public int getId() {
        return id;
    }

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

    public String getSortKey() {
        return sortKey;
    }

    public void setSortKey(String sortKey) {
        this.sortKey = sortKey;
    }
}

2.接下来就是需要从数据库中查出歌曲信息，使用android提供的uri：MediaStore.Audio.Media.EXTERNAL_CONTENT_URI查询我们需要的字段，

然后封装成MediaItem实体，用于绑定ListView。如果查询时间超过500毫秒，则显示加载的progressBar。

布局比较简单，就是一个ListView和一个ProgressBar，我就不贴出来了。

public class MediaActivity extends Activity {
    private static final String TAG = "MediaActivity";

    private static final int MSG_SHOW_PROGRESS_BAR = 100;

    private List<MediaItem> mList;
    private MediaAdapter mAdapter;
    private ListView mListView;
    private ProgressBar mProgressBar;

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

        initViews();
        // 查询音乐列表
        getData();
    }

    private void initViews() {
        mListView = (ListView) findViewById(R.id.media_list);
        mProgressBar = (ProgressBar) findViewById(R.id.progress_bar);
        ViewCompat.setOverScrollMode(mListView, ViewCompat.OVER_SCROLL_NEVER);
    }

    private void getData() {
        mList = new ArrayList<MediaItem>();
        // 如果500毫秒内加载完成，则不显示ProgressBar
        mHander.sendEmptyMessageDelayed(MSG_SHOW_PROGRESS_BAR, 500);
        // 使用AsyncTask查询音乐列表，并构造实体列表MediaItem
        new AsyncTask<Void, Void, List<MediaItem>>() {

            @Override
            protected List<MediaItem> doInBackground(Void... params) {
                Log.v(LogUtils.TAG, "AsyncTask doInBackground");
                Uri uri = MediaStore.Audio.Media.EXTERNAL_CONTENT_URI;
                String[] projection = { MediaStore.Audio.Media._ID, // ID
                        MediaStore.Audio.Media.TITLE, // 显示的歌曲名
                        MediaStore.Audio.Media.ARTIST // 艺术家
                };
                Cursor cursor = getContentResolver().query(uri, projection, null, null, MediaStore.Audio.Media.DEFAULT_SORT_ORDER);
                if (cursor != null) {
                    try {
                        while (cursor.moveToNext()) {
                            MediaItem item = new MediaItem();
                            String title = cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Audio.Media.TITLE));
                            item.setId(cursor.getInt(cursor.getColumnIndexOrThrow(MediaStore.Audio.Media._ID)));
                            item.setSongName(title);
                            item.setSingerName(cursor.getString(cursor.getColumnIndexOrThrow(MediaStore.Audio.Media.ARTIST)));
                            // 汉字转拼音
                            item.setSortKey(PinYinUtils.getPinYin(title));
                            mList.add(item);
                        }
                    } catch (Exception e) {
                        Log.e(TAG, "get cursor data error!");
                    } finally {
                        cursor.close();
                    }
                }
                return mList;
            }

            @Override
            protected void onPostExecute(List<MediaItem> result) {
                Log.v(LogUtils.TAG, "AsyncTask onPostExecute result.size=" + result.size());
                mHander.removeMessages(MSG_SHOW_PROGRESS_BAR);
                mAdapter = new MediaAdapter(MediaActivity.this, mList);
                mListView.setAdapter(mAdapter);
                mListView.setVisibility(View.VISIBLE);
                if (mProgressBar.getVisibility() == View.VISIBLE) {
                    mProgressBar.setVisibility(View.GONE);
                }
            }
        }.execute();
    }

    // 用于显示ProgressBar
    Handler mHander = new Handler(new Callback() {
        @Override
        public boolean handleMessage(Message msg) {
            switch (msg.what) {
            case MSG_SHOW_PROGRESS_BAR:
                mProgressBar.setVisibility(View.VISIBLE);
                break;

            default:
                break;
            }
            return false;
        }
    });

}

3.接下来就是比较重要的Adapter，分栏的任务在这里完成。首先注意adapter绑定的数据源是一个List<TypeItem>，TypeItem对数据做了一层

封装，它包含itemType，就是在getItemViewType()需要返回的参数。而通过generateItems()方法把传入的List<MediaItem>构造成

List<TypeItem>，再加入itemType的同时如果发现MediaItem中歌曲名的拼音首字母不一样，就插入一个分组的头部。然后在getView()中就可以

根据itemType来区分不同的布局，由于具有两个不同的布局，所以定义ViewHolder基类，分栏布局HeaderViewHolder和歌曲列表MediaViewHolder

都继承自ViewHolder，用于缓存视图，然后就可以根据不同的ViewHolder实例来绑定数据（在ListView中有多个布局的时候都可以使用此方法）。

package com.yangy.test.adapter;

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

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import com.yangy.test.model.MediaItem;
import com.yy.gallerytest.activity.R;

public class MediaAdapter extends BaseAdapter {
    
    private static final int VIEW_TYPE_COUNT = 2; // 有几种不同的布局
    private static final int VIEW_TYPE_HEADER = 0; // 分组的头部
    private static final int VIEW_TYPE_ITEM = 1; // 音乐列表item

    private LayoutInflater mInflater;
    private List<TypeItem> items;

    public MediaAdapter(Context context, List<MediaItem> items) {
        mInflater = LayoutInflater.from(context);
        this.items = generateItems(items);
    }

    /**
     * 实体基类，包含itemType，以便区分不同的布局,子类需要的其他数据可自行指定
     */
    class TypeItem {
        int itemType;

        public TypeItem(int itemType) {
            this.itemType = itemType;
        }
    }

    /**
     * 音乐列表实体，指定itemType为VIEW_TYPE_ITEM 包含MediaItem实体
     */
    class MediaTypeItem extends TypeItem {
        MediaItem mediaItem;

        public MediaTypeItem(MediaItem mediaItem) {
            super(VIEW_TYPE_ITEM);
            this.mediaItem = mediaItem;
        }
    }

    /**
     * 头布局实体，指定itemType为VIEW_TYPE_HEADER 包含分组中头部的字母
     */
    class HeaderTypeItem extends TypeItem {
        char header;

        public HeaderTypeItem(char header) {
            super(VIEW_TYPE_HEADER);
            this.header = header;
        }
    }

    /**
     * 根据传入的mediaItem list，构造带有header的TypeItem
     * 
     * @param mediaItems
     *            音乐列表实体
     * @return 包含itemType的实体
     */
    private List<TypeItem> generateItems(List<MediaItem> mediaItems) {
        List<TypeItem> items = new ArrayList<TypeItem>();
        int size = mediaItems == null ? 0 : mediaItems.size();
        char currIndex;
        char preIndex = '{';
        for (int i = 0; i < size; i++) {
            currIndex = mediaItems.get(i).getSortKey().charAt(0);
            // 是第一个item或者两个数据的拼音首字母不相等则插入头部
            if (i == 0 || currIndex != preIndex) {
                items.add(new HeaderTypeItem(currIndex));
            }
            items.add(new MediaTypeItem(mediaItems.get(i)));
            preIndex = currIndex;
        }
        return items;
    }

    /**
     * ViewHolder基类，itemView用于查找子view
     */
    class ViewHolder {
        View itemView;

        public ViewHolder(View itemView) {
            if (itemView == null) {
                throw new IllegalArgumentException("itemView can not be null!");
            }
            this.itemView = itemView;
        }
    }

    /**
     * 音乐列表ViewHolder
     */
    class MediaViewHolder extends ViewHolder {
        TextView songName;
        TextView singerName;

        public MediaViewHolder(View view) {
            super(view);
            songName = (TextView) view.findViewById(R.id.song_name);
            singerName = (TextView) view.findViewById(R.id.singer_name);
        }
    }

    /**
     * 头部ViewHolder
     */
    class HeaderViewHolder extends ViewHolder {
        TextView header;

        public HeaderViewHolder(View view) {
            super(view);
            header = (TextView) view.findViewById(R.id.header);
        }
    }

    @Override
    public View getView(int postion, View convertView, ViewGroup parent) {
        TypeItem item = items.get(postion);
        ViewHolder viewHolder;
        if (convertView == null) {
            // 根据不同的viewType，初始化不同的布局
            switch (getItemViewType(postion)) {
            case VIEW_TYPE_HEADER:
                viewHolder = new HeaderViewHolder(mInflater.inflate(R.layout.media_header_item, null));
                break;
            case VIEW_TYPE_ITEM:
                viewHolder = new MediaViewHolder(mInflater.inflate(R.layout.media_item, null));
                break;

            default:
                throw new IllegalArgumentException("invalid view type : " + getItemViewType(postion));
            }

            // 缓存header与item视图
            convertView = viewHolder.itemView;
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }

        // 根据初始化的不同布局，绑定数据
        if (viewHolder instanceof HeaderViewHolder) {
            ((HeaderViewHolder) viewHolder).header.setText(String.valueOf(((HeaderTypeItem) item).header));
        } else if (viewHolder instanceof MediaViewHolder) {
            onBindMediaItem((MediaViewHolder) viewHolder, ((MediaTypeItem) item).mediaItem);
        }
        return convertView;
    }
    
    private void onBindMediaItem(MediaViewHolder viewHolder, MediaItem mediaItem) {
        viewHolder.songName.setText(mediaItem.getSongName());
        viewHolder.singerName.setText(mediaItem.getSingerName());
    }

    @Override
    public int getItemViewType(int position) {
        if (items != null) {
            return items.get(position).itemType;
        }
        return super.getItemViewType(position);
    }

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

    @Override
    public int getCount() {
        return items != null ? items.size() : 0;
    }

    @Override
    public Object getItem(int position) {
        if (items != null && position > 0 && position < items.size()) {
            return items.get(position);
        }
        return null;
    }

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

至此，一个带有分栏的音乐列表制作完成。

存在的问题：

查询音乐列表是使用的排序方式为DEFAULT_SORT_ORDER，歌曲名为英文或特殊字符的歌曲会排在中文歌曲之后，而以上的分栏依赖歌曲的

排序，所以会出现先对中文分组，再对英文分组的情况。我的想法是可以通过建立一张数据库表（包含使用pinYin4j生成的sortKey字段），将歌曲

信息读入，然后查询时根据sortKey排序，这样中文和英文就能正确分组了（有时间再去实现一下^_^）。