IOS:标签栏与导航栏

1、在 UIKit 中UITabbar 代表了标签栏,而 UITabBarController 对其进行了封装,令多个不同的视图管理与切换变的更加轻松。构建一个标签栏控制器,首先要为每个按钮准备一个单独的页。每一页都应被创建为UIViewController对象。


  


   首先创建一个单视图工程,然后在建两个新类,他们都继承自UIViewController,分别取名为firstViewController,secondViewController。

  

   在AppDelegate.h中代码如下:

import <UIKit/UIKit.h>


#import "firstViewController.h"


#import "secondViewController.h"


@class ViewController;


@interface AppDelegate :UIResponder <UIApplicationDelegate>


@property (strong,nonatomic)UIWindow *window;


@property (strong,nonatomic)ViewController *viewController;


@property(retain,nonatomic)firstViewController *pFirst;


@property(retain,nonatomic)secondViewController *pSecond;


@end

  

   在AppDelegate.m中的- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions方法中添加如下代码:
 

//创建初始化视图控制器

    firstViewController *pfirstVC = [[firstViewControlleralloc]initWithNibName:nilbundle:nil];

    

    secondViewController *psecondVC = [[secondViewControlleralloc]initWithNibName:nilbundle:nil];

    

   self.pFirst = pfirstVC;

    

   self.pSecond = psecondVC;

    

    [pfirstVCrelease];

    

    [psecondVCrelease];

    //创建UITabBarController对象

    UITabBarController *pBar = [[UITabBarControlleralloc]init];

    //创建数组来存放多个试图控制器对象

   NSArray *mArr = [NSArrayarrayWithObjects:self.pFirst,self.pSecond,nil];

    //UITabBarController对象的viewControllers设置为数组里的元素

    pBar.viewControllers = mArr;

    //将当前窗口的根视图控制器设为pBar

    self.window.rootViewController = pBar;

    

   
    然后,我们可以在两个两类中分别对标签栏进行自定义设置,如在firstViewController.m中的

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil方法中添加如下代码:

  

//设置标签栏的格式和tag

        self.tabBarItem = [[UITabBarItemalloc]initWithTabBarSystemItem:UITabBarSystemItemBookmarkstag:10];

        //设置视图背景色为红色

        self.view.backgroundColor = [UIColorredColor];

     

    同样,在secondViewController.m中的-(id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil方法中添加如下代码:

 //设置标签栏的标题和背景图片(名字为“10.png”)以及tag

        self.tabBarItem = [[UITabBarItemalloc]initWithTitle:@"设置"image:[UIImageimageNamed:@"10.png"] tag:20];

        //设置视图背景色为黄色

        self.view.backgroundColor = [UIColoryellowColor];


  最后,运行结果:




  点击“设置”按钮,视图会转换,
   
  
      
  
  2、导航栏

   同样创建单视图工程,在AppDelegate.m中的- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions方法中添加如下代码:

  

 //创建初始化导航控制器

    UINavigationController *pNavigation = [[UINavigationControlleralloc]initWithRootViewController:self.viewController];

    //将导航控制器对象设为窗口的根视图控制器

   self.window.rootViewController = pNavigation;

   //释放

    [pNavigationrelease];

    

     然后,我们可以在ViewController.m中的- (void)viewDidLoad添加如下代码
   

//设置导航栏标题

    self.navigationItem.title =@"导航栏";

    //设置导航栏上的按钮

    UIBarButtonItem *pBtn = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemDonetarget:selfaction:@selector(buttonAction:)];

    //将按钮添加到导航栏右边

    self.navigationItem.rightBarButtonItem = pBtn;

    
   和按钮关联的方法:
   

//按钮关联的动作

- (void)buttonAction:(id)sender

{

    UIAlertView *pAlert = [[UIAlertViewalloc]initWithTitle:@"提示"message:@"You can breath easy!"delegate:selfcancelButtonTitle:@"OK"otherButtonTitles:nil];

    

    [pAlertshow];

}


      运行结果:


  

       点击“Done”按钮,结果如下:

  
       点击"OK"回返会上一个界面。
  
  3、要将导航栏和标签栏结合起来只需要在我们创建标签栏的代码上添加并改动几句代码,如下
   

UINavigationController *pNavi1 = [[UINavigationControlleralloc]initWithRootViewController:self.pFirst];

    

    UINavigationController *pNavi2 = [[UINavigationControlleralloc]initWithRootViewController:self.pSecond];

    //创建UITabBarController对象

    UITabBarController *pBar = [[UITabBarControlleralloc]init];

    //创建数组来存放多个试图控制器对象

    NSArray *mArr = [NSArrayarrayWithObjects:pNavi1,pNavi2,nil];

    //UITabBarController对象的viewControllers设置为数组里的元素

    pBar.viewControllers = mArr;

    //将当前窗口的根视图控制器设为pBar

    self.window.rootViewController = pBar;


  运行结果

   


  可以看到,有导航栏生成,然后我们可以分别在每个类中对的导航类进行设置,即可。



 

   另外,我们经常可以看到在标签栏上有一个包含数字的小红圈,如图:

   

  这是tabBarItem的badValue属性,只需要在初始化方法添加一句话即可实现:

    

        self.tabBarItem.badgeValue =@"8";





  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp是一个基于Vue.js的跨平台框架,它可以帮助开发者快速构建原生应用,包括iOS、Android和Web等平台。在UniApp中,动态切换标签(Tab Bar)可以通过` uni-tabbar `组件来实现,这个组件提供了一种管理和切换不同页面的功能。 以下是实现动态切换标签的基本步骤: 1. **引入组件**:在项目中安装并引入` uni-tabbar `组件,确保已经安装了` @dcloudio/uni-app `依赖。 ```bash npm install @dcloudio/uni-app ``` 2. **配置` uni-tabbar `**:在对应的页面或应用的` app.json `文件中,添加` tabBar `配置,定义每个标签对应的内容、路径和标题。 ```json { "tabBar": { "color": "#fff", "selectedColor": "#f00", "borderStyle": "#dcdcdc", "list": [ { "pagePath": "pages/index/index", // 需切换的页面路径 "text": "首页", // 显示的文字 "iconPath": "path/to/home-icon.png", // 图标路径 "selectedIconPath": "path/to/home-selected-icon.png", // 选中图标路径 "id": "home" // 可选的唯一标识,用于动态设置 }, ... ] } } ``` 3. **动态切换**:在需要改变标签的状态的地方(如点击按钮或导航事件),你可以使用` uni.switchTab `API来切换到指定的页面或更新标签状态。 ```javascript // 示例:切换到ID为'news'的标签页 uni.switchTab({ url: 'pages/news/news', animated: true, // 是否动画切换,默认为true id: 'news' // 或者使用自定义的ID }); ``` 4. **响应事件**:为了实时响应用户的操作,可以在` App.vue `或其他全局组件中监听` tabBar `的事件,例如` active-item-changed `。 ```javascript // App.vue 或其他全局组件 export default { onReady() { uni.on('tabBar:active-item-changed', (e) => { console.log('当前激活的标签:', e.detail); }); }, ... } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值