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