Objective-C中的导航栏与标签栏自定义

导航栏自定义

导航栏基础认知

在Objective - C开发的iOS应用中，导航栏（UINavigationBar）是一种极为常见的用户界面元素。它通常位于屏幕顶部，用于管理视图控制器的层级关系，并提供导航功能。默认情况下，导航栏包含一个标题和一些用于导航的按钮，如返回按钮、更多操作按钮等。

导航栏由UINavigationBar类来管理，它是UIView的子类。在一个典型的基于导航控制器（UINavigationController）的应用中，导航栏会自动根据栈中视图控制器的变化而更新显示。例如，当你将一个新的视图控制器压入栈时，导航栏会显示新视图控制器的标题，并且会自动添加一个返回按钮，以便用户可以回到上一个视图控制器。

自定义导航栏外观

1. 背景颜色与背景图片
   • 设置背景颜色： 要设置导航栏的背景颜色，可以使用barTintColor属性。以下是一个简单的示例代码，假设在视图控制器的viewDidLoad方法中进行设置：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // 获取导航栏
    UINavigationBar *navigationBar = self.navigationController.navigationBar;
    // 设置背景颜色为蓝色
    navigationBar.barTintColor = [UIColor blueColor];
}

@end

• 设置背景图片： 若想使用自定义的图片作为导航栏的背景，可以使用setBackgroundImage:forBarMetrics:方法。例如，假设你有一个名为navBackground.png的图片，代码如下：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UINavigationBar *navigationBar = self.navigationController.navigationBar;
    UIImage *backgroundImage = [UIImage imageNamed:@"navBackground.png"];
    [navigationBar setBackgroundImage:backgroundImage forBarMetrics:UIBarMetricsDefault];
}

@end

这里的UIBarMetricsDefault表示默认的屏幕尺寸和方向。如果应用支持不同的屏幕尺寸（如iPhone和iPad），可以根据不同的UIBarMetrics值来设置不同的背景图片。

2. 标题样式 导航栏标题的样式可以通过titleTextAttributes属性进行自定义。例如，你可以改变标题的字体、颜色、阴影等。以下是一个改变标题字体和颜色的示例：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UINavigationBar *navigationBar = self.navigationController.navigationBar;
    NSMutableDictionary *attributes = [NSMutableDictionary dictionary];
    attributes[NSFontAttributeName] = [UIFont boldSystemFontOfSize:20];
    attributes[NSForegroundColorAttributeName] = [UIColor whiteColor];
    navigationBar.titleTextAttributes = attributes;
}

@end

在上述代码中，我们创建了一个NSMutableDictionary来存储标题的属性。通过设置NSFontAttributeName来指定字体为加粗且大小为20的系统字体，通过设置NSForegroundColorAttributeName来指定标题颜色为白色。

3. 按钮样式 导航栏上的按钮（如返回按钮、自定义的右按钮等）也可以进行样式自定义。
   • 返回按钮样式： 返回按钮的外观可以通过设置backIndicatorImage和backIndicatorTransitionMaskImage来改变其箭头样式，通过tintColor来改变其颜色。例如：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UINavigationBar *navigationBar = self.navigationController.navigationBar;
    UIImage *backIndicatorImage = [UIImage imageNamed:@"customBackArrow.png"];
    [navigationBar setBackIndicatorImage:backIndicatorImage];
    [navigationBar setBackIndicatorTransitionMaskImage:backIndicatorImage];
    navigationBar.tintColor = [UIColor redColor];
}

@end

这里假设你有一个名为customBackArrow.png的自定义箭头图片。backIndicatorTransitionMaskImage用于设置箭头的过渡遮罩，一般设置为与backIndicatorImage相同的图片。tintColor设置了返回按钮的颜色为红色。

• 自定义右按钮样式： 要添加自定义的右按钮并设置其样式，可以在视图控制器中创建一个UIBarButtonItem，并设置其属性。例如：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UIBarButtonItem *rightButton = [[UIBarButtonItem alloc] initWithTitle:@"更多" style:UIBarButtonItemStylePlain target:self action:@selector(showMoreOptions)];
    rightButton.tintColor = [UIColor greenColor];
    self.navigationItem.rightBarButtonItem = rightButton;
}

- (void)showMoreOptions {
    NSLog(@"显示更多选项");
}

@end

在上述代码中，我们创建了一个标题为“更多”的UIBarButtonItem，样式为UIBarButtonItemStylePlain。通过设置tintColor将按钮颜色设置为绿色，并将其添加到视图控制器的navigationItem的rightBarButtonItem中。当用户点击该按钮时，会调用showMoreOptions方法。

导航栏的行为自定义

1. 隐藏与显示导航栏 有时候，根据应用的需求，可能需要隐藏或显示导航栏。例如，在某些特定的视图控制器中，为了提供沉浸式的用户体验，可能需要隐藏导航栏。在视图控制器中，可以通过设置navigationController的navigationBarHidden属性来实现。
   • 隐藏导航栏：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationController.navigationBarHidden = YES;
}

@end

• 显示导航栏： 如果在后续需要重新显示导航栏，可以在合适的时机（如视图即将出现时）设置navigationBarHidden为NO。

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.navigationController.navigationBarHidden = NO;
}

@end

2. 自定义导航栏的过渡动画 在iOS开发中，默认的导航栏过渡动画是从右到左（压入视图控制器）或从左到右（弹出视图控制器）的滑动动画。然而，有时候可能需要自定义这种过渡动画。这可以通过自定义视图控制器的过渡代理来实现。 首先，创建一个遵循UIViewControllerAnimatedTransitioning协议的类，用于定义过渡动画的具体实现。例如：

#import <UIKit/UIKit.h>

@interface CustomNavigationAnimator : NSObject <UIViewControllerAnimatedTransitioning>

@end

@implementation CustomNavigationAnimator

- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
    return 0.5;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
    UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *containerView = [transitionContext containerView];
    CGRect toFrame = [transitionContext finalFrameForViewController:toVC];
    toVC.view.frame = CGRectOffset(toFrame, containerView.bounds.size.width, 0);
    [containerView addSubview:toVC.view];
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        fromVC.view.frame = CGRectOffset(fromVC.view.frame, -containerView.bounds.size.width, 0);
        toVC.view.frame = toFrame;
    } completion:^(BOOL finished) {
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    }];
}

@end

在上述代码中，transitionDuration方法返回过渡动画的时长，animateTransition方法定义了具体的动画逻辑。这里实现了一个从右向左滑入新视图控制器，同时从左向右滑出当前视图控制器的动画。

然后，在视图控制器中，设置导航栏的过渡代理。例如：

#import "ViewController.h"
#import "CustomNavigationAnimator.h"

@interface ViewController () <UINavigationControllerDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.navigationController.delegate = self;
}

- (id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController animationControllerForOperation:(UINavigationControllerOperation)operation fromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
    if (operation == UINavigationControllerOperationPush) {
        return [[CustomNavigationAnimator alloc] init];
    }
    return nil;
}

@end

在上述代码中，视图控制器遵循UINavigationControllerDelegate协议，并实现了navigationController:animationControllerForOperation:fromViewController:toViewController:方法。当导航控制器执行UINavigationControllerOperationPush操作（即压入新视图控制器）时，返回我们自定义的CustomNavigationAnimator实例，从而实现自定义的过渡动画。

标签栏自定义

标签栏基础认知

标签栏（UITabBar）也是iOS应用中常见的用户界面元素，通常位于屏幕底部，用于在不同的功能模块之间快速切换。它由UITabBar类管理，也是UIView的子类。一个标签栏通常包含多个标签栏项（UITabBarItem），每个标签栏项对应一个视图控制器。

UITabBarController用于管理标签栏以及与之关联的多个视图控制器。当用户点击标签栏上的某个标签栏项时，对应的视图控制器的视图会显示在窗口中。

自定义标签栏外观

1. 背景颜色与背景图片
   • 设置背景颜色： 与导航栏类似，标签栏的背景颜色可以通过barTintColor属性来设置。例如，在应用的AppDelegate中设置标签栏背景颜色为黄色：

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UITabBar *tabBar = tabBarController.tabBar;
    tabBar.barTintColor = [UIColor yellowColor];
    return YES;
}

@end

• 设置背景图片： 使用setBackgroundImage:方法可以设置标签栏的背景图片。假设你有一个名为tabBarBackground.png的图片，代码如下：

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UITabBar *tabBar = tabBarController.tabBar;
    UIImage *backgroundImage = [UIImage imageNamed:@"tabBarBackground.png"];
    [tabBar setBackgroundImage:backgroundImage];
    return YES;
}

@end

2. 标签栏项的外观 标签栏项的外观可以通过设置其title、image和selectedImage等属性来进行自定义。例如，假设有两个视图控制器FirstViewController和SecondViewController，为它们对应的标签栏项设置不同的外观：

#import "FirstViewController.h"
#import "SecondViewController.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    FirstViewController *firstVC = [[FirstViewController alloc] init];
    firstVC.tabBarItem.title = @"首页";
    firstVC.tabBarItem.image = [UIImage imageNamed:@"homeNormal.png"];
    firstVC.tabBarItem.selectedImage = [UIImage imageNamed:@"homeSelected.png"];
    
    SecondViewController *secondVC = [[SecondViewController alloc] init];
    secondVC.tabBarItem.title = @"设置";
    secondVC.tabBarItem.image = [UIImage imageNamed:@"settingsNormal.png"];
    secondVC.tabBarItem.selectedImage = [UIImage imageNamed:@"settingsSelected.png"];
    
    UITabBarController *tabBarController = [[UITabBarController alloc] init];
    tabBarController.viewControllers = @[firstVC, secondVC];
    self.window.rootViewController = tabBarController;
    return YES;
}

@end

在上述代码中，为每个视图控制器的tabBarItem设置了标题、正常状态下的图片和选中状态下的图片。这样，当用户在标签栏上切换时，会显示相应的图片和标题。

3. 标签栏文字样式 标签栏项上文字的样式可以通过setTitleTextAttributes:forState:方法来设置。例如，改变标签栏项文字的颜色和字体：

#import "AppDelegate.h"

@interface AppDelegate ()

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
    UITabBar *tabBar = tabBarController.tabBar;
    NSMutableDictionary *normalAttributes = [NSMutableDictionary dictionary];
    normalAttributes[NSFontAttributeName] = [UIFont systemFontOfSize:12];
    normalAttributes[NSForegroundColorAttributeName] = [UIColor grayColor];
    [tabBarItem setTitleTextAttributes:normalAttributes forState:UIControlStateNormal];
    
    NSMutableDictionary *selectedAttributes = [NSMutableDictionary dictionary];
    selectedAttributes[NSFontAttributeName] = [UIFont boldSystemFontOfSize:12];
    selectedAttributes[NSForegroundColorAttributeName] = [UIColor blueColor];
    [tabBarItem setTitleTextAttributes:selectedAttributes forState:UIControlStateSelected];
    
    return YES;
}

@end

这里分别设置了标签栏项在正常状态和选中状态下文字的字体和颜色。

标签栏的行为自定义

1. 隐藏与显示标签栏 与导航栏类似，标签栏也可以根据需求进行隐藏和显示。在视图控制器中，可以通过设置tabBarController的tabBarHidden属性来实现。
   • 隐藏标签栏：

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tabBarController.tabBarHidden = YES;
}

@end

• 显示标签栏： 如果需要重新显示标签栏，可以在合适的时机设置tabBarHidden为NO。

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    self.tabBarController.tabBarHidden = NO;
}

@end

2. 自定义标签栏切换动画 默认情况下，标签栏切换视图控制器时的动画是简单的淡入淡出效果。如果需要自定义这种切换动画，可以通过创建一个自定义的过渡代理来实现。 首先，创建一个遵循UIViewControllerAnimatedTransitioning协议的类，用于定义过渡动画的具体实现。例如：

#import <UIKit/UIKit.h>

@interface CustomTabBarAnimator : NSObject <UIViewControllerAnimatedTransitioning>

@end

@implementation CustomTabBarAnimator

- (NSTimeInterval)transitionDuration:(id<UIViewControllerContextTransitioning>)transitionContext {
    return 0.3;
}

- (void)animateTransition:(id<UIViewControllerContextTransitioning>)transitionContext {
    UIViewController *fromVC = [transitionContext viewControllerForKey:UITransitionContextFromViewControllerKey];
    UIViewController *toVC = [transitionContext viewControllerForKey:UITransitionContextToViewControllerKey];
    UIView *containerView = [transitionContext containerView];
    [containerView addSubview:toVC.view];
    toVC.view.alpha = 0;
    [UIView animateWithDuration:[self transitionDuration:transitionContext] animations:^{
        fromVC.view.alpha = 0;
        toVC.view.alpha = 1;
    } completion:^(BOOL finished) {
        [fromVC.view removeFromSuperview];
        [transitionContext completeTransition:![transitionContext transitionWasCancelled]];
    }];
}

@end

在上述代码中，transitionDuration方法返回过渡动画的时长，animateTransition方法定义了从当前视图控制器淡入到目标视图控制器的动画逻辑。

然后，在视图控制器中，设置标签栏控制器的过渡代理。例如：

#import "ViewController.h"
#import "CustomTabBarAnimator.h"

@interface ViewController () <UITabBarControllerDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tabBarController.delegate = self;
}

- (id<UIViewControllerAnimatedTransitioning>)tabBarController:(UITabBarController *)tabBarController animationControllerForTransitionFromViewController:(UIViewController *)fromVC toViewController:(UIViewController *)toVC {
    return [[CustomTabBarAnimator alloc] init];
}

@end

在上述代码中，视图控制器遵循UITabBarControllerDelegate协议，并实现了tabBarController:animationControllerForTransitionFromViewController:toViewController:方法，返回自定义的CustomTabBarAnimator实例，从而实现自定义的标签栏切换动画。

3. 处理标签栏点击事件 有时候，除了默认的视图控制器切换，还可能需要在用户点击标签栏项时执行一些额外的逻辑。可以通过实现UITabBarControllerDelegate协议中的tabBarController:didSelectViewController:方法来实现。例如：

#import "ViewController.h"

@interface ViewController () <UITabBarControllerDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.tabBarController.delegate = self;
}

- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController {
    NSLog(@"用户点击了标签栏项，对应的视图控制器为：%@", viewController);
    // 这里可以添加额外的逻辑，如统计点击次数等
}

@end

在上述代码中，当用户点击标签栏项时，会打印出对应的视图控制器信息，并且可以在该方法中添加更多自定义的逻辑。

通过以上对Objective - C中导航栏与标签栏自定义的详细介绍，开发者可以根据应用的需求，打造出独特且符合用户体验的界面导航和切换方式。无论是从外观上的精雕细琢，还是行为上的个性化定制，都能为应用增添独特的魅力。在实际开发中，还需要根据不同的应用场景和用户需求，灵活运用这些自定义方法，以实现最佳的用户界面效果。