Android 二级串联菜单的实现过程

在Android开发之中，经常会遇到二级的串联选择菜单，今天自己写了个Demo，实现了一下这种效果，效果图如下所示

菜单的数据结构

实现这种串联菜单，需要自己定义数据结构。我定义了一个SecondLevelDialogData，里面包括一级菜单的名称和二级菜单的数据List，代码如下：

public class SecondLevelDialogData {
//下拉菜单里的数据结构
String firstname;//一级菜单名称
List<SecondLevelDialogData> secondData;//二级菜单数据

public String getFirstname() {
return firstname;
}

public void setFirstname(String firstname) {
this.firstname = firstname;
}

public List<SecondLevelDialogData> getSecondData() {
return secondData;
}

public void setSecondData(List<SecondLevelDialogData> secondData) {
this.secondData = secondData;
}
}

二级菜单实现类

有了对应的数据结构之后，我们需要实现二级串联菜单的实现类，采用PopupWindow来显示菜单，主要是实现二级菜单显示的方法，在此方法中，对数据进行复制，并设置点击事件。代码如下：

public class SecondLevelDialog {

private static final int FIRSTPOPUPWINDOW = 1;//一级菜单
private static final int SECONDPOPUPWINDOW = 2;//二级菜单
private List<SecondLevelDialogData> listData;//一级菜单数据
private int[] selectIds;//菜单选择标识位
private Context context;

private ListView firstListView;//一级菜单
private ListView secondListView;//二级菜单
private PopupWindow popupWindow;//菜单窗口
private PopupWindowAdapter firstPopupWindowAdapter;//一级菜单数据适配器
private PopupWindowAdapter secondPopupWindowAdapter;//二级菜单数据适配器

public SecondLevelDialog(Context context, List<SecondLevelDialogData> firstList) {
this.context = context;
this.listData = listData;
for (int i = 0; i < this.selectIds.length; i++) {
this.selectIds[i] = 0;
}
}

public SecondLevelDialog(Context context, List<SecondLevelDialogData> listData, int[] selectIds) {
this.context = context;
this.listData = listData;
this.selectIds = selectIds;
}

//显示下拉菜单
public int[] show(Button button) {
View view = LayoutInflater.from(context).inflate(R.layout.seconddialoglayout, null);
popupWindow = new PopupWindow(view, ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT,
true);
popupWindow.setOutsideTouchable(true);//点击PopupWindow外部可使PopupWindow消失
popupWindow.showAsDropDown(button);//在Button下显示
firstListView = (ListView) view.findViewById(R.id.id_listview_first);
secondListView = (ListView) view.findViewById(R.id.id_listview_second);
LinearLayout backgroundLinearLayout = (LinearLayout) view.findViewById(R.id.seconddialog_background);
//点击背景，下拉列表菜单消失
backgroundLinearLayout.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
dismissPop();
}
});
//设置一级菜单数据
firstPopupWindowAdapter = new PopupWindowAdapter(context, listData, FIRSTPOPUPWINDOW, selectIds[0]);
firstListView.setAdapter(firstPopupWindowAdapter);
//设置一级菜单点击事件
firstListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(context, "一级菜单" + position + "被点击", Toast.LENGTH_SHORT).show();
//设置二级菜单数据
List<SecondLevelDialogData> secondList = listData.get(position).getSecondData();
secondPopupWindowAdapter = new PopupWindowAdapter(context, secondList, SECONDPOPUPWINDOW,
selectIds[1]);
secondListView.setAdapter(secondPopupWindowAdapter);
secondListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
@Override
public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
Toast.makeText(context, "二级菜单" + position + "被点击", Toast.LENGTH_SHORT).show();
}
});
}
});
return selectIds;
}

//下拉菜单消失
public void dismissPop() {
if (popupWindow != null) {
if (popupWindow.isShowing()) {
popupWindow.dismiss();
}
popupWindow = null;
}
}
}

菜单适配器

在PopupWindow中，采用ListView显示菜单的数据，所以需要自定义ListView的适配器，代码如下：

public class PopupWindowAdapter extends BaseAdapter{

private Context context;
private List<SecondLevelDialogData> list;
private int listPosition;//菜单级数，是第几级菜单
private int selectPosition;//默认选取的位置

public PopupWindowAdapter (Context context, List<SecondLevelDialogData> list, int listPosition, int selectPosition) {
this.context = context;
this.list = list;
this.selectPosition = selectPosition;
}

@Override
public int getCount() {
return list.size();
}

@Override
public Object getItem(int position) {
return list.get(position);
}

@Override
public long getItemId(int position) {
return position;
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder viewHolder;
if (convertView == null) {
viewHolder = new ViewHolder();
convertView = LayoutInflater.from(context).inflate(R.layout.listviewitemlayout, null);
viewHolder.textView = (TextView) convertView.findViewById(R.id.id_listview_item_tv);
} else {
viewHolder = (ViewHolder) convertView.getTag();
}
viewHolder.textView.setText(list.get(position).getFirstname());
//设置选中效果
if (selectPosition == position) {
viewHolder.textView.setTextColor(Color.RED);
} else {
viewHolder.textView.setTextColor(Color.BLACK);
}
convertView.setTag(viewHolder);
return convertView;
}

private class ViewHolder {
TextView textView;
}
}

布局文件

只有一个Button，点击后显示二级菜单

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<Button
android:id="@+id/btn_select"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="选择"/>

</LinearLayout>

主界面代码

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

private Button btn;
private List<SecondLevelDialogData> listData = new ArrayList<>();//下拉菜单数据
private int[] selectIds = {0, 0};//菜单选择标识位，初始位置为0

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

initData();

btn = (Button) findViewById(R.id.btn_select);
btn.setOnClickListener(this);
}

//初始化下拉菜单数据
private void initData() {
for (int i = 0; i < 50; i++) {
SecondLevelDialogData data = new SecondLevelDialogData();
data.setFirstname("一级菜单数据" + i);
List<SecondLevelDialogData> secondListData = new ArrayList<>();
for (int j = 0; j < 50; j++) {
SecondLevelDialogData secondItem = new SecondLevelDialogData();
secondItem.setFirstname("一级菜单" + i + "  二级菜单数据" + j);
secondListData.add(secondItem);
}
data.setSecondData(secondListData);
listData.add(data);
}
}

@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_select:
selectIds = new SecondLevelDialog(MainActivity.this, listData, selectIds).show(btn);
break;
}
}
}

以上，便是实现二级串联菜单的方法。