Android 应用开发中 Material Design 设计风格的展开式菜单布局

Material Design 是 Google 推出的指导设计风格，旨在为 Android 应用和其他 Google 产品提供一致且现代的外观和感觉。其中，展开式菜单是 Material Design 设计风格的常见组件之一，本文将详细介绍在 Android 应用开发中如何实现 Material Design 风格的展开式菜单布局。

布局实现

展开式菜单（Expandable Menu）是一个可以展开和收起的列表，通常由两部分组成：菜单标题（可点击以展开子菜单）和子菜单列表（通过菜单标题展开或收起）。

Step 1：添加依赖项

在 build.gradle 文件中添加以下依赖项：

implementation 'com.google.android.material:material:1.4.0'

Step 2：准备布局文件

在布局文件中使用 ExpandableListView 组件来实现展开式菜单，示例代码如下：

// javascriptcn.com 代码示例
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ExpandableListView
        android:id="@+id/expandable_menu_list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Step 3：准备数据

为了在菜单中显示数据，我们需要准备一个与之匹配的数据结构。

对于展开式菜单，数据结构通常采用这种形式：

// javascriptcn.com 代码示例
List<MenuGroup>
├── MenuGroup
│   ├── groupTitle
│   └── List<MenuChild>
│       ├── MenuChild
│       │   ├── childTitle
│       │   └── childIcon
│       └── MenuChild
│           ├── childTitle
│           └── childIcon
├── MenuGroup
│   ├── groupTitle
│   └── List<MenuChild>
│       ├── MenuChild
│       │   ├── childTitle
│       │   └── childIcon
│       └── MenuChild
│           ├── childTitle
│           └── childIcon

示例代码如下：

// javascriptcn.com 代码示例
public class MenuGroup {
    private String groupTitle;
    private List<MenuChild> groupChilds;

    // 构造函数
    public MenuGroup(String title, List<MenuChild> childs) {
        this.groupTitle = title;
        this.groupChilds = childs;
    }

    // Getters 和 Setters
    // ...
}

public class MenuChild {
    private String childTitle;
    private Drawable childIcon;

    // 构造函数
    public MenuChild(String title, Drawable icon) {
        this.childTitle = title;
        this.childIcon = icon;
    }

    // Getters 和 Setters
    // ...
}

Step 4：创建适配器

适配器是用于将数据绑定到展开式菜单视图的机制。

我们需要一个适配器来将数据结构绑定到展开式菜单的视图，示例代码如下：

// javascriptcn.com 代码示例
public class ExpandableMenuAdapter extends BaseExpandableListAdapter {
    
    private List<MenuGroup> menuGroups;
    private Context context;

    // 构造函数
    public ExpandableMenuAdapter(Context context, List<MenuGroup> groups) {
        this.context = context;
        this.menuGroups = groups;
    }

    @Override
    public int getGroupCount() {
        return menuGroups.size();
    }

    @Override
    public int getChildrenCount(int groupPosition) {
        return menuGroups.get(groupPosition).getGroupChilds.size();
    }

    @Override
    public MenuGroup getGroup(int groupPosition) {
        return menuGroups.get(groupPosition);
    }

    @Override
    public MenuChild getChild(int groupPosition, int childPosition) {
        return menuGroups.get(groupPosition).getGroupChilds.get(childPosition);
    }

    @Override
    public long getGroupId(int groupPosition) {
        return groupPosition;
    }

    @Override
    public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

    @Override
    public boolean hasStableIds() {
        return true;
    }

    @Override
    public View getGroupView(int groupPosition, boolean isExpanded, View convertView, ViewGroup parent) {

        final ViewHolderGroup viewHolderGroup;

        if (convertView == null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.item_menu_group, parent, false);
            viewHolderGroup = new ViewHolderGroup();
            viewHolderGroup.groupTitle = convertView.findViewById(R.id.item_menu_group_title);
            convertView.setTag(viewHolderGroup);
        } else {
            viewHolderGroup = (ViewHolderGroup) convertView.getTag();
        }

        MenuGroup group = getGroup(groupPosition);
        viewHolderGroup.groupTitle.setText(group.getGroupTitle());

        return convertView;
    }

    @Override
    public View getChildView(int groupPosition, int childPosition, boolean isLastChild, View convertView, ViewGroup parent) {

        final ViewHolderChild viewHolderChild;

        if (convertView == null) {
            convertView = LayoutInflater.from(context).inflate(R.layout.item_menu_child, parent, false);
            viewHolderChild = new ViewHolderChild();
            viewHolderChild.childTitle = convertView.findViewById(R.id.item_menu_child_title);
            viewHolderChild.childIcon = convertView.findViewById(R.id.item_menu_child_icon);
            convertView.setTag(viewHolderChild);
        } else {
            viewHolderChild = (ViewHolderChild) convertView.getTag();
        }

        MenuChild child = getChild(groupPosition, childPosition);
        viewHolderChild.childTitle.setText(child.getChildTitle());
        viewHolderChild.childIcon.setImageDrawable(child.getChildIcon());

        return convertView;
    }

    @Override
    public boolean isChildSelectable(int groupPosition, int childPosition) {
        return true;
    }

    // 优化内部类 ViewHolderGroup 和 ViewHolderChild
    static class ViewHolderGroup {
        TextView groupTitle;
    }

    static class ViewHolderChild {
        TextView childTitle;
        ImageView childIcon;
    }
}

Step 5：设置适配器

在 Activity 或 Fragment 中设置适配器：

List<MenuGroup> data = new ArrayList<>();

// TODO: 添加数据

ExpandableListView expandableMenuList = findViewById(R.id.expandable_menu_list);
ExpandableMenuAdapter expandableMenuAdapter = new ExpandableMenuAdapter(getContext(), data);
expandableMenuList.setAdapter(expandableMenuAdapter);

至此，我们已经完成了 Material Design 风格的展开式菜单布局的实现。

总结

本文介绍了在 Android 应用开发中如何实现 Material Design 风格的展开式菜单布局，主要包括布局实现和适配器实现，同时提供了示例代码以便读者参考。展开式菜单是 Material Design 设计风格的常见组件之一，它能提供更良好的用户体验，同时也是 Android 应用开发中常用的 UI 组件之一。希望本文能对读者有所启发和帮助。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652f8d407d4982a6eb0b5130