You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

iOS底部菜单的官方称谓及iOS/Objective-C实现方法咨询

iOS底部菜单实现指南

嘿,刚好对这个问题熟得很!咱们分两部分来聊,先把官方名称搞清楚,再上代码实锤。

一、iOS底部菜单的官方名称

iOS里常见的底部菜单主要分两种,对应不同的官方组件:

  • 常驻底部的页面切换菜单:官方叫 UITabBarController,这是iOS App里最常用的底部导航组件,比如微信、淘宝底部的页面切换栏就是它。
  • 底部弹出的操作菜单:iOS 8及以后用 UIAlertController(设置样式为 UIAlertControllerStyleActionSheet),iOS 8之前是 UIActionSheet(现在已经被废弃,完全不推荐使用了)。

二、Objective-C实现方法

1. 实现常驻底部的UITabBarController

这种菜单用来切换不同的功能页面,步骤非常清晰:

步骤1:创建子页面ViewController

先准备好几个要切换的页面,比如做两个简单的示例页面:

// 首页页面
UIViewController *homeVC = [[UIViewController alloc] init];
homeVC.view.backgroundColor = [UIColor whiteColor];
homeVC.title = @"首页";
// 设置TabBar的图标和标题
homeVC.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"首页" 
                                                  image:[UIImage imageNamed:@"home_normal"] 
                                          selectedImage:[UIImage imageNamed:@"home_selected"]];

// 我的页面
UIViewController *profileVC = [[UIViewController alloc] init];
profileVC.view.backgroundColor = [UIColor lightGrayColor];
profileVC.title = @"我的";
profileVC.tabBarItem = [[UITabBarItem alloc] initWithTitle:@"我的" 
                                                     image:[UIImage imageNamed:@"profile_normal"] 
                                             selectedImage:[UIImage imageNamed:@"profile_selected"]];

步骤2:组装UITabBarController并设置为根视图

把上面的子页面加到TabBarController里,再设置成App的根视图:

UITabBarController *tabBarVC = [[UITabBarController alloc] init];
// 添加子页面数组
tabBarVC.viewControllers = @[homeVC, profileVC];

// 要是在AppDelegate里配置,直接设置根视图就行
self.window.rootViewController = tabBarVC;
[self.window makeKeyAndVisible];

自定义样式(可选)

想改TabBar的外观?比如调整颜色、文字样式:

// 修改TabBar背景色
tabBarVC.tabBar.barTintColor = [UIColor whiteColor];
// 修改选中项的图标/文字颜色
tabBarVC.tabBar.tintColor = [UIColor systemBlueColor];
// 修改未选中项的文字颜色
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor grayColor]} 
                                          forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor systemBlueColor]} 
                                          forState:UIControlStateSelected];

2. 实现底部弹出的操作菜单(UIAlertController)

这种是用户点击按钮后从底部弹出来的操作菜单,比如分享、删除这类场景:

// 创建ActionSheet样式的AlertController
UIAlertController *actionSheet = [UIAlertController alertControllerWithTitle:@"请选择操作" 
                                                                     message:nil 
                                                              preferredStyle:UIAlertControllerStyleActionSheet];

// 添加操作选项
UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"取消" 
                                                       style:UIAlertActionStyleCancel 
                                                     handler:^(UIAlertAction * _Nonnull action) {
                                                         // 取消按钮的逻辑
                                                         NSLog(@"点击了取消");
                                                     }];

UIAlertAction *shareAction = [UIAlertAction actionWithTitle:@"分享" 
                                                      style:UIAlertActionStyleDefault 
                                                    handler:^(UIAlertAction * _Nonnull action) {
                                                        // 分享按钮的逻辑
                                                        NSLog(@"点击了分享");
                                                    }];

UIAlertAction *deleteAction = [UIAlertAction actionWithTitle:@"删除" 
                                                       style:UIAlertActionStyleDestructive 
                                                     handler:^(UIAlertAction * _Nonnull action) {
                                                         // 删除按钮的逻辑(默认红色文字)
                                                         NSLog(@"点击了删除");
                                                     }];

// 把操作添加到AlertController
[actionSheet addAction:cancelAction];
[actionSheet addAction:shareAction];
[actionSheet addAction:deleteAction];

// 弹出菜单
[self presentViewController:actionSheet animated:YES completion:nil];

⚠️ 注意:在iPad上使用ActionSheet,必须设置popoverPresentationController的触发源,否则会崩溃:

// 假设是按钮触发,sender就是你的按钮对象
actionSheet.popoverPresentationController.sourceView = sender;
actionSheet.popoverPresentationController.sourceRect = sender.frame;

内容的提问来源于stack exchange,提问作者Laurent Crivello

火山引擎 最新活动