navigation右侧添加多个按钮(三种方法)

本文介绍了三种在iOS应用中为工具栏添加按钮的方法。方法一使用`UIToolbar`并设置多个按钮;方法二直接通过`UIBarButtonItem`设置右侧按钮项;方法三自定义按钮样式并通过`UIBarButtonItem`添加到导航栏。


方法一:

    UIToolbar* tools = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 100, 40)];
    [tools setBarTintColor:[UIColor whiteColor]];
    NSMutableArray* buttons = [[NSMutableArray alloc] initWithCapacity:2];
    UIBarButtonItem *saveButton = [[UIBarButtonItem alloc]initWithTitle:@"保存" style:UITabBarSystemItemContacts target:self action:@selector(save:)];
    UIBarButtonItem *pulishButton = [[UIBarButtonItem alloc]initWithTitle:@"发布" style:UITabBarSystemItemContacts target:self action:@selector(pulish:)];
    [pulishButton setTintColor:kMainColor];
    [buttons addObject:saveButton];
    [buttons addObject:pulishButton];
    [tools setItems:buttons animated:NO];
    UIBarButtonItem *myBtn = [[UIBarButtonItem alloc] initWithCustomView:tools];
    self.navigationItem.rightBarButtonItem = myBtn;


方法二:

    UIBarButtonItem *pulishButton = [[UIBarButtonItem alloc]initWithTitle:@"发布" style:UITabBarSystemItemContacts target:self action:@selector(pulish:)];
    [pulishButton setTintColor:kMainColor];
    UIBarButtonItem *saveButton = [[UIBarButtonItem alloc]initWithTitle:@"保存" style:UITabBarSystemItemContacts target:self action:@selector(save:)];
    [self.navigationItem setRightBarButtonItems:[NSArray arrayWithObjects: pulishButton,saveButton,nil]];


方法三:

    UIButton *pulishButton=[UIButton buttonWithType:(UIButtonTypeCustom)];
    [pulishButton setTitle:@"发布" forState:(UIControlStateNormal)];
    [pulishButton setTitleColor:kWenZiColor forState:(UIControlStateNormal)];
    pulishButton.layer.masksToBounds=YES;
    pulishButton.layer.cornerRadius=3;
    pulishButton.titleLabel.font=[UIFont systemFontOfSize:15];
    pulishButton.backgroundColor=[UIColor cyanColor];
    [pulishButton addTarget:self action:@selector(pulish:) forControlEvents:UIControlEventTouchUpInside];
    
    
    UIButton *saveButton=[UIButton buttonWithType:(UIButtonTypeCustom)];
    [saveButton setTitle:@"保存" forState:(UIControlStateNormal)];
    [saveButton setTitleColor:[UIColor whiteColor] forState:(UIControlStateNormal)];
    saveButton.layer.masksToBounds=YES;
    saveButton.layer.cornerRadius=3;
    saveButton.titleLabel.font=[UIFont systemFontOfSize:15];
    saveButton.backgroundColor=kMainColor;
    [saveButton addTarget:self action:@selector(save:) forControlEvents:UIControlEventTouchUpInside];
    
    pulishButton.frame = CGRectMake(0, 0, 50, 30);
    saveButton.frame=CGRectMake(0, 0, 50, 30);
    
    UIBarButtonItem *pulish = [[UIBarButtonItem alloc] initWithCustomView:pulishButton];
    UIBarButtonItem *save = [[UIBarButtonItem alloc] initWithCustomView:saveButton];
    
    [self.navigationItem setRightBarButtonItems:[NSArray arrayWithObjects: pulish, save,nil]];

个人认为 方法三最好= = 三种方法供大家参考 如果有更好的 欢迎补充与分享哦= = 
### UniApp 自定义 Navigation Bar 右侧按钮 在 UniApp 中,可以通过配置 `navigationStyle.json` 文件来自定义页面的顶部导航栏。对于更复杂的定制需求,比如增加右侧按钮,则通常通过自定义组件来实现。 #### 使用自定义组件方法 为了创建一个带有右侧按钮的自定义导航栏,在项目中引入并注册自定义组件是一个常见做法[^1]: ```json { "usingComponents": { "headerNavbar": "/components/headerNavbar/headerNavbar" } } ``` 此 JSON 片段展示了如何声明使用名为 `headerNavbar` 的自定义组件作为头部导航条的一部分。该组件可以被设计成包含任意数量的操作按钮或其他交互元素。 接下来是在页面布局文件(如 `.vue` 文件)中的具体应用方式: ```html <template> <view class="content"> <!-- 导入并使用 headerNavbar 组件 --> <header-navbar></header-navbar> <!-- 页面主体内容 --> <text>这里是页面的主要内容</text> </view> </template> <script> import HeaderNavbar from '@/components/headerNavbar/headerNavbar.vue'; export default { components: { 'header-navbar': HeaderNavbar, }, }; </script> ``` 上述代码片段展示了一个简单的 Vue 单文件组件结构,其中包含了导入和使用的逻辑。注意这里假设已经存在 `/components/headerNavbar/headerNavbar.vue` 这样的路径下的相应组件文件。 关于具体的 `headerNavbar` 实现细节,可以根据实际业务场景灵活调整其内部 HTML 结构以及绑定事件处理函数等。例如,如果想要添加两个图标形式的按钮到右边位置,可以在对应的模板部分编写如下类似的标记语言: ```html <!-- /components/headerNavbar/headerNavbar.vue --> <template> <view class="navbar-container"> <view class="left-area">返回</view> <view class="center-title">{{ title }}</view> <view class="right-buttons"> <button @click="handleClick('search')">🔍</button> <button @click="handleClick('more')">...</button> </view> </view> </template> <script> export default { props: ['title'], methods: { handleClick(action) { console.log(`Button clicked with action ${action}`); // 处理点击后的动作... } } }; </script> <style scoped> .navbar-container { display: flex; justify-content: space-between; align-items: center; } .left-area, .center-title, .right-buttons { padding: 0 16px; } .right-buttons button { margin-left: 8px; } </style> ``` 这段代码实现了具有左侧文字链接、中间标题区及右侧双图标的可操作区域的功能性导航栏。当用户触发这些按钮时会调用相应的 JavaScript 方法来进行进一步的动作响应。 #### 动态修改 TabBar 和其他高级特性 除了静态配置外,还可以借助 API 来动态改变 tab bar 或者执行更多复杂行为,如显示/隐藏 badge 红点提示等[^3]。不过这部分功能主要适用于底部标签页而非顶部导航栏;因此在此不再赘述。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值