Android開發丶帶有型別的列表功能實現
阿新 • • 發佈:2018-12-10
標題乍看起來有點不知所云,話不多說,效果圖附上
每個大標籤分為數個小標籤,頂部有個型別title,點選每個小item會觸發相應位置的點選事件,歐了,流程走起來~~~
1.首先當然還是畫UI啦,分析介面,只是一個列表,這裡我們用RecyclerView。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.RecyclerView 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" tools:context=".MainActivity" android:id="@+id/main_rl" />
2.繪製每個大標籤item的佈局,分析介面,上方的TextView型別,下方我們放置一個豎直方向的LinearLayout佈局用於動態載入小標籤item。
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#e3e3e3" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="#ffffff" android:orientation="vertical"> <TextView android:id="@+id/item_main_type" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" android:text="型別" android:textColor="@color/colorPrimaryDark" android:textSize="16sp" /> <View android:layout_width="match_parent" android:layout_height="1px" android:background="@color/colorPrimaryDark" /> <LinearLayout android:id="@+id/item_main_ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> </LinearLayout> </LinearLayout> </LinearLayout>
3.然後畫每個小item標籤的佈局,這裡比較簡單,只是一個TextView,圓點ImageView和下方的一條橫線view
item_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#e3e3e3" android:orientation="vertical"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:background="#ffffff" android:orientation="vertical"> <TextView android:id="@+id/item_main_type" android:layout_width="wrap_content" android:layout_height="wrap_content" android:padding="10dp" android:text="型別" android:textColor="@color/colorPrimaryDark" android:textSize="16sp" /> <View android:layout_width="match_parent" android:layout_height="1px" android:background="@color/colorPrimaryDark" /> <LinearLayout android:id="@+id/item_main_ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> </LinearLayout> </LinearLayout> </LinearLayout>
4.圓點背景xml如下
shape_point.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<size android:width="10dp"
android:height="10dp"/>
<solid android:color="@color/colorPrimaryDark"/>
</shape>
5.佈局畫完,新增一些假資料,新建一個內容bean
package com.fantasychong.typelisttest0911; import java.util.List; public class MainBean { private String type; private List<MainBeanItem> content; @Override public String toString() { return "MainBean{" + "type='" + type + '\'' + ", content=" + content + '}'; } public String getType() { return type; } public void setType(String type) { this.type = type; } public List<MainBeanItem> getContent() { return content; } public void setContent(List<MainBeanItem> content) { this.content = content; } public MainBean(String type, List<MainBeanItem> content) { this.type = type; this.content = content; } public MainBean() { } public static class MainBeanItem { private String title; @Override public String toString() { return "MainBeanItem{" + "title='" + title + '\'' + '}'; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public MainBeanItem(String title) { this.title = title; } } }
6.接下來就可以搞列表介面卡了,重點,敲黑板!!!
在holder中初始化控制元件
class MyHolder extends RecyclerView.ViewHolder { private final LinearLayout ll; private final TextView type; public MyHolder(@NonNull View itemView) { super(itemView); ll = itemView.findViewById(R.id.item_main_ll); type = itemView.findViewById(R.id.item_main_type); } }
重寫onBindViewHolder方法,在這裡動態新增子item標籤。
@Override public void onBindViewHolder(@NonNull MainAdapter.MyHolder myHolder, int position) { myHolder.type.setText(list.get(position).getType()); myHolder.ll.removeAllViews(); final List<MainBean.MainBeanItem> mainBeanItemList= list.get(position).getContent(); if (list.size() > 0) { for (int i = 0; i < mainBeanItemList.size(); i++) { View view = LayoutInflater.from(context).inflate(R.layout.item_main_content, null); title = view.findViewById(R.id.item_main_content_title); item = view.findViewById(R.id.item_main_content_ll); divider = view.findViewById(R.id.item_main_content_view); title.setText(mainBeanItemList.get(i).getTitle()); myHolder.ll.addView(view); if (i== mainBeanItemList.size()- 1){ divider.setVisibility(View.GONE); }else { divider.setVisibility(View.VISIBLE); } } } }
使用介面回撥完成子item標籤的點選事件
public interface OnItemClickListener{ void onItemClick(MainBean.MainBeanItem beanItem); } public void setOnItemClickListener(OnItemClickListener listener){ this.listener= listener; }
給子item標籤設定點選事件
if (i== mainBeanItemList.size()- 1){ divider.setVisibility(View.GONE); }else { divider.setVisibility(View.VISIBLE); } final int finalI = i; item.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { listener.onItemClick(mainBeanItemList.get(finalI)); } });
7.開啟Activity
新增假資料
private void initList() { MainBean bean= new MainBean(); List<MainBean.MainBeanItem> list = new ArrayList<>(); bean.setType("宋冬野"); MainBean.MainBeanItem beanItem= new MainBean.MainBeanItem("斑馬斑馬"); MainBean.MainBeanItem beanItem1= new MainBean.MainBeanItem("鴿子"); MainBean.MainBeanItem beanItem2= new MainBean.MainBeanItem("卡比巴拉的海"); list.add(beanItem); list.add(beanItem1); list.add(beanItem2); bean.setContent(list); MainBean bean1= new MainBean(); List<MainBean.MainBeanItem> list1 = new ArrayList<>(); bean1.setType("王菲"); MainBean.MainBeanItem beanItem3= new MainBean.MainBeanItem("你在終點等我"); MainBean.MainBeanItem beanItem4= new MainBean.MainBeanItem("人間"); MainBean.MainBeanItem beanItem5= new MainBean.MainBeanItem("紅豆"); MainBean.MainBeanItem beanItem9= new MainBean.MainBeanItem("匆匆那年"); list1.add(beanItem3); list1.add(beanItem4); list1.add(beanItem5); list1.add(beanItem9); bean1.setContent(list1); MainBean bean2= new MainBean(); List<MainBean.MainBeanItem> list2 = new ArrayList<>(); bean2.setType("陳粒"); MainBean.MainBeanItem beanItem6= new MainBean.MainBeanItem("奇妙能力歌"); MainBean.MainBeanItem beanItem7= new MainBean.MainBeanItem("祝星"); list2.add(beanItem6); list2.add(beanItem7); bean2.setContent(list2); mainBeanList= new ArrayList<>(); mainBeanList.add(bean); mainBeanList.add(bean1); mainBeanList.add(bean2); }
初始化控制元件
rl= findViewById(R.id.main_rl); LinearLayoutManager manager= new LinearLayoutManager(this); rl.setLayoutManager(manager); initList(); MainAdapter adapter= new MainAdapter(MainActivity.this, mainBeanList); rl.setAdapter(adapter);
介面回撥設定監聽,根據需求完成相應的操作。
adapter.setOnItemClickListener(new MainAdapter.OnItemClickListener() { @Override public void onItemClick(MainBean.MainBeanItem beanItem) { Toast.makeText(MainActivity.this, beanItem.getTitle(), Toast.LENGTH_SHORT).show(); } });
至此全部完成,附上demo