最近在群里遇到个童鞋在求助类似下面的这种页面应该怎么做:
图片.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地址
