利用XrecycleView写多条目展示+流式布局

首先我们先引入我们所需要的依赖

//流失布局需要的依赖
implementation 'com.hyman:flowlayout-lib:1.1.2'implementation 'com.android.support:design:28.0.0'//recycler的依赖implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.30'
//okgoimplementation 'com.lzy.net:okgo:3.0.4'
//Glide加载图片implementation 'com.github.bumptech.glide:glide:3.7.0'//解析数据implementation 'org.kie.modules:com-google-code-gson:6.5.0.Final'//xrecycleimplementation 'com.jcodecraeer:xrecyclerview:1.5.9'

如果build报错在最外层gradle加入

allprojects {repositories {google()jcenter()maven { url "https://jitpack.io" }    //加入}
}

其次是清单文件写权限

//联网权限<uses-permission android:name="android.permission.INTERNET" />//写<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />//读<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

首页显示的流式布局 xml布局

 <TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="搜索历史"android:textSize="30sp"/><com.zhy.view.flowlayout.TagFlowLayoutandroid:id="@+id/id_flowlayout"app:max_select="-1"android:layout_width="fill_parent"android:layout_height="wrap_content"android:padding="20dp">
</com.zhy.view.flowlayout.TagFlowLayout>

需要写一个圆角的text条目

<TextView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="5dp"android:background="@drawable/shape"android:text="Helloworld"android:textColor="#000"android:textSize="20sp"android:padding="10dp">
</TextView>

下方是显示多条目的布局

 <com.jcodecraeer.xrecyclerview.XRecyclerViewandroid:id="@+id/recycle1"android:layout_width="match_parent"android:layout_height="wrap_content"></com.jcodecraeer.xrecyclerview.XRecyclerView>

下方就是recyleView的多条目的三种布局
第一种布局

<LinearLayoutandroid:layout_width="wrap_content"android:layout_height="100dp"android:orientation="vertical"android:layout_weight="1"><TextViewandroid:id="@+id/text_name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView"android:textSize="25sp"/><TextViewandroid:id="@+id/text_time"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="TextView"android:textSize="15sp"android:textColor="#6666"/></LinearLayout><ImageViewandroid:id="@+id/image_icon"android:layout_width="150dp"android:layout_height="150dp"android:src="@mipmap/ic_launcher"/>

第二种布局

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:id="@+id/text_name_recycle2"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Textview"android:textSize="25sp"/><LinearLayoutandroid:layout_width="match_parent"android:layout_height="100dp"android:orientation="horizontal"><ImageViewandroid:id="@+id/image_icon_recycle2_1"android:layout_width="150dp"android:layout_height="150dp"android:src="@mipmap/ic_launcher"android:layout_weight="1"/><ImageViewandroid:id="@+id/image_icon_recycle2_2"android:layout_width="150dp"android:layout_height="150dp"android:src="@mipmap/ic_launcher"android:layout_weight="1"/><ImageViewandroid:id="@+id/image_icon_recycle2_3"android:layout_width="150dp"android:layout_height="150dp"android:src="@mipmap/ic_launcher"android:layout_weight="1"/></LinearLayout><TextViewandroid:id="@+id/text_time_recycle2"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Textview"android:textSize="15sp"android:textColor="#6666"/></LinearLayout>

第三种布局

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:id="@+id/text_name_recycle3"android:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="25sp"android:text="TextView"/><TextViewandroid:id="@+id/text_time_recycle3"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Textview"android:textSize="15sp"android:textColor="#6666"/></LinearLayout>

主页activity显示

public class MainActivity extends AppCompatActivity {//设置标题private String[] mVals={"三星旗舰店","欧莱雅男士洁面乳","乐高积木","雀氏纸尿裤","惠玲奶粉","苹果手机","美团外卖","饿了么"};private TagFlowLayout flowlayout;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//获取idflowlayout = findViewById(R.id.id_flowlayout);//设置引入流式布局flowlayout.setAdapter(new TagAdapter<String>(mVals) {@Overridepublic View getView(FlowLayout parent, int position, String s) {//加入你的布局TextView tv = (TextView) View.inflate(MainActivity.this, R.layout.tv, null);tv.setText(s);return tv;}});//点击流式布局跳转到下个界面flowlayout.setOnTagClickListener(new TagFlowLayout.OnTagClickListener() {@Overridepublic boolean onTagClick(View view, int position, FlowLayout parent) {Intent intent=new Intent(MainActivity.this,Main2Activity.class);startActivity(intent);return true;}});}
}

recyleView的多条目展示avtivity

public class Main2Activity extends AppCompatActivity implements ShowConstant.ShowView {private ShowConstant.ShowPresenter presenterImpi;private XRecyclerView recycle1;private List<JsonBean.DataBean> list;private int page=1;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main2);recycle1 = (XRecyclerView) findViewById(R.id.recycle1);presenterImpi = new ShowPresenterImpi();presenterImpi.attachView(this);presenterImpi.requestData(page);//设置加载recycle1.setLoadingMoreEnabled(true);//设置刷新recycle1.setPullRefreshEnabled(true);//监听recycle1.setLoadingListener(new XRecyclerView.LoadingListener() {//设置刷新@Overridepublic void onRefresh() {list.clear();presenterImpi.requestData(page);}//设置加载更多@Overridepublic void onLoadMore() {page++;presenterImpi.requestData(page);}});}@Overridepublic void showData(String responseData) {//gson解析Gson gson=new Gson();JsonBean jsonBean = gson.fromJson(responseData, JsonBean.class);List<JsonBean.DataBean> data = jsonBean.getData();//集合list = new ArrayList<>();list.addAll(data);//布局管理器LinearLayoutManager manager= new LinearLayoutManager(Main2Activity.this, LinearLayoutManager.VERTICAL, false);recycle1.setLayoutManager(manager);//设置适配器final ShowAdapter showAdapter = new ShowAdapter(Main2Activity.this, list);recycle1.setAdapter(showAdapter);//设置刷新加载完成recycle1.refreshComplete();recycle1.loadMoreComplete();//长安弹出框 确定就删除  取消就吐司showAdapter.setOnItemLongClickListener(new ShowAdapter.OnItemLongClickListener() {@Overridepublic void onItemLongClickListener(final View v, final int position) {AlertDialog.Builder builder = new AlertDialog.Builder(Main2Activity.this);builder.setTitle("不再关注");builder.setMessage("确定取消关注此类新闻吗?");/确定删除builder.setPositiveButton("确定", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {//删除的动画可加可不加final ObjectAnimator alpha = ObjectAnimator.ofFloat(v, "alpha", 1f, 0f);ObjectAnimator translationX = ObjectAnimator.ofFloat(v, "translationX", 5, -500);AnimatorSet animatorSet = new AnimatorSet();animatorSet.setDuration(2000);animatorSet.playTogether(alpha,translationX);//animatorSet.addListener(new Animator.AnimatorListener() {@Overridepublic void onAnimationStart(Animator animation) {}@Overridepublic void onAnimationEnd(Animator animation) {/这行是删除 的 加刷新list.remove(position);showAdapter.notifyItemRemoved(position);}@Overridepublic void onAnimationCancel(Animator animation) {}@Overridepublic void onAnimationRepeat(Animator animation) {}});animatorSet.start();}});/到这里都是动画的代码 不加的话可以不要, 可以直接删除//取消吐司提示builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {@Overridepublic void onClick(DialogInterface dialog, int which) {Toast.makeText(Main2Activity.this, "您已取消", Toast.LENGTH_SHORT).show();dialog.dismiss();}});builder.show();}});}@Overrideprotected void onDestroy() {super.onDestroy();presenterImpi.detachView(this);}
}

最后在写入设配器

public class ShowAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {private static final int TYPE_ONE=1;private static final int TYPE_TWO=2;private static final int TYPE_THREE=3;private Context context;private List<JsonBean.DataBean> list;//定义接口OnItemLongClickListener onItemLongClickListener;public interface OnItemLongClickListener{public void onItemLongClickListener(View v,int position);}public void setOnItemLongClickListener(OnItemLongClickListener onItemLongClickListener) {this.onItemLongClickListener = onItemLongClickListener;}
//构造方法public ShowAdapter(Context context, List<JsonBean.DataBean> list) {this.context = context;this.list = list;}public void setList(List<JsonBean.DataBean> lists) {if (list!=null){this.list = lists;}notifyDataSetChanged();}public void addList(List<JsonBean.DataBean> lists){if (list!=null){list.addAll(lists);}notifyDataSetChanged();}@NonNull@Override///判断加载布局public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {if (i==TYPE_ONE){View view = LayoutInflater.from(context).inflate(R.layout.recycle1, viewGroup, false);return new ViewHolderOne(view);}else if (i==TYPE_TWO){View view = LayoutInflater.from(context).inflate(R.layout.recycle2, viewGroup, false);return new ViewHolderTwo(view);}else {View view = LayoutInflater.from(context).inflate(R.layout.recycle3, viewGroup, false);return new ViewHolderThree(view);}}@Overridepublic void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, final int i) {//获取第几条int itemViewType = getItemViewType(i);switch (itemViewType){//第一种条目设置case TYPE_ONE:ViewHolderOne viewHolderOne= (ViewHolderOne) viewHolder;viewHolderOne.text_name.setText(list.get(i).getTitle());viewHolderOne.text_time.setText(list.get(i).getDate());String imagesString = list.get(i).getThumbnail_pic_s();String[] imagesStr = imagesString.split("\\|");Glide.with(context).load(imagesStr[0]).into(viewHolderOne.image_icon);break;//第二种条目设置case TYPE_TWO:ViewHolderTwo viewHolderTwo= (ViewHolderTwo) viewHolder;viewHolderTwo.text_name.setText(list.get(i).getTitle());viewHolderTwo.text_time.setText(list.get(i).getDate());Glide.with(context).load(list.get(i).getThumbnail_pic_s()).into(viewHolderTwo.image_icon1);Glide.with(context).load(list.get(i).getThumbnail_pic_s02()).into(viewHolderTwo.image_icon2);Glide.with(context).load(list.get(i).getThumbnail_pic_s03()).into(viewHolderTwo.image_icon3);break;//第三种条目设置case TYPE_THREE:ViewHolderThree viewHolderThree= (ViewHolderThree) viewHolder;viewHolderThree.text_name.setText(list.get(i).getTitle());viewHolderThree.text_time.setText(list.get(i).getDate());break;}//点击触发的事件viewHolder.itemView.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {onItemLongClickListener.onItemLongClickListener(v,i);}});}//总数@Overridepublic int getItemCount() {return list.size();}//判断等于几时加载那种布局@Overridepublic int getItemViewType(int position) {if (position%3==1){return TYPE_ONE;}else if (position%3==2){return TYPE_TWO;}else {return TYPE_THREE;}}//设置第一种条目的设配器class ViewHolderOne extends RecyclerView.ViewHolder {//获取idprivate final TextView text_name;private final TextView text_time;private final ImageView image_icon;public ViewHolderOne(@NonNull View itemView) {super(itemView);text_name = itemView.findViewById(R.id.text_name);text_time = itemView.findViewById(R.id.text_time);image_icon = itemView.findViewById(R.id.image_icon);}}//第二种的条目class ViewHolderTwo extends RecyclerView.ViewHolder {private final TextView text_name;private final TextView text_time;private final ImageView image_icon1;private final ImageView image_icon2;private final ImageView image_icon3;public ViewHolderTwo(@NonNull View itemView) {super(itemView);获取idtext_name = itemView.findViewById(R.id.text_name_recycle2);text_time = itemView.findViewById(R.id.text_time_recycle2);image_icon1 = itemView.findViewById(R.id.image_icon_recycle2_1);image_icon2 = itemView.findViewById(R.id.image_icon_recycle2_2);image_icon3 = itemView.findViewById(R.id.image_icon_recycle2_3);}}//第三种的条目数class ViewHolderThree extends RecyclerView.ViewHolder {private final TextView text_name;private final TextView text_time;public ViewHolderThree(@NonNull View itemView) {super(itemView);//获取idtext_name = itemView.findViewById(R.id.text_name_recycle3);text_time = itemView.findViewById(R.id.text_time_recycle3);}}}

接下来看一下效果图

利用XrecycleView写多条目展示+流式布局相关推荐

自定义 FlowLayout流式布局搜索框加 GreenDao存取搜索记录，使用RecyclerView展示
输入框布局的shape <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android ...
从上往下流式布局_教大家怎么写前端布局
一.静态布局(Static Layout) 1. 布局概念最传统.原始的Web布局设计.网页最外层容器(outer)有固定的大小,所有的内容以该容器为标准,超出宽高的部分用滚动条(overflow: ...
手写一个淘宝、京东的搜索流式布局FlowLayout
目录一些叨叨继承ViewGrop 实现自定义控件重写构造器提供对外接口测量摆放使用方法完整代码一些叨叨市面上所有的app只要有搜索功能,几乎都离不开流式布局,像淘宝.京东.小红书等 ...
流式布局使用鸿洋大神写的库：com.hyman:flowlayout-lib:1.1.2
在项目中一般都会用到流式布局布局文件 <com.zhy.view.flowlayout.TagFlowLayoutandroid:id="@+id/id_flowlayout&quo ...
仿唯品会/京东/淘宝搜索流式布局的隐藏与展示
1. 项目需求: 如下,如果没有向下箭头(显示/隐藏剩余搜索词条)的话,采用flexbox-layout+Recycleview+FlexboxLayoutManager 可以实现流式布局. 加了这个 ...
Web前端学习笔记10：移动web开发流式布局_flex布局
文章目录移动web开发之rem布局 1 rem基础 1.1 rem单位 2 媒体查询 2.1 什么是媒体查询 2.2 媒体查询语法规范 3 less 基础 3.1 维护css弊端 3.2 Less ...
android 流失布局,Android使用RecyclerView实现流式布局的注意事项
纯手打,不喜勿喷 long may the sun shine 众所周知,Android开发中Recycleview的功能十分强大,可以实现各种炫酷的效果,今天我根据最近开发的一个项目简要说下流式布局 ...
瀑布流式页面布局_微信小程序——实现简单的瀑布流式布局
写页面时,考虑到美观,良好的用户体验,对于内容的展示我们经常会用到瀑布流式布局,那么如何实现一个简单的瀑布流呢? 瀑布流式布局原理:遍历数组判断奇偶性,然后分左右排布,左右两边代码基本一致直接上代 ...
Android流式布局FlowLayout，一款针对Tag的布局
交流群 : 668524118 本群主要用于编程技术 ,及创意作品 ,思维架构的交流 ,欢迎喜欢创新 ,热爱生活的朋友加入 ! 前言 flow layout, 流式布局, 这个概念在移动端或者前端开发 ...
移动web学习(一) --- 流式布局, 视口viewpoint ,2倍图和3倍图, less
从这章开始,学习移动web 移动web开发指的是需要适配移动设备的网页开发,和pc端没有本质的区别,还是使用html,css,js 一.学习移动web的原因 1. 使用移动设备的用户越来越多 2. 一 ...

利用XrecycleView写多条目展示+流式布局

利用XrecycleView写多条目展示+流式布局相关推荐

最新文章

热门文章