这种UI电商比较常见,我这个是在侧滑界面写的,效果图先看:
布局侧滑写了两个,一左一右,左边是单选,右边是多选
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
android:fitsSystemWindows="true"
android:orientation="vertical"
tools:context=".cehua.CeHuaActivity">
<FrameLayout
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.appcompat.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary" />
</FrameLayout>
<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/draw"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EFEAEA"
android:layout_gravity="end">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="@color/black"
android:text="多选"/>
<TextView
android:id="@+id/tv1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="标题1"
android:layout_marginBottom="10dp" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recy1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tv2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="标题2"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recy2"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tv3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="标题3"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recy3"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#EFEAEA"
android:layout_gravity="left">
<androidx.core.widget.NestedScrollView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="20sp"
android:textColor="@color/black"
android:text="单选"/>
<TextView
android:id="@+id/tvleft1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="标题1"
android:layout_marginBottom="10dp" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyleft1"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tvleft2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="标题2"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyleft2"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/tvleft3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="标题3"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"/>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyleft3"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
</androidx.core.widget.NestedScrollView>
</androidx.constraintlayout.widget.ConstraintLayout>
</androidx.drawerlayout.widget.DrawerLayout>
</LinearLayout>
自己模拟一个实体类
public class CeHuaBean{
private OneTypeGroup oneGroupEntity;
private TwoTypeGroup TwoGroupEntity;
private TreeTypeGroup TreeGroupEntity;
public CeHuaBean(OneTypeGroup oneGroupEntity, TwoTypeGroup twoGroupEntity, TreeTypeGroup treeGroupEntity) {
this.oneGroupEntity = oneGroupEntity;
TwoGroupEntity = twoGroupEntity;
TreeGroupEntity = treeGroupEntity;
}
public OneTypeGroup getOneGroupEntity() {
return oneGroupEntity;
}
public void setOneGroupEntity(OneTypeGroup oneGroupEntity) {
this.oneGroupEntity = oneGroupEntity;
}
public TwoTypeGroup getTwoGroupEntity() {
return TwoGroupEntity;
}
public void setTwoGroupEntity(TwoTypeGroup twoGroupEntity) {
TwoGroupEntity = twoGroupEntity;
}
public TreeTypeGroup getTreeGroupEntity() {
return TreeGroupEntity;
}
public void setTreeGroupEntity(TreeTypeGroup treeGroupEntity) {
TreeGroupEntity = treeGroupEntity;
}
public static class GroupEntity {
private List<GroupItemListDTO> groupItemList;
public GroupEntity(List<GroupItemListDTO> groupItemList) {
this.groupItemList = groupItemList;
}
}
public static class GroupItemListDTO {
private String code;
private String name;
private boolean isSelect;
public GroupItemListDTO(String code, String name) {
this.code = code;
this.name = name;
}
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isSelect() {
return isSelect;
}
public void setSelect(boolean select) {
isSelect = select;
}
}
public static class OneTypeGroup{
private GroupEntity groupEntity;
private String groupName;
public OneTypeGroup(CeHuaBean.GroupEntity groupEntity, String groupName) {
this.groupEntity = groupEntity;
this.groupName = groupName;
}
public GroupEntity getGroupEntity() {
return groupEntity;
}
public void setGroupEntity(GroupEntity groupEntity) {
this.groupEntity = groupEntity;
}
public String getGroupName() {
return groupName;
}
public void setGroupName(String groupName) {
this.groupName = groupName;
}
}
public static class TwoTypeGroup{
private GroupEntity groupEntity;
private String groupName;
public TwoTypeGroup(CeHuaBean.GroupEntity groupEntity, String groupName) {
this.groupEntity = groupEntity;
this.groupName = groupName;
}
public GroupEntity getGroupEntity() {
return groupEntity;
}
public void setGroupEntity(GroupEntity groupEntity) {
this.groupEntity = groupEntity;
}
public String getGroupName() {
return groupName;
}
public void setGroupName(String groupName) {
this.groupName = groupName;
}
}
public static class TreeTypeGroup{
private GroupEntity groupEntity;
private String groupName;
public TreeTypeGroup(CeHuaBean.GroupEntity groupEntity, String groupName) {
this.groupEntity = groupEntity;
this.groupName = groupName;
}
public GroupEntity getGroupEntity() {
return groupEntity;
}
public void setGroupEntity(GroupEntity groupEntity) {
this.groupEntity = groupEntity;
}
public String getGroupName() {
return groupName;
}
public void setGroupName(String groupName) {
this.groupName = groupName;
}
}
}
这个单选的Adapter
/**
* 单选
*/
public class CeHuaCommonAdapterOnly extends RecyclerView.Adapter<CeHuaCommonAdapterOnly.ViewHolder> {
private final Context mContext;
private final List<CeHuaBeanLeft.GroupItemListDTO> mData;
private List<CeHuaBeanLeft.GroupItemListDTO> a;
public CeHuaCommonAdapterOnly(Context context, List<CeHuaBeanLeft.GroupItemListDTO> ceHuaBeans) {
this.mContext = context;
this.mData = ceHuaBeans;
this.a = ceHuaBeans;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View inflate = LayoutInflater.from(mContext).inflate(R.layout.cehua_item, viewGroup, false);
ViewHolder viewHolder = new ViewHolder(inflate);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull CeHuaCommonAdapterOnly.ViewHolder viewHolder, int i) {
viewHolder.tv.setText(mData.get(i).getName());
isSelectfun(i, viewHolder.tv);
viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
for (int j = 0; j <a.size() ; j++) {
if (a.get(j).getCode().equals(mData.get(i).getCode()) ) {
a.get(j).setSelect(!mData.get(i).isSelect());
} else {
a.get(j).setSelect(false);
notifyDataSetChanged();
}
}
isSelectfun(i, viewHolder.tv);
}
});
}
private void isSelectfun(int i, TextView tv) {
if (mData.get(i).isSelect()) {
tv.setBackgroundResource(R.drawable.filter_item_selected_bg);
Log.d("测试1-0", "1");
} else {
tv.setBackgroundResource(R.drawable.filter_item_bg);
Log.d("测试1-1", "2");
}
}
@Override
public int getItemCount() {
return mData.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
private TextView tv;
public ViewHolder(View itemView) {
super(itemView);
tv = itemView.findViewById(R.id.itemText);
}
}
}
多选Adapter
/**
* 多选
*/
public class CeHuaCommonAdapter extends RecyclerView.Adapter<CeHuaCommonAdapter.ViewHolder>{
private final Context mContext;
private final List<CeHuaBean.GroupItemListDTO> mData;
public CeHuaCommonAdapter(Context context, List<CeHuaBean.GroupItemListDTO> ceHuaBeans){
this.mContext=context;
this.mData = ceHuaBeans;
}
@NonNull
@Override
public ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int i) {
View inflate = LayoutInflater.from(mContext).inflate(R.layout.cehua_item, viewGroup ,false);
ViewHolder viewHolder=new ViewHolder(inflate);
return viewHolder;
}
@Override
public void onBindViewHolder(@NonNull CeHuaCommonAdapter.ViewHolder viewHolder, int i) {
viewHolder.tv.setText(mData.get(i).getName());
viewHolder.itemView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
if(mData.get(i).isSelect()){
viewHolder.tv.setBackgroundResource(R.drawable.filter_item_bg);
mData.get(i).setSelect(false);
}else{
viewHolder.tv.setBackgroundResource(R.drawable.filter_item_selected_bg);
mData.get(i).setSelect(true);
}
}
});
}
@Override
public int getItemCount() {
return mData.size();
}
public class ViewHolder extends RecyclerView.ViewHolder {
private TextView tv;
public ViewHolder(View itemView){
super(itemView);
tv = itemView.findViewById(R.id.itemText);
}
}
}
主要Activity,主要写的模拟数据了
public class CeHuaActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_ce_hua);
//右侧多选菜单
TextView tv1 = findViewById(R.id.tv1);
TextView tv2 = findViewById(R.id.tv2);
TextView tv3 = findViewById(R.id.tv3);
RecyclerView recy1 = findViewById(R.id.recy1);
RecyclerView recy2 = findViewById(R.id.recy2);
RecyclerView recy3 = findViewById(R.id.recy3);
Toolbar toolbar = findViewById(R.id.toolbar);
DrawerLayout draw = findViewById(R.id.draw);
//模拟数据
List<CeHuaBean.GroupItemListDTO> oneList = new ArrayList<>();
oneList.add(new CeHuaBean.GroupItemListDTO("1", "星座型"));
oneList.add(new CeHuaBean.GroupItemListDTO("2", "水瓶座"));
oneList.add(new CeHuaBean.GroupItemListDTO("3", "摩羯座"));
oneList.add(new CeHuaBean.GroupItemListDTO("4", "天秤座"));
CeHuaBean.OneTypeGroup oneTypeGrop = new CeHuaBean.OneTypeGroup(new CeHuaBean.GroupEntity(oneList), "标题1");
List<CeHuaBean.GroupItemListDTO> twoList = new ArrayList<>();
twoList.add(new CeHuaBean.GroupItemListDTO("1", "血型"));
twoList.add(new CeHuaBean.GroupItemListDTO("2", "A型"));
twoList.add(new CeHuaBean.GroupItemListDTO("3", "B型"));
twoList.add(new CeHuaBean.GroupItemListDTO("4", "AB型"));
CeHuaBean.TwoTypeGroup twoTypeGrop = new CeHuaBean.TwoTypeGroup(new CeHuaBean.GroupEntity(twoList), "标题2");
//模拟数据
List<CeHuaBean.GroupItemListDTO> treeList = new ArrayList<>();
treeList.add(new CeHuaBean.GroupItemListDTO("1", "学历型"));
treeList.add(new CeHuaBean.GroupItemListDTO("2", "本科"));
treeList.add(new CeHuaBean.GroupItemListDTO("3", "研究生"));
treeList.add(new CeHuaBean.GroupItemListDTO("4", "硕士"));
CeHuaBean.TreeTypeGroup treeTypeGrop = new CeHuaBean.TreeTypeGroup(new CeHuaBean.GroupEntity(treeList), "标题3");
//模拟数据
CeHuaBean ceHuaBean = new CeHuaBean(oneTypeGrop, twoTypeGrop, treeTypeGrop);
tv1.setText(ceHuaBean.getOneGroupEntity().getGroupName());
tv2.setText(ceHuaBean.getTwoGroupEntity().getGroupName());
tv3.setText(ceHuaBean.getTreeGroupEntity().getGroupName());
RecyclerView.LayoutManager layoutManager = new GridLayoutManager(this, 3);
CeHuaCommonAdapter ceHuaCommonAdapter = new CeHuaCommonAdapter(this, oneList);
recy1.setLayoutManager(layoutManager);
recy1.setAdapter(ceHuaCommonAdapter);
//布局管理器 及适配器
RecyclerView.LayoutManager layoutManager2 = new GridLayoutManager(this, 3);
CeHuaCommonAdapter ceHuaCommonAdapter2 = new CeHuaCommonAdapter(this, twoList);
recy2.setLayoutManager(layoutManager2);
recy2.setAdapter(ceHuaCommonAdapter2);
RecyclerView.LayoutManager layoutManager3 = new GridLayoutManager(this, 3);
CeHuaCommonAdapter ceHuaCommonAdapter3 = new CeHuaCommonAdapter(this, treeList);
recy3.setLayoutManager(layoutManager3);
recy3.setAdapter(ceHuaCommonAdapter3);
//左侧单选菜单
TextView tvLeft1 = findViewById(R.id.tvleft1);
TextView tvLeft2 = findViewById(R.id.tvleft2);
TextView tvLeft3 = findViewById(R.id.tvleft3);
RecyclerView recyLeft1 = findViewById(R.id.recyleft1);
RecyclerView recyLeft2 = findViewById(R.id.recyleft2);
RecyclerView recyLeft3 = findViewById(R.id.recyleft3);
//模拟数据
List<CeHuaBeanLeft.GroupItemListDTO> oneLeftList = new ArrayList<>();
oneLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("1", "星座型"));
oneLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("2", "水瓶座"));
oneLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("3", "摩羯座"));
oneLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("4", "天秤座"));
CeHuaBeanLeft.OneTypeGroup oneLeftTypeGrop = new CeHuaBeanLeft.OneTypeGroup(new CeHuaBeanLeft.GroupEntity(oneLeftList), "标题1");
List<CeHuaBeanLeft.GroupItemListDTO> twoLeftList = new ArrayList<>();
twoLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("5", "血型"));
twoLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("6", "A型"));
twoLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("7", "B型"));
twoLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("8", "AB型"));
CeHuaBeanLeft.TwoTypeGroup twoLeftTypeGrop = new CeHuaBeanLeft.TwoTypeGroup(new CeHuaBeanLeft.GroupEntity(twoLeftList), "标题2");
//模拟数据
List<CeHuaBeanLeft.GroupItemListDTO> treeLeftList = new ArrayList<>();
treeLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("9", "学历型"));
treeLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("10", "本科"));
treeLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("11", "研究生"));
treeLeftList.add(new CeHuaBeanLeft.GroupItemListDTO("12", "硕士"));
CeHuaBeanLeft.TreeTypeGroup treeLeftTypeGrop = new CeHuaBeanLeft.TreeTypeGroup(new CeHuaBeanLeft.GroupEntity(treeLeftList), "标题3");
//模拟数据
CeHuaBeanLeft ceHuaBeanLeft = new CeHuaBeanLeft(oneLeftTypeGrop, twoLeftTypeGrop, treeLeftTypeGrop);
tvLeft1.setText(ceHuaBeanLeft.getOneGroupEntity().getGroupName());
tvLeft2.setText(ceHuaBeanLeft.getTwoGroupEntity().getGroupName());
tvLeft3.setText(ceHuaBeanLeft.getTreeGroupEntity().getGroupName());
RecyclerView.LayoutManager layoutManagerLeft = new GridLayoutManager(this, 3);
CeHuaCommonAdapterOnly ceHuaCommonAdapterLeft = new CeHuaCommonAdapterOnly(this, oneLeftList);
recyLeft1.setLayoutManager(layoutManagerLeft);
recyLeft1.setAdapter(ceHuaCommonAdapterLeft);
//布局管理器 及适配器
RecyclerView.LayoutManager layoutManagerLeft2 = new GridLayoutManager(this, 3);
CeHuaCommonAdapterOnly ceHuaCommonAdapterLeft2 = new CeHuaCommonAdapterOnly(this, twoLeftList);
recyLeft2.setLayoutManager(layoutManagerLeft2);
recyLeft2.setAdapter(ceHuaCommonAdapterLeft2);
RecyclerView.LayoutManager layoutManagerLeft3 = new GridLayoutManager(this, 3);
CeHuaCommonAdapterOnly ceHuaCommonAdapterLeft3 = new CeHuaCommonAdapterOnly(this, treeLeftList);
recyLeft3.setLayoutManager(layoutManagerLeft3);
recyLeft3.setAdapter(ceHuaCommonAdapterLeft3);
//toolbar
toolbar.setTitle("菜单筛选");
setSupportActionBar(toolbar);
ActionBarDrawerToggle mActionBarDrawerToggle = new ActionBarDrawerToggle(this, draw, toolbar, R.string.com_sswl_open_drawer, R.string.com_sswl_close_drawer);
draw.addDrawerListener(mActionBarDrawerToggle);
mActionBarDrawerToggle.syncState();
}
}
选中背景及未选中背景
选择的
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#00BCD4" />
<corners android:radius="21dp" />
<solid android:color="#CDDC39" />
</shape>
未选择的
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="#D6D6D6" />
<corners android:radius="21dp" />
</shape>