这几天有个需求是来了新的设计图,重构租屋列表页,犹豫最近撸了个筛选框,然后列表页UI也变了,跟同事沟通后,建议我重构这个模块,在看完设计图后,我发现现在很多APP的列表页,都趋于多布局的情况
下面距离,懂球帝APP
这样看图,我们可以很明显的发列表item里面突然多了一个,广告或者别的类型的ITEM,如果你是电商模块 新闻模块可能更多不同样子的布局了,抛出第一个问题,如果是你,你会怎么去实现这个玩意
接下来 我们用图来深刻解释
从这个图可以看出来 这个列表 本来item子项里面都是圆形的,却多了2个不一样的,这就是所谓的多布局
刚好项目里面有用到 bravh,深入后发现这个库真的很强大
https://github.com/CymChad/BaseRecyclerViewAdapterHelper
一下就来说说我demo实现后的样子
我这个里面的多布局就是 中间多了一个滑动的布局
接下来 上代码
item_one
item_two
这个是头部,我手动代码addheaderview的 头部布局
two_img
滑动布局里面的控件布局
Main_Adapter 主适配器代码
package com.yangbin.myapplication;
import android.content.Context;
import android.widget.ImageView;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import com.chad.library.adapter.base.BaseMultiItemQuickAdapter;
import com.chad.library.adapter.base.viewholder.BaseViewHolder;
import java.util.ArrayList;
import java.util.List;
public class Main_Adapter extends BaseMultiItemQuickAdapter {
Context mContext;
public Main_Adapter(List data, Context context) {
super(data);
mContext=context;
addItemType(NewsEntity.TYPE_ONE, R.layout.item_one);
addItemType(NewsEntity.TYPE_TWO, R.layout.item_two);
}
@Override
protected void convert(BaseViewHolder helper, NewsEntity item) {
switch (helper.getItemViewType()) {
case NewsEntity.TYPE_ONE:
Glide.with(mContext)
.load(R.drawable.abc)
.into((ImageView) helper.getView(R.id.iv));
break;
case NewsEntity.TYPE_TWO:
RecyclerView rv = helper.getView(R.id.rv_two);
LinearLayoutManager linearLayoutManager = new LinearLayoutManager(mContext);
linearLayoutManager.setOrientation(RecyclerView.HORIZONTAL);
rv.setLayoutManager(linearLayoutManager);
List datas = new ArrayList<>();
datas.add(R.drawable.abc);
datas.add(R.drawable.abc);
datas.add(R.drawable.abc);
datas.add(R.drawable.abc);
datas.add(R.drawable.abc);
datas.add(R.drawable.abc);
ImgAdapter imgAdapter = new ImgAdapter(R.layout.two_img, datas,mContext);
rv.setAdapter(imgAdapter);
break;
}
}
}
图片的适配器
package com.yangbin.myapplication;
import android.content.Context;
import android.widget.ImageView;
import com.bumptech.glide.Glide;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.viewholder.BaseViewHolder;
import java.util.List;
public class ImgAdapter extends BaseQuickAdapter {
Context mContext;
public ImgAdapter(int layoutResId, List data, Context context) {
super(layoutResId, data);
mContext=context;
}
@Override
protected void convert(BaseViewHolder helper, Integer item) {
Glide.with(mContext)
.load(item)
.into((ImageView) helper.getView(R.id.two_img_show));
}
}
MainActivity
package com.yangbin.myapplication;
import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.chad.library.adapter.base.BaseQuickAdapter;
import com.chad.library.adapter.base.listener.OnItemClickListener;
import com.yangbin.FilterTabConfig;
import com.yangbin.base.BaseFilterBean;
import com.yangbin.bean.FilterInfoBean;
import com.yangbin.view.FilterTabView;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private FilterTabView mFtbFilter;
private List mAllPriceList = new ArrayList<>();//总价
private List mSortList = new ArrayList<>();//排序
private RecyclerView rv;
private Main_Adapter main_adapter;
private List datas = new ArrayList<>();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initDatas();
FilterInfoBean bean_price = new FilterInfoBean("总价", FilterTabConfig.FILTER_TYPE_PRICE_UPRIGHT, mAllPriceList);
FilterInfoBean bean_sort = new FilterInfoBean("排序", FilterTabConfig.FILTER_TYPE_SINGLE_SELECT_HAVA_PIC, mSortList);
mFtbFilter.addFilterItem(bean_price.getTabName(), bean_price.getFilterData(), bean_price.getPopupType(), 0, false);
mFtbFilter.addFilterItem(bean_sort.getTabName(), bean_sort.getFilterData(), bean_sort.getPopupType(), 1, true);
}
private void initDatas() {
// datas.add(new NewsEntity(NewsEntity.TYPE_TWO));
datas.add(new NewsEntity(NewsEntity.TYPE_ONE));
datas.add(new NewsEntity(NewsEntity.TYPE_ONE));
datas.add(new NewsEntity(NewsEntity.TYPE_ONE));
datas.add(new NewsEntity(NewsEntity.TYPE_TWO));
datas.add(new NewsEntity(NewsEntity.TYPE_ONE));
datas.add(new NewsEntity(NewsEntity.TYPE_ONE));
// datas.add(new NewsEntity(NewsEntity.TYPE_TWO));
datas.add(new NewsEntity(NewsEntity.TYPE_ONE));
main_adapter.notifyDataSetChanged();
addHeadView();
setAllPriceData();
setSortData();
main_adapter.setOnItemClickListener(new OnItemClickListener() {
@Override
public void onItemClick(@NonNull BaseQuickAdapter, ?> adapter, @NonNull View view, int position) {
Toast.makeText(MainActivity.this, position + "排", Toast.LENGTH_SHORT).show();
}
});
}
private void initViews() {
rv = (RecyclerView) findViewById(R.id.rv);
main_adapter = new Main_Adapter(datas, this);
rv.setAdapter(main_adapter);
rv.setLayoutManager(new LinearLayoutManager(this));
mFtbFilter = (FilterTabView) findViewById(R.id.ftb_filter);
mFtbFilter.setColorMain(getResources().getColor(R.color.color_FF6F00));
mFtbFilter.removeViews();
}
/**
* 设置排序数据
*/
private void setSortData() {
FilterSelectedEntity sortBean_a = new FilterSelectedEntity();
sortBean_a.setTid(0);
sortBean_a.setName("不限");
sortBean_a.setSelected(1);
FilterSelectedEntity sortBean_b = new FilterSelectedEntity();
sortBean_b.setTid(1);
sortBean_b.setName("价格从低到高");
sortBean_b.setSelected(0);
FilterSelectedEntity sortBean_c = new FilterSelectedEntity();
sortBean_c.setTid(2);
sortBean_c.setName("价格从高到低");
sortBean_c.setSelected(0);
FilterSelectedEntity sortBean_d = new FilterSelectedEntity();
sortBean_d.setTid(3);
sortBean_d.setName("日价从低到高");
sortBean_d.setSelected(0);
FilterSelectedEntity sortBean_e = new FilterSelectedEntity();
sortBean_e.setTid(4);
sortBean_e.setName("日价从高到低");
sortBean_e.setSelected(0);
FilterSelectedEntity sortBean_f = new FilterSelectedEntity();
sortBean_f.setTid(5);
sortBean_f.setName("时间从早到晚");
sortBean_f.setSelected(0);
FilterSelectedEntity sortBean_g = new FilterSelectedEntity();
sortBean_g.setTid(6);
sortBean_g.setName("时间从晚到早");
sortBean_g.setSelected(0);
mSortList.add(sortBean_a);
mSortList.add(sortBean_c);
mSortList.add(sortBean_d);
mSortList.add(sortBean_e);
mSortList.add(sortBean_f);
mSortList.add(sortBean_g);
}
/**
* 设置总价数据
*/
private void setAllPriceData() {
FilterSelectedEntity filterSelectedEntity_a = new FilterSelectedEntity();
filterSelectedEntity_a.setTid(0);
filterSelectedEntity_a.setName("不限");
filterSelectedEntity_a.setSelecteStatus(1);
FilterSelectedEntity filterSelectedEntity_b = new FilterSelectedEntity();
filterSelectedEntity_b.setTid(1);
filterSelectedEntity_b.setName("100");
filterSelectedEntity_b.setSelecteStatus(0);
FilterSelectedEntity filterSelectedEntity_c = new FilterSelectedEntity();
filterSelectedEntity_c.setTid(2);
filterSelectedEntity_c.setName("200");
filterSelectedEntity_c.setSelecteStatus(0);
FilterSelectedEntity filterSelectedEntity_d = new FilterSelectedEntity();
filterSelectedEntity_d.setTid(3);
filterSelectedEntity_d.setName("300");
filterSelectedEntity_d.setSelecteStatus(0);
FilterSelectedEntity filterSelectedEntity_e = new FilterSelectedEntity();
filterSelectedEntity_e.setTid(4);
filterSelectedEntity_e.setName("400");
filterSelectedEntity_e.setSelecteStatus(0);
FilterSelectedEntity filterSelectedEntity_f = new FilterSelectedEntity();
filterSelectedEntity_f.setTid(5);
filterSelectedEntity_f.setName("500");
filterSelectedEntity_f.setSelecteStatus(0);
FilterSelectedEntity filterSelectedEntity_g = new FilterSelectedEntity();
filterSelectedEntity_g.setTid(6);
filterSelectedEntity_g.setName("600");
filterSelectedEntity_g.setSelecteStatus(0);
mAllPriceList.add(filterSelectedEntity_a);
mAllPriceList.add(filterSelectedEntity_b);
mAllPriceList.add(filterSelectedEntity_c);
mAllPriceList.add(filterSelectedEntity_d);
mAllPriceList.add(filterSelectedEntity_e);
mAllPriceList.add(filterSelectedEntity_f);
mAllPriceList.add(filterSelectedEntity_g);
}
/**
* 设置附近数据集合
*
* @return
*/
public List loadNearData() {
List areaList = new ArrayList<>();
FilterAreaTwoEntity area_a = new FilterAreaTwoEntity();
area_a.setArea_id(0);
area_a.setName("1000");
area_a.setSelected(0);
FilterAreaTwoEntity area_b = new FilterAreaTwoEntity();
area_b.setArea_id(1);
area_b.setName("2000");
area_b.setSelected(0);
FilterAreaTwoEntity area_c = new FilterAreaTwoEntity();
area_c.setArea_id(2);
area_c.setName("3000");
area_c.setSelected(0);
areaList.add(area_a);
areaList.add(area_b);
areaList.add(area_c);
return areaList;
}
public void addHeadView() {
View headView = getLayoutInflater().inflate(R.layout.item_head, null);
main_adapter.addHeaderView(headView);
}
}
activity_main
https://github.com/binbinyYang/FilterSelectUi 控件地址