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

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

图片.png

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

先把数据展示做好

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

public class ItemAdapter extends RecyclerView.Adapter<ItemAdapter.ItemViewHolder> {

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

    private List<String> mData;

    public ItemAdapter(List<String> 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<String> 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 侧边字母索引条，仿微信 (如果你也认为这个轮子做的不错，就给作者一个赞或者喜欢吧。)
在代码里面引入这个轮子:

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.fritz.model.widget.SideIndexBar
        android:id="@+id/indexBar"
        android:layout_width="25dp"
        android:layout_height="match_parent"
        android:layout_gravity="right"
        android:paddingBottom="30dp"
        android:paddingTop="30dp"
        app:isLetterCenter="true"
        app:letterColor="@android:color/darker_gray"
        app:letterSize="13sp"
        app:selectBackground="@android:color/transparent"
        app:selectLetterColor="@android:color/black" />

    <TextView
        android:id="@+id/textDialog"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="center"
        android:gravity="center"
        android:textColor="@android:color/black"
        android:textSize="25sp"
        android:visibility="gone" />
</FrameLayout>

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

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

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

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

private void initData() {
        final List<String> 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地址