做一个简单的多数据选择界面

最近在群里遇到个童鞋在求助类似下面的这种页面应该怎么做:

图片.png

刚好前段时间做项目时处理过类似的页面,这时正好总结一下.

先把数据展示做好

从图片可以看出来，数据展示就是一个标题+若干数据。在Google推出RecyclerView之后，这个页面做起来是非常简单的。利用Adapter的getItemViewType()方法和GridLayoutManager的setSpanSizeLookup就可以轻松解决:

public class ItemAdapter extends RecyclerView.Adapter {

    public static final int VIEW_TYPE_TITLE = 0;
    public static final int VIEW_TYPE_ITEM = 1;

    private List mData;

    public ItemAdapter(List list) {
        this.mData = list;
    }

    @Override
    public ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        LayoutInflater inflater = (LayoutInflater) parent.getContext()
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        if (viewType == VIEW_TYPE_TITLE) {
            View view = inflater.inflate(R.layout.item_title, parent, false);
            return new ItemViewHolder(view, VIEW_TYPE_TITLE);
        }else {
            View view = inflater.inflate(R.layout.item_data, parent, false);
            return new ItemViewHolder(view, VIEW_TYPE_ITEM);
        }
    }

    @Override
    public void onBindViewHolder(ItemViewHolder holder, int position) {
        holder.bind(mData.get(position), getItemViewType(position));
    }

    @Override
    public int getItemCount() {
        return mData.size();
    }

    @Override
    public int getItemViewType(int position) {
        String item = mData.get(position);
        if (item.equals("擅长品牌") || checkIsUpLetter(item)) {
            return VIEW_TYPE_TITLE;
        }
        return VIEW_TYPE_ITEM;
    }
    
    private boolean checkIsUpLetter(String string) {
        char c = string.charAt(0);
        if ((c >= 'A' && c <= 'Z')) {
            return true;
        } else {
            return false;
        }
    }

    public class ItemViewHolder extends RecyclerView.ViewHolder {

        private TextView mTitle;
        private TextView mItem;

        public ItemViewHolder(View itemView, int type) {
            super(itemView);
            if (type == VIEW_TYPE_TITLE) {
                mTitle = (TextView) itemView.findViewById(R.id.tvTitle);
            } else {
                mItem = (TextView) itemView.findViewById(R.id.tvItem);
            }
        }

        public void bind(String item, int type) {
            if (type == VIEW_TYPE_TITLE) {
                mTitle.setText(item);
            } else {
                mItem.setText(item);
            }
        }
    }
}

在主页面的RecyclerView的配置:

 private void initData() {
        List list = Arrays.asList(getResources().getStringArray(R.array.array));
        mAdapter = new ItemAdapter(list);
        GridLayoutManager manager = new GridLayoutManager(this, 4);
        manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
            @Override
            public int getSpanSize(int position) {
                if (mAdapter.getItemViewType(position) == ItemAdapter.VIEW_TYPE_TITLE) {
                    //如果是VIEW_TYPE_TITLE,占据4个Item的空间
                    return 4;
                }
                return 1;
            }
        });
        mRecyclerView.setLayoutManager(manager);
        mRecyclerView.setAdapter(mAdapter);
    }

这时候运行效果如下：

aaa.gif

字母索引

数据展示已经弄好，那现在就来处理一下右边的字母索引吧。这里我就直接引用别人做的轮子:
android 侧边字母索引条，仿微信 (如果你也认为这个轮子做的不错，就给作者一个赞或者喜欢吧。)
在代码里面引入这个轮子:

这里提一下,对于自定义View的开源库,我一般都是直接copy代码到项目中的，而不会直接在gradle那里进行依赖，因为这样子有助于我的学习自定义View。好了，废话到此为止，继续写完这部分的代码：

private void initData() {
        ..........//省略RecyclerView配置部分的代码

        //将TextView和SideIndexBar进行关联
        mIndexBar.setTextDialog(mTip);
    }

现在只是完成了字母索引的UI提示而已，现在要完成它的索引功能，也就是RecyclerView可以切换到点击字母的item。

private void initData() {
        final List list = Arrays.asList(getResources().getStringArray(R.array.array));
        final GridLayoutManager manager = new GridLayoutManager(this, 4);
        //省去部分代码
        mIndexBar.setOnLetterChangedListener(new SideIndexBar.OnLetterChangedListener() {
            @Override
            public void onChanged(String s, int position) {
                int indexPosition = list.indexOf(s);
                if (indexPosition >= 0) {
                    manager.scrollToPositionWithOffset(indexPosition, 0);
                }else{
                    Toast.makeText(MainActivity.this,"没有该数据",Toast.LENGTH_SHORT).show();
                }
            }
        });
    }

我们看下运行效果吧：

8888.gif

效果ok了,那这个页面就基本完成了.
本文demo地址