您现在的位置是:首页 > 文章详情

Android RecyclerView的StaggeredGridLayoutManager实现交错排列的子元素分组

日期:2018-03-29点击:644
Android RecyclerView的StaggeredGridLayoutManager实现交错排列的子元素分组


先看实现的结果如图:

设计背景:现在的产品对设计的需求越来越多样化,如附录文章2是典型的联系人分组RecyclerView,子元素排列到一个相同的组,但是有些时候,UI要求把这些元素不是垂直方向的,而是像本文开头的图中所示样式排列,这就需要用StaggeredGridLayoutManager规划RecyclerView,在附录文章2的基础上改造,代码:
package app.zhangphil.app; import android.graphics.Color; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.RecyclerView; import android.support.v7.widget.StaggeredGridLayoutManager; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import java.util.ArrayList; public class MainActivity extends AppCompatActivity { private final int TYPE_GROUP = 0xa01; private final int TYPE_CHILD = 0xa02; private String[] groupNames = {"A", "B", "C", "D", "E", "F", "G"}; private ArrayList<Item> mItems; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); mItems = new ArrayList<>(); for (int i = 0; i < groupNames.length; i++) { Group group = new Group(); group.position = i; group.title = groupNames[i]; mItems.add(group); int count = (int) (Math.random() * 100) % 9 + 1; for (int j = 0; j < count; j++) { Child child = new Child(); child.position = j; child.groupPos = i; child.groupName = group.title; mItems.add(child); } } RecyclerView mRecyclerView = findViewById(R.id.recycler_view); StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(4, StaggeredGridLayoutManager.VERTICAL); mRecyclerView.setLayoutManager(layoutManager); RecyclerViewAdapter mAdapter = new RecyclerViewAdapter(); mRecyclerView.setAdapter(mAdapter); } public class RecyclerViewAdapter extends RecyclerView.Adapter<ItemVH> { @Override public ItemVH onCreateViewHolder(ViewGroup parent, int viewType) { View view; ItemVH itemVH = null; switch (viewType) { case TYPE_GROUP: view = LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_1, parent, false); itemVH = new GroupVH(view); StaggeredGridLayoutManager.LayoutParams layoutParams = new StaggeredGridLayoutManager.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); layoutParams.setFullSpan(true); itemVH.itemView.setLayoutParams(layoutParams); break; case TYPE_CHILD: view = LayoutInflater.from(parent.getContext()).inflate(android.R.layout.simple_list_item_2, parent, false); itemVH = new ChildVH(view); break; } return itemVH; } @Override public void onBindViewHolder(ItemVH holder, int position) { Item item = mItems.get(position); switch (getItemViewType(position)) { case TYPE_GROUP: Group g = (Group) item; GroupVH groupVH = (GroupVH) holder; groupVH.text1.setText(g.title); break; case TYPE_CHILD: Child c = (Child) item; ChildVH childVH = (ChildVH) holder; childVH.text1.setText(c.groupName); childVH.text2.setText(c.position + ""); break; } } @Override public int getItemCount() { return mItems.size(); } @Override public int getItemViewType(int position) { return mItems.get(position).getType(); } } private class Group extends Item { public String title; @Override public int getType() { return TYPE_GROUP; } } private class Child extends Item { public int groupPos; public String groupName; @Override public int getType() { return TYPE_CHILD; } } private abstract class Item { public int position; public abstract int getType(); } private class GroupVH extends ItemVH { public TextView text1; public GroupVH(View itemView) { super(itemView); text1 = itemView.findViewById(android.R.id.text1); text1.setBackgroundColor(Color.RED); } @Override public int getType() { return TYPE_GROUP; } } private class ChildVH extends ItemVH { public TextView text1; public TextView text2; public ChildVH(View itemView) { super(itemView); text1 = itemView.findViewById(android.R.id.text1); text2 = itemView.findViewById(android.R.id.text2); text1.setTextColor(Color.LTGRAY); text2.setTextColor(Color.BLUE); } @Override public int getType() { return TYPE_CHILD; } } private abstract class ItemVH extends RecyclerView.ViewHolder { public ItemVH(View itemView) { super(itemView); } public abstract int getType(); } } 

重点是在onCreateViewHolder时候,用StaggeredGridLayoutManager.LayoutParams使得当前的ViewHolder扩充(MATCH_PARENT)整个布局,并且:

layoutParams.setFullSpan(true);
实现结果就是本文开头的图中所示样式。
附录:
1,《Android RecyclerView的StaggeredGridLayoutManager和CardView》链接:https://blog.csdn.net/zhangphil/article/details/47604581 
2,《Android RecyclerView实现子元素的Group分组,LinearLayoutManager垂直方向》链接:https://blog.csdn.net/zhangphil/article/details/79758587 

原文链接:https://yq.aliyun.com/articles/615707
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章