网站管理 地址:,如何写网页,人才网招聘网官网,设计师服务平台卡密号本demo基于二级分类双列表联动Demo进行了改进#xff0c;高仿实现了京东的三级类型列表。 京东的如图#xff1a; 本demo的#xff1a;
改进之处
实现了三级列表联动#xff0c;二三级列表之间的滑动监听优化了一下#xff0c;将二级类型选中交予自身的点击事件#…本demo基于二级分类双列表联动Demo进行了改进高仿实现了京东的三级类型列表。 京东的如图 本demo的
改进之处
实现了三级列表联动二三级列表之间的滑动监听优化了一下将二级类型选中交予自身的点击事件不再完全依靠三级列表的滑动回调。
上代码
引入的依赖 //ShapeViewimplementation com.github.getActivity:ShapeView:9.0//Gson解析implementation com.google.code.gson:gson:2.10.1ShapeView主要是美化一下二级条目Gson是为了解析本地的类型json数据
条目布局
item_type_one
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:idid/item_main_left_layoutandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:gravitycenterandroid:orientationhorizontalandroid:padding5dpTextViewandroid:idid/typeandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textSize18spandroid:layout_marginVertical15dp /
/LinearLayoutitem_type_two
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginTop10dpandroid:backgroundcolor/flowcom.hjq.shape.view.ShapeButtonandroid:idid/typeandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:layout_marginHorizontal10dpandroid:gravitycenterandroid:paddingHorizontal10dpandroid:paddingVertical5dpandroid:textSize18spapp:shape_radius10dpapp:shape_solidColorandroid:color/transparentapp:shape_strokeColorcolor/common_accent_colorapp:shape_strokeSize1dpapp:shape_textColorcolor/common_accent_colorapp:shape_textPressedColorandroid:color/whiteapp:shape_typerectangle /
/LinearLayoutitem_type_three
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoandroid:layout_widthmatch_parentandroid:layout_heightwrap_contentandroid:orientationverticalandroid:backgrounddrawable/radius_whiteandroid:layout_margin10dpandroid:padding10dpTextViewandroid:idid/typeandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:textColorcolor/blackandroid:paddingHorizontal10dpapp:drawableEndCompatdrawable/arrows_right_ic /androidx.recyclerview.widget.RecyclerViewandroid:idid/recyclerandroid:layout_widthmatch_parentandroid:layout_heightwrap_content/
/LinearLayoutitem_type_four其实这个才是类型三上面的是类型三的外围包裹但是不想改了
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:backgroundcolor/whiteandroid:gravitycenterandroid:orientationverticalImageViewandroid:idid/iconandroid:srcmipmap/ic_logoandroid:layout_margin5dpandroid:layout_width60dpandroid:layout_height60dp /TextViewandroid:idid/typeandroid:layout_widthwrap_contentandroid:layout_heightwrap_contentandroid:layout_marginTop5dpandroid:textSize14spandroid:text男鞋 /
/LinearLayout主页面布局
由两个列表变成了三个列表
?xml version1.0 encodingutf-8?
LinearLayout xmlns:androidhttp://schemas.android.com/apk/res/androidxmlns:apphttp://schemas.android.com/apk/res-autoxmlns:toolshttp://schemas.android.com/toolsandroid:backgroundcolor/flowandroid:orientationhorizontalandroid:layout_widthmatch_parentandroid:layout_heightmatch_parenttools:context.MainActivityandroidx.recyclerview.widget.RecyclerViewandroid:idid/oneandroid:layout_weight7android:layout_widthmatch_parentandroid:layout_heightmatch_parent/LinearLayoutandroid:layout_weight3android:orientationverticalandroid:layout_widthmatch_parentandroid:layout_heightmatch_parentandroidx.recyclerview.widget.RecyclerViewandroid:idid/twoandroid:layout_widthmatch_parentandroid:layout_heightwrap_content/androidx.recyclerview.widget.RecyclerViewandroid:idid/threeandroid:layout_weight1android:layout_marginTop10dpandroid:layout_widthmatch_parentandroid:layout_height0dp//LinearLayout
/LinearLayout适配器
OneTypeAdapter
public class OneTypeAdapter extends RecyclerView.AdapterOneTypeAdapter.OneTypeHolder {private final Context context;private final ListGoodsTypeBN list;public int selectedPosition 0;//当前选择的下标private OnItemClickListener onItemClickListener;public OneTypeAdapter(Context context, ListGoodsTypeBN list) {this.context context;this.list list;}NonNullOverridepublic OneTypeHolder onCreateViewHolder(NonNull ViewGroup parent, int viewType) {View view LayoutInflater.from(context).inflate(R.layout.item_type_one,parent,false);return new OneTypeHolder(view);}Overridepublic void onBindViewHolder(NonNull OneTypeHolder holder, SuppressLint(RecyclerView) int position) {holder.type.setText(list.get(position).getType_name());holder.itemView.setOnClickListener(new View.OnClickListener() {Overridepublic void onClick(View v) {if (selectedPosition ! holder.getAdapterPosition()) {//点击了新的 item更新状态selectedPosition holder.getAdapterPosition();}if (onItemClickListener!null){onItemClickListener.onItemClickListener(v,position);}notifyDataSetChanged();}});if (positionselectedPosition){holder.type.setTextColor(context.getColor(R.color.red));holder.type.setTextSize(30);}else {holder.type.setTextColor(context.getColor(R.color.black));holder.type.setTextSize(18);}}Overridepublic int getItemCount() {return list.size();}public static class OneTypeHolder extends RecyclerView.ViewHolder{TextView type;public OneTypeHolder(NonNull View itemView) {super(itemView);type itemView.findViewById(R.id.type);}}public void setOnItemClickListener(OnItemClickListener onItemClickListener) {this.onItemClickListener onItemClickListener;}public interface OnItemClickListener {void onItemClickListener(View v, int position);}
}TwoTypeAdapter
public class TwoTypeAdapter extends RecyclerView.AdapterTwoTypeAdapter.TwoTypeHolder {private Context context;private ListGoodsTypeBN list;private OnItemClickListener onItemClickListener;public int selectPosition0;public TwoTypeAdapter(Context context, ListGoodsTypeBN list) {this.context context;this.list list;}NonNullOverridepublic TwoTypeHolder onCreateViewHolder(NonNull ViewGroup parent, int viewType) {View view LayoutInflater.from(context).inflate(R.layout.item_type_two,parent,false);return new TwoTypeHolder(view);}Overridepublic void onBindViewHolder(NonNull TwoTypeHolder holder, int position) {holder.type.setText(list.get(position).getType_name());holder.itemView.setOnClickListener(new View.OnClickListener() {Overridepublic void onClick(View view) {selectPositionposition;notifyDataSetChanged();if (onItemClickListener!null){onItemClickListener.onItemClickListener(view,position);}}});if (positionselectPosition){holder.type.setTextColor(context.getColor(R.color.common_accent_color));holder.type.getShapeDrawableBuilder().setStrokeColor(context.getColor(R.color.common_accent_color)).intoBackground();}else {holder.type.setTextColor(context.getColor(R.color.grey));holder.type.getShapeDrawableBuilder().setStrokeColor(context.getColor(R.color.grey)).intoBackground();}}Overridepublic int getItemCount() {return list.size();}public static class TwoTypeHolder extends RecyclerView.ViewHolder{ShapeButton type;public TwoTypeHolder(NonNull View itemView) {super(itemView);type itemView.findViewById(R.id.type);}}public void setOnItemClickListener(OnItemClickListener onItemClickListener) {this.onItemClickListener onItemClickListener;}public interface OnItemClickListener {void onItemClickListener(View v, int position);}
}注意这里这里二级条目的点击事件下会将自身选中自己来选中自己然后更新不再交由列表的滑动来更新。
之前的是这样。因为后面的几个条目点击存在一些问题。 ThreeTypeAdapter
public class ThreeTypeAdapter extends RecyclerView.AdapterThreeTypeAdapter.ThreeTYpeHolder {private final Context context;private final ListGoodsTypeBN list;public ThreeTypeAdapter(Context context, ListGoodsTypeBN list) {this.context context;this.list list;}NonNullOverridepublic ThreeTYpeHolder onCreateViewHolder(NonNull ViewGroup parent, int viewType) {View view LayoutInflater.from(context).inflate(R.layout.item_type_three,parent,false);return new ThreeTYpeHolder(view);}Overridepublic void onBindViewHolder(NonNull ThreeTYpeHolder holder, int position) {holder.type.setText(list.get(position).getType_name());holder.recyclerView.setAdapter(new FourAdapter(context,list.get(position).getNextType()));holder.recyclerView.setLayoutManager(new GridLayoutManager(context,3));}Overridepublic int getItemCount() {return list.size();}public static class ThreeTYpeHolder extends RecyclerView.ViewHolder{TextView type;RecyclerView recyclerView;public ThreeTYpeHolder(NonNull View itemView) {super(itemView);type itemView.findViewById(R.id.type);recyclerView itemView.findViewById(R.id.recycler);}}
}
FourAdapter
public class FourAdapter extends RecyclerView.AdapterFourAdapter.FourHolder {private final Context context;private final ListGoodsTypeBN list;public FourAdapter( Context context,ListGoodsTypeBN list) {this.context context;this.list list;}NonNullOverridepublic FourHolder onCreateViewHolder(NonNull ViewGroup parent, int viewType) {View view LayoutInflater.from(context).inflate(R.layout.item_type_four,parent,false);return new FourHolder(view);}Overridepublic void onBindViewHolder(NonNull FourHolder holder, int position) {GoodsTypeBN goodsTypeBNlist.get(position);holder.type.setText(goodsTypeBN.getType_name());holder.itemView.setOnClickListener(new View.OnClickListener() {Overridepublic void onClick(View view) {Toast.makeText(context, 点击了goodsTypeBN.getType_name(), Toast.LENGTH_SHORT).show();}});}Overridepublic int getItemCount() {return list.size();}public static class FourHolder extends RecyclerView.ViewHolder{TextView type;ImageView icon;public FourHolder(NonNull View itemView) {super(itemView);type itemView.findViewById(R.id.type);icon itemView.findViewById(R.id.icon);}}
}
主要代码
GoodsTypeBN类
public class GoodsTypeBN {private String type_id;private String type_name;private String parent_id;private String type_lv;private ListGoodsTypeBN nextType;public String getType_id() {return type_id;}public void setType_id(String type_id) {this.type_id type_id;}public String getType_name() {return type_name;}public void setType_name(String type_name) {this.type_name type_name;}public String getParent_id() {return parent_id;}public void setParent_id(String parent_id) {this.parent_id parent_id;}public String getType_lv() {return type_lv;}public void setType_lv(String type_lv) {this.type_lv type_lv;}public ListGoodsTypeBN getNextType() {return nextType;}public void setNextType(ListGoodsTypeBN nextType) {this.nextType nextType;}Overridepublic String toString() {return GoodsTypeBN{ type_id type_id \ , type_name type_name \ , parent_id parent_id \ , type_lv type_lv \ , nextType nextType };}
}
主页面逻辑 //一级类型条目点击oneTypeAdapter.setOnItemClickListener(new OneTypeAdapter.OnItemClickListener() {Overridepublic void onItemClickListener(View v, int position) {//更换二级三级类型的数据typeTwo.clear();typeTwo.addAll(typeOne.get(position).getNextType());twoTypeAdapter.selectPosition0;twoTypeAdapter.notifyDataSetChanged();threeTypeAdapter.notifyDataSetChanged();}});//二级类型条目点击twoTypeAdapter.setOnItemClickListener(new TwoTypeAdapter.OnItemClickListener() {Overridepublic void onItemClickListener(View v, int position) {//将三级类型滑动到相应位置LinearLayoutManager threeLayoutManager ((LinearLayoutManager) three.getLayoutManager());if (threeLayoutManager!null){threeLayoutManager.scrollToPositionWithOffset(position,0);}}});//添加三级类型滑动监听three.addOnScrollListener(onScrollListener);添加滑动监听
RecyclerView.OnScrollListener onScrollListener new RecyclerView.OnScrollListener() {/**获取第一个可见的item的position*/int currentPosition 0;Overridepublic void onScrolled(NonNull RecyclerView recyclerView, int dx, int dy) {LinearLayoutManager twoLayoutManager (LinearLayoutManager) two.getLayoutManager();LinearLayoutManager threeLayoutManager ((LinearLayoutManager) three.getLayoutManager());if (twoLayoutManager!nullthreeLayoutManager!null){currentPosition threeLayoutManager.findFirstCompletelyVisibleItemPosition();/**这地方需要进行判断如果下面的Recycle在移动的时候上面的RecyclerView也是需要进行移动的上面的recyclerview有可能会不可见这时候我们必须去判断一下上面最后的一个item是不是小于下面滑动的位置或上面第一个item是不是大于下面滑动的位置*/if (twoLayoutManager.findFirstCompletelyVisibleItemPosition() currentPosition) {twoLayoutManager.scrollToPositionWithOffset(currentPosition, 0);} else if (twoLayoutManager.findFirstCompletelyVisibleItemPosition() currentPosition) {twoLayoutManager.scrollToPositionWithOffset(currentPosition, 0);}// 判断滚动的方向和位置判断是否触发了回弹效果if (dy 0 !recyclerView.canScrollVertically(-1)) {// 触发了上拉的回弹效果Log.e(TAG, onScrolled: 触发了上拉的回弹效果 );} else if (dy 0 !recyclerView.canScrollVertically(1)) {// 触发了下拉的回弹效果currentPosition typeTwo.size() - 1;Log.e(TAG, onScrolled: 触发了下拉的回弹效果 );}twoTypeAdapter.selectPositioncurrentPosition;twoTypeAdapter.notifyDataSetChanged();}}};全部代码
public class MainActivity extends AppCompatActivity {private OneTypeAdapter oneTypeAdapter;private TwoTypeAdapter twoTypeAdapter;private ThreeTypeAdapter threeTypeAdapter;private ListGoodsTypeBN typeOne;private ListGoodsTypeBN typeTwonew ArrayList();private ListGoodsTypeBN typeThreenew ArrayList();private RecyclerView one,two,three;Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);onefindViewById(R.id.one);twofindViewById(R.id.two);threefindViewById(R.id.three);init();}private void init(){String json getJson(this, category.json);if (!TextUtils.isEmpty(json)){//解析数据ListGoodsTypeBN typeBNBaseENnew Gson().fromJson(json, new TypeTokenListGoodsTypeBN(){}.getType());if (typeBNBaseEN!null){typeOnetypeBNBaseEN;//设置一级类型oneTypeAdapternew OneTypeAdapter(this,typeOne);one.setLayoutManager(new LinearLayoutManager(this));one.setAdapter(oneTypeAdapter);//设置初始二级类型typeTwo.clear();typeTwo.addAll(typeOne.get(0).getNextType());twoTypeAdapternew TwoTypeAdapter(this,typeTwo);LinearLayoutManager linearLayoutManager new LinearLayoutManager(this);linearLayoutManager.setOrientation(LinearLayoutManager.HORIZONTAL);two.setLayoutManager(linearLayoutManager);two.setAdapter(twoTypeAdapter);//设置初始三级类型typeThree.clear();typeThree.addAll(typeTwo.get(0).getNextType());threeTypeAdapternew ThreeTypeAdapter(this,typeTwo);three.setLayoutManager(new LinearLayoutManager(this));three.setAdapter(threeTypeAdapter);//一级类型条目点击oneTypeAdapter.setOnItemClickListener(new OneTypeAdapter.OnItemClickListener() {Overridepublic void onItemClickListener(View v, int position) {//更换二级三级类型的数据typeTwo.clear();typeTwo.addAll(typeOne.get(position).getNextType());twoTypeAdapter.selectPosition0;twoTypeAdapter.notifyDataSetChanged();threeTypeAdapter.notifyDataSetChanged();}});//二级类型条目点击twoTypeAdapter.setOnItemClickListener(new TwoTypeAdapter.OnItemClickListener() {Overridepublic void onItemClickListener(View v, int position) {//将三级类型滑动到相应位置LinearLayoutManager threeLayoutManager ((LinearLayoutManager) three.getLayoutManager());if (threeLayoutManager!null){threeLayoutManager.scrollToPositionWithOffset(position,0);}}});//添加三级类型滑动监听three.addOnScrollListener(onScrollListener);}}}RecyclerView.OnScrollListener onScrollListener new RecyclerView.OnScrollListener() {/**获取第一个可见的item的position*/int currentPosition 0;Overridepublic void onScrolled(NonNull RecyclerView recyclerView, int dx, int dy) {LinearLayoutManager twoLayoutManager (LinearLayoutManager) two.getLayoutManager();LinearLayoutManager threeLayoutManager ((LinearLayoutManager) three.getLayoutManager());if (twoLayoutManager!nullthreeLayoutManager!null){currentPosition threeLayoutManager.findFirstCompletelyVisibleItemPosition();/**这地方需要进行判断如果下面的Recycle在移动的时候上面的RecyclerView也是需要进行移动的上面的recyclerview有可能会不可见这时候我们必须去判断一下上面最后的一个item是不是小于下面滑动的位置或上面第一个item是不是大于下面滑动的位置*/if (twoLayoutManager.findFirstCompletelyVisibleItemPosition() currentPosition) {twoLayoutManager.scrollToPositionWithOffset(currentPosition, 0);} else if (twoLayoutManager.findFirstCompletelyVisibleItemPosition() currentPosition) {twoLayoutManager.scrollToPositionWithOffset(currentPosition, 0);}// 判断滚动的方向和位置判断是否触发了回弹效果if (dy 0 !recyclerView.canScrollVertically(-1)) {// 触发了上拉的回弹效果Log.e(TAG, onScrolled: 触发了上拉的回弹效果 );} else if (dy 0 !recyclerView.canScrollVertically(1)) {// 触发了下拉的回弹效果currentPosition typeTwo.size() - 1;Log.e(TAG, onScrolled: 触发了下拉的回弹效果 );}twoTypeAdapter.selectPositioncurrentPosition;twoTypeAdapter.notifyDataSetChanged();}}};public static String getJson(Context context, String fileName) {StringBuilder stringBuilder new StringBuilder();//获得assets资源管理器AssetManager assetManager context.getAssets();//使用IO流读取json文件内容try {BufferedReader bufferedReader new BufferedReader(new InputStreamReader(assetManager.open(fileName), StandardCharsets.UTF_8));String line;while ((line bufferedReader.readLine()) ! null) {stringBuilder.append(line);}} catch (IOException e) {e.printStackTrace();}return stringBuilder.toString();}
}源码
githubhttps://github.com/panzhusheng/JDCategorydemo giteehttps://gitee.com/pan-zs/JDCategorydemo
