网站做seo收录,怎么把现有网站开发php,专门做封面的网站,做报表的网站这里写目录标题 前言#xff1a;一#xff0c;基础使用1.1 简单布局1.2 横向显示1.3 网格显示1.4 网格显示升级版 二#xff0c;网格布局升级版使用2.1 第一部分页面2.2 bean类和holder类2.3 ItemHolderFactory 类2.4 MultiViewAdapter 类2.5 MainActivity类 三#xff0c;… 这里写目录标题 前言一基础使用1.1 简单布局1.2 横向显示1.3 网格显示1.4 网格显示升级版 二网格布局升级版使用2.1 第一部分页面2.2 bean类和holder类2.3 ItemHolderFactory 类2.4 MultiViewAdapter 类2.5 MainActivity类 三封装四RecyclerView原理 前言
开发中离不开的RecyclerView用好它让开发UI更加丝滑。通常在使用RecyclerView的时候我们都会用到多布局尤其是APP的首页。像那些大厂的首页比如京东淘宝美团QQ音乐等。都不是简单的布局有些涉及到嵌套问题。一旦使用了嵌套会有各种问题性能问题滑动问题等。因此我们在开发中尽量避免多层嵌套。
当然本篇文章没有涉及到更复杂的布局使用像列表中存在横向滑动分页嵌套viewpager嵌套tablayout等这些使用场景有同学做过优化的可以一起讨论交流。
一基础使用
1.1 简单布局
写一个简单布局只有TextView简单点写代码的方式简单点。
public class TestAdapter extends RecyclerView.AdapterTestAdapter.TestViewHolder {private ListString mList new ArrayList();public TestAdapter(ListString list) {this.mList list;}NonNullOverridepublic TestViewHolder onCreateViewHolder(NonNull ViewGroup parent, int viewType) {View view LayoutInflater.from(parent.getContext()).inflate(R.layout.item_test, parent,false);return new TestViewHolder(view);}Overridepublic void onBindViewHolder(NonNull TestViewHolder holder, int position) {holder.textView.setText(mList.get(position));}Overridepublic int getItemCount() {return mList.size();}class TestViewHolder extends RecyclerView.ViewHolder {private AppCompatTextView textView;public TestViewHolder(NonNull View itemView) {super(itemView);textView itemView.findViewById(R.id.item_tv);}}}mRecyclerViewfindViewById(R.id.activity_rv);mRecyclerView.setLayoutManager(new LinearLayoutManager(this));ListString listnew ArrayList();list.add(学生);list.add(老师);list.add(家长);list.add(同事);TestAdapter testAdapternew TestAdapter(list);mRecyclerView.setAdapter(testAdapter);代码很简单但是需要注意的是一下两种布局加载方式。如果用了第二种你会发现无法居中显示。 View view LayoutInflater.from(context).inflate(R.layout.item_test, parent,false);View view1LayoutInflater.from(context).inflate(R.layout.item_test,null);1.2 横向显示 mRecyclerView.setLayoutManager(new LinearLayoutManager(this,RecyclerView.HORIZONTAL,false));1.3 网格显示 mRecyclerView.setLayoutManager(new GridLayoutManager(this,2));1.4 网格显示升级版 GridLayoutManager gridLayoutManager new GridLayoutManager(this, 4);gridLayoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {Overridepublic int getSpanSize(int position) {// 显示的列数 spanCount / spanSize ;if (position % 5 4) {//SpanSize 返回4 代表该行只显示1列 列数 4/4 1return 4;} else {//SpanSize 返回1代表该行显示4列 列数 4/1 4return 1;}}});二网格布局升级版使用 如果要实现上图的效果我们该如何去设计呢。首先需要分析上图一共有几种布局再者由于是一维布局我们可以采用非嵌套模式去实现。当然这里如果支持二维布局的横向滑动呀分页滑动呀等这种就得需要使用嵌套了我们先不说嵌套。就是利用上文中介绍的setSpanSizeLookup方式去实现。
开始分析上图布局种类一共可以看成4中当然第一个位置一般都是banner轮番图在这里我们可以看成是一张图片。这四种布局显示类型分别是1245也就是一行显示几个。我们知道在网格布局中我们需要指定一行显示几个比如GridLayoutManager(this, 4)这里的4代表一行显示4个但是我们要用setSpanSizeLookup方式去显示怎么去计算呢这里我找到了一个通用的做法。
通用方式基数代表GridLayoutManager(this, 4)传入的值这里是4
比如基数4可以显示几种布局呢124 比如基数5可以显示几种布局呢15 比如基数6可以显示几种布局呢1236
有没有发现规律能显示几种布局就看哪些数可以被基数整除了。
因此要实现上文中的1245类型的布局那就要找到被他们整除的数。当然这里是20了。
这里有同学就会问了为什么是整数倍呢因为上文getSpanSize方法返回的是整数。假如布局中有显示12345的该怎么办呢这种方式就不行了。
好了我们开始写代码吧实现上图效果。 2.1 第一部分页面
item_banner.xml内容
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentImageViewandroid:layout_widthmatch_parentandroid:layout_height80dpandroid:background#78D2DD /
/LinearLayoutitem_icon.xml内容
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:gravitycenterImageViewandroid:layout_marginTop10dpandroid:layout_marginBottom10dpandroid:layout_width60dpandroid:layout_height60dpandroid:background#B66666 /
/LinearLayoutitem_title.xml内容
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentTextViewandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginLeft10dpandroid:textColor#000000android:text分类android:textSize24sp /
/LinearLayoutitem_content1.xml内容
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:gravitycenterImageViewandroid:layout_width160dpandroid:layout_height60dpandroid:layout_marginBottom10dpandroid:background#F33737 /
/LinearLayoutitem_content2.xml内容
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthmatch_parentandroid:gravitycenterandroid:layout_heightwrap_contentImageViewandroid:layout_width80dpandroid:layout_height80dpandroid:background#CAC27B /
/LinearLayout2.2 bean类和holder类
BaseItem类
public interface BaseItem {int getType();
}BannerItem类
public class BannerItem implements BaseItem {Overridepublic int getType() {return ItemHolderFactory.BANNER_TYPE;}
}…更多省略
BaseHolder类
public abstract class BaseHolder extends RecyclerView.ViewHolder {BaseHolder(View item) {super(item);}
}BannerHolder 类
public class BannerHolder extends BaseHolder {public BannerHolder(View item) {super(item);}
}…更多省略
2.3 ItemHolderFactory 类
public class ItemHolderFactory {public static final int BANNER_TYPE 0;public static final int TITLE_TYPE 1;public static final int ICON_TYPE 2;public static final int CONTENT1_TYPE 4;public static final int CONTENT2_TYPE 5;public static BaseHolder getItemHolder(ViewGroup parent, int type) {switch (type) {default:case BANNER_TYPE:return new BannerHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_banner, parent, false));case TITLE_TYPE:return new TitleHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_title, parent, false));case ICON_TYPE:return new IconHolder(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_icon, parent, false));case CONTENT1_TYPE:return new ContentHolder1(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_content1, parent, false));case CONTENT2_TYPE:return new ContentHolder2(LayoutInflater.from(parent.getContext()).inflate(R.layout.item_content2, parent, false));}}
}2.4 MultiViewAdapter 类
public class MultiViewAdapter extends RecyclerView.AdapterBaseHolder {private ListBaseItem mDataList;public MultiViewAdapter(ListBaseItem dataList) {mDataList dataList;}NonNullOverridepublic BaseHolder onCreateViewHolder(NonNull ViewGroup viewGroup, int type) {return ItemHolderFactory.getItemHolder(viewGroup, type);}Overridepublic void onBindViewHolder(NonNull BaseHolder viewHolder, int i) {}Overridepublic int getItemViewType(int position) {//Get the type of itemreturn mDataList.get(position).getType();}Overridepublic int getItemCount() {return mDataList.size();}public void setSpanCount(GridLayoutManager layoutManager) {layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {Overridepublic int getSpanSize(int i) {int type getItemViewType(i);switch (type) {default:case ItemHolderFactory.BANNER_TYPE:case ItemHolderFactory.TITLE_TYPE:return 20;//一行显示1个item 20/201case ItemHolderFactory.ICON_TYPE:return 4;//一行显示5个item 20/45case ItemHolderFactory.CONTENT1_TYPE:return 10;//一行显示2个item 20/102case ItemHolderFactory.CONTENT2_TYPE:return 5;//一行显示4个item 20/54}}});}
}2.5 MainActivity类
对于数据这一块同学们需要理解一下不要弄混。记着咱们的布局是一维的也就是相当于只有一级分类。分类title和分类子内容是同级的所以当我们传入一个title数据的时候对应的就要传入要显示几个子内容。 ListBaseItem list new ArrayList();//banner数据list.add(new BannerItem());//icon数据for (int i 0; i 10; i) {list.add(new IconItem());}//content1数据list.add(new ContentItem1());list.add(new ContentItem1());//titlelist.add(new TitleItem());//content2for (int i0;i4;i){list.add(new ContentItem2());}//titlelist.add(new TitleItem());//content1for (int i0;i4;i){list.add(new ContentItem1());}GridLayoutManager layoutManager new GridLayoutManager(this, 20);MultiViewAdapter adapter new MultiViewAdapter(list);adapter.setSpanCount(layoutManager);recyclerView.setLayoutManager(layoutManager);recyclerView.setAdapter(adapter);最后的最后我们看看效果图图 三封装
一个项目中对于多布局的使用场景不止一处。这里有个封装的很好的库我们可以使用一下了。 implementation com.github.CymChad:BaseRecyclerViewAdapterHelper:3.0.2先来看一下实体类QuickMultipleEntity
public class QuickMultipleEntity implements MultiItemEntity {public static final int BANNER_TYPE 0;public static final int TITLE_TYPE 1;public static final int ICON_TYPE 2;public static final int CONTENT1_TYPE 4;public static final int CONTENT2_TYPE 5;private int itemType;private int spanSize;public QuickMultipleEntity(int itemType, int spanSize) {this.itemType itemType;this.spanSize spanSize;}public int getSpanSize() {return spanSize;}public void setSpanSize(int spanSize) {this.spanSize spanSize;}Overridepublic int getItemType() {return itemType;}
}再来看看adapter
public class MultiTypeAdapter extends BaseMultiItemQuickAdapterQuickMultipleEntity, BaseViewHolder {public MultiTypeAdapter(ListQuickMultipleEntity data) {super(data);addItemType(QuickMultipleEntity.BANNER_TYPE, R.layout.item_banner);addItemType(QuickMultipleEntity.TITLE_TYPE, R.layout.item_title);addItemType(QuickMultipleEntity.ICON_TYPE, R.layout.item_icon);addItemType(QuickMultipleEntity.CONTENT1_TYPE, R.layout.item_content1);addItemType(QuickMultipleEntity.CONTENT2_TYPE, R.layout.item_content2);}Overrideprotected void convert(BaseViewHolder baseViewHolder, QuickMultipleEntity quickMultipleEntity) {switch (baseViewHolder.getItemViewType()) {case QuickMultipleEntity.BANNER_TYPE:Log.e(MultiTypeAdapter, convert: banner);break;case QuickMultipleEntity.TITLE_TYPE:Log.e(MultiTypeAdapter, convert: title);break;default:break;}}
}接下来就是数据源了
public class MainActivity extends AppCompatActivity {private RecyclerView mRecyclerView;private MultiTypeAdapter multipleItemAdapter;Overrideprotected void onCreate(Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);supportRequestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);mRecyclerView findViewById(R.id.activity_main_rv);ListQuickMultipleEntity data getMultipleItemData();multipleItemAdapter new MultiTypeAdapter(data);final GridLayoutManager manager new GridLayoutManager(this, 20);mRecyclerView.setLayoutManager(manager);multipleItemAdapter.setGridSpanSizeLookup(new GridSpanSizeLookup() {Overridepublic int getSpanSize(GridLayoutManager gridLayoutManager, int viewType, int position) {return data.get(position).getSpanSize();}});mRecyclerView.setAdapter(multipleItemAdapter);}public static ListQuickMultipleEntity getMultipleItemData() {ListQuickMultipleEntity list new ArrayList();//bannerlist.add(new QuickMultipleEntity(QuickMultipleEntity.BANNER_TYPE, 20));//iconfor (int i 0; i 10; i) {list.add(new QuickMultipleEntity(QuickMultipleEntity.ICON_TYPE, 4));}//content1for (int i 0; i 2; i) {list.add(new QuickMultipleEntity(QuickMultipleEntity.CONTENT1_TYPE, 10));}//titlelist.add(new QuickMultipleEntity(QuickMultipleEntity.TITLE_TYPE, 20));//content2for (int i 0; i 4; i) {list.add(new QuickMultipleEntity(QuickMultipleEntity.CONTENT2_TYPE, 5));}//titlelist.add(new QuickMultipleEntity(QuickMultipleEntity.TITLE_TYPE, 20));//content1for (int i 0; i 4; i) {list.add(new QuickMultipleEntity(QuickMultipleEntity.CONTENT1_TYPE, 10));}return list;}}实现效果和上图是一样的。
四RecyclerView原理
https://blog.csdn.net/qq_29882585/article/details/108818849 https://juejin.cn/post/6844903661726859271 https://juejin.cn/post/6984974879296585764
