征服底部弹出菜单，玩转App设计！

Android

2023-11-18 17:04:13

在App设计中，底部弹出菜单提供了一种高效、直观的交互方式，使得用户可以轻松访问常用功能而不必离开当前页面。这类菜单通常用于设置选项、导航和快速操作等功能。

设计思路

简洁性：底部弹出菜单应当保持简单明了，避免过多复杂元素。
一致性：与整体设计风格保持一致，确保用户体验的连续性和熟悉感。
可发现性：用户需要能够轻松识别和访问该功能。通常采用图标加文本的形式增加辨识度。

实现底部弹出菜单的方法

使用React Native实现

对于React Native开发者而言，利用react-native-popup-menu库是创建底部弹出菜单的一种有效方法。

安装依赖

npm install react-native-popup-menu --save

示例代码

import { Menu, MenuItem } from 'react-native-popup-menu';

export default function App() {
  return (
    <View style={{ flex: 1 }}>
      <Menu>
        <MenuTrigger text="底部弹出菜单" />
        <MenuOptions>
          <MenuItem disabled={true} onPress={() => alert('点击了第一个选项')}>
            第一个选项
          </MenuItem>
          <MenuDivider />
          <MenuItem onPress={() => alert('点击了第二个选项')}>第二个选项</MenuItem>
        </MenuOptions>
      </Menu>
    </View>
  );
}

使用Swift实现

在iOS开发中，可以利用UIPopoverPresentationController来创建底部弹出菜单。

示例代码

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let menuButton = UIButton(type: .system)
        menuButton.setTitle("点击我", for: .normal)
        menuButton.addTarget(self, action: #selector(showMenu), for: .touchUpInside)
        self.view.addSubview(menuButton)
    }
    
    @objc func showMenu(sender: UIButton) {
        let viewController = UIViewController()
        viewController.preferredContentSize = CGSize(width: 200, height: 150)
        
        let menuPopoverController = UIPopoverPresentationController(presentedViewController: viewController, presentingViewController: self)
        menuPopoverController.sourceView = sender
        menuPopoverController.permittedArrowDirections = .any
        
        present(viewController, animated: true, completion: nil)
    }
}