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;
        }
    }
}

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