导航条UINavigtionBar,标签栏UITabBarController，抽屉MMDrawerController

最新推荐文章于 2018-10-21 20:00:18 发布

深海飞鸟

最新推荐文章于 2018-10-21 20:00:18 发布

阅读量1.3k

点赞数

分类专栏： iOS控件文章标签：导航条标签抽屉

本文链接：https://blog.csdn.net/shenhaifeiniao/article/details/52515689

版权

iOS控件专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Demo：

AppDelegate.m文件

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    // Override point for customization after application launch.

    self.window = [[UIWindow alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [self.window makeKeyAndVisible];

    /*以下代码皆是位于此*/

    return YES;
}

其中用到的相关代码：

#import "MMDrawerController.h"//抽屉框架

#define TBItem(title, img, sImg) [[UITabBarItem alloc] initWithTitle:title image:[[UIImage imageNamed:img] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal] selectedImage:[[UIImage imageNamed:sImg] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]]
/*
 设置UIImage的渲染模式：UIImage.renderingMode
 着色（Tint Color）是iOS7界面中的一个.设置UIImage的渲染模式：UIImage.renderingMode重大改变，你可以设置一个UIImage在渲染时是否使用当前视图的Tint Color。UIImage新增了一个只读属性：renderingMode，对应的还有一个新增方法：imageWithRenderingMode:，它使用UIImageRenderingMode枚举值来设置图片的renderingMode属性。该枚举中包含下列值：
 1.UIImageRenderingModeAutomatic  // 根据图片的使用环境和所处的绘图上下文自动调整渲染模式。
 2.UIImageRenderingModeAlwaysOriginal   // 始终绘制图片原始状态，不使用Tint Color。
 3.UIImageRenderingModeAlwaysTemplate   // 始终根据Tint Color绘制图片，忽略图片的颜色信息。
 4.renderingMode属性的默认值是UIImageRenderingModeAutomatic，即UIImage是否使用Tint Color取决于它显示的位置
 */

- (void)tabBarControllers{
    firstCtrl = [[ViewController alloc]init];
    //自定义标签栏图片
    firstCtrl.tabBarItem = [[UITabBarItem alloc]initWithTitle:@"任务" image:[UIImage imageNamed:@"Task"] selectedImage:[UIImage imageNamed:@"Task_Normal"]];

    //重点关注控制器的层次关系,只有ViewController内的firstCtrl 及从firstCtrl跳转到的页面 具有导航控制器，

    SecondCtrl = [[SecondViewController alloc]init];
    //标签栏
    SecondCtrl.tabBarItem = TBItem(@"统计", @"Stat_Normal", @"Stat");

    ThirdCtrl = [[ThirdViewController alloc]init];
    //    ThirdCtrl.tabBarItem.title = @"5";
    //    ThirdCtrl.tabBarItem.image = [UIImage imageNamed:@"Task_Normal"]
    //    ;
    //    ThirdCtrl.tabBarItem.selectedImage = [UIImage imageNamed:@"Task"];

    //    ThirdCtrl.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemSearch tag:2];
    ThirdCtrl.title = @"4";

    //官方标签栏图片样式UITabBarSystemItemXXX
    /*
     UITabBarSystemItemMore,//更多图标
     UITabBarSystemItemFavorites,//最爱图标
     UITabBarSystemItemFeatured,//特征图标
     UITabBarSystemItemTopRated,//高级图标
     UITabBarSystemItemRecents,//最近图标
     UITabBarSystemItemContacts,//联系人图标
     UITabBarSystemItemHistory,//历史图标
     UITabBarSystemItemBookmarks,//图书图标
     UITabBarSystemItemSearch,//查找图标
     UITabBarSystemItemDownloads,//下载图标
     UITabBarSystemItemMostRecent,//记录图标
     UITabBarSystemItemMostViewed,//全部查看图标
     */
    nextfirstCtrl = [[FouthViewController alloc]init];
    nextfirstCtrl.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemFavorites tag:3];
}

//⻚面是否切换,NO为不切换
- (BOOL)tabBarController:(UITabBarController *)tabBarController shouldSelectViewController:(UIViewController *)viewController {
    if ([tabBarController.viewControllers lastObject] == viewController) {//地址相同，则肯定是同一个
        SixthViewController *loginCtrl = [SixthViewController new];
        [tabBarController presentViewController:loginCtrl animated:YES completion:nil];//新页面从下往上出现

        return NO;
    }
    return YES;
}

1.只加导航条

#pragma mark - 只加导航条
#if 1
    //设置导航条颜色
    [[UINavigationBar appearance]setBarTintColor:[UIColor colorWithRed:80.0/255 green:227.0/255 blue:194.0/255 alpha:1.0]];
    //设置导航条上按钮的文字或图标的颜色
    [[UINavigationBar appearance]setTintColor:[UIColor whiteColor]];

    //设置导航条上的背景图片
    //    [[UINavigationBar appearance]setBackgroundImage:[UIImage imageNamed:@"Snip20150916_1.png"] forBarMetrics:UIBarMetricsDefault];

    ViewController * VC  = [[ViewController alloc] init];
    //创建导航控制器，并使用根视图控制器初始化
    UINavigationController *navCtrl = [[UINavigationController alloc] initWithRootViewController:VC];
    self.window.rootViewController = navCtrl;    
#endif

2.加导航条和标签栏

#pragma mark - 加导航条和标签栏
#if 1
    //设置导航条上按钮的文字或图标的颜色
    [[UINavigationBar appearance]setTintColor:[UIColor blueColor]];
    //设置标签栏上文字的颜色
    [[UITabBar appearance]setTintColor:[UIColor greenColor]];

    [self tabBarControllers];

#pragma mark - --每个标签各有一个NavigationController
#if 1   //每个标签各有一个NavigationController
    UINavigationController *controller1 = [[UINavigationController alloc] initWithRootViewController:firstCtrl];
    UINavigationController *controller2 = [[UINavigationController alloc] initWithRootViewController:SecondCtrl];
    UINavigationController *controller3 = [[UINavigationController alloc] initWithRootViewController:ThirdCtrl];
    UINavigationController *controller4 = [[UINavigationController alloc] initWithRootViewController:nextfirstCtrl];

    controller1.tabBarItem.title = @"自定义图片刷新";//标签栏标题
//    controller1.navigationItem.title = @"自定义动态图片上拉下拉刷新";//单单导航条标题
    controller2.tabBarItem.title = @"自定义文字刷新";
    controller3.tabBarItem.title = @"自定义刷新控件";
    controller4.tabBarItem.title = @"无";//跳转到无导航条默认刷新




    UITabBarController *tabBarCtrl = [[UITabBarController alloc]init];
    tabBarCtrl.delegate = self;//注意添加协议<UITabBarControllerDelegate>

    //    NSArray *viewControllers = [NSArray arrayWithObjects:controller1, controller2, controller3, controller4, nil];

    tabBarCtrl.viewControllers = @[controller1,controller2,controller3,controller4];

    self.window.rootViewController = tabBarCtrl;
#endif
#pragma mark - --所有标签共用一个NavigationController
#if 0   //所有标签共用一个NavigationController
    UITabBarController *tabBarCtrl = [[UITabBarController alloc]init];
    tabBarCtrl.delegate = self;//注意添加协议<UITabBarControllerDelegate>

    tabBarCtrl.viewControllers = @[firstCtrl,SecondCtrl,ThirdCtrl,nextfirstCtrl];

    //只有标签栏
//    self.window.rootViewController = tabBarCtrl;//只有标签栏

    //有导航条和标签栏
    //重点关注控制器的层次关系,具有导航控制器，
    //创建导航控制器，并使用根视图控制器初始化
    UINavigationController *allNavCtrl = [[UINavigationController alloc]initWithRootViewController:tabBarCtrl];

    tabBarCtrl.title = @"所有tabBar的标题";

    self.window.rootViewController = allNavCtrl;
#endif
#endif

3.加导航条和标签栏和抽屉

#pragma mark - 加导航条和标签栏和抽屉
#if 1

    [self tabBarControllers];
    UITabBarController *tabBarCtrl = [[UITabBarController alloc]init];
    tabBarCtrl.viewControllers = @[firstCtrl,SecondCtrl,ThirdCtrl,nextfirstCtrl];

    LeftViewController *leftCtrl = [[LeftViewController alloc]init];

    //只加标签栏和抽屉
//    MMDrawerController *drawerCtrl = [[MMDrawerController alloc]initWithCenterViewController:tabBarCtrl leftDrawerViewController:leftCtrl];


    //创建导航控制器，并使用根视图控制器初始化
    UINavigationController *navCtrl = [[UINavigationController alloc]initWithRootViewController:tabBarCtrl];

    tabBarCtrl.title = @"所有tabBar的标题";

    //加导航条和标签栏和抽屉
    MMDrawerController *drawerCtrl = [[MMDrawerController alloc]initWithCenterViewController:navCtrl leftDrawerViewController:leftCtrl];

    //支持打开抽屉的手势类型
    //    drawerCtrl.openDrawerGestureModeMask = MMOpenDrawerGestureModeAll;
    //MMOpenDrawerGestureModePanningCenterView:打开抽屉姿态模式平移中心视图
    //MMOpenDrawerGestureModePanningNavigationBar:打开抽屉姿态模式平移导航栏
    drawerCtrl.openDrawerGestureModeMask = MMOpenDrawerGestureModePanningCenterView |MMOpenDrawerGestureModePanningNavigationBar;
    //支持关闭抽屉的手势类型
    drawerCtrl.closeDrawerGestureModeMask = MMCloseDrawerGestureModeAll;

    self.window.rootViewController = drawerCtrl;


#endif

ViewController.m文件

- (void)viewDidLoad {
    [super viewDidLoad];

    self.view.backgroundColor = [UIColor whiteColor];
    //设置导航条上按钮的文字或图标的颜色
//    [[UINavigationBar appearance] setBarTintColor:[UIColor whiteColor]];//[UINavigationBar appearance]是在AppDelegate中有效
    [self.navigationController.navigationBar setTintColor:[UIColor whiteColor]];
    //设置导航条标题颜色，@{}代表Dictionary
    [self.navigationController.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor whiteColor]}];

    //设置导航栏颜色透明
    //设置导航条颜色透明只需设置NavigationBar的背景图片为一张空图片即可
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsCompact];
    //NavigationBar下边有一个ShadowImage，也可以通过设置空的UIImage设置透明。//这一句本来可以隐藏导航栏底部的分割线，但是不知为何此时无效，故采取以下另一种方法
    [self.navigationController.navigationBar setShadowImage:[UIImage new]];

    //隐藏导航栏底部的分割线,navBarHairlineImageView是UIImageView类
    navBarHairlineImageView = [self findHairlineImageViewUnder:self.navigationController.navigationBar];

    //设置导航栏颜色
    //self.navigationController.navigationBar.barTintColor = [UIColor blueColor];

    //当UIViewController. extendedLayoutIncludesOpaqueBars = NO 时，UINavigationBar添加背景图片后，UIViewController的视图的原点坐标为(0, 64), 下移了64px，并且高度缩减了64px。默认NO
    //    self.extendedLayoutIncludesOpaqueBars = YES;

    //导航栏不透明,translucent默认yes，导航条半透明
    //    self.navigationController.navigationBar.translucent = NO;



    //左
    self.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"左侧" style:UIBarButtonItemStylePlain target:self action:@selector(didLeftClicked:)];
    //右
    UIImage *image = [UIImage imageNamed:@"Stat"];
    //如果需要显示图片的原始模样，需要设置渲染模式,否则由AppDelegate内的[UINavigationBar appearance]setTintColor所控制
    //    image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(didRightClicked:)];

    //导航条的 度为44,状态栏的 度为20
//    UIView *v = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 44)];
//    v.backgroundColor = [UIColor purpleColor];
//    self.navigationItem.titleView = v; //标题和titleView有冲突,只会有一个有效

//    self.title = @"自定义文字刷新";//修改导航条和标题栏标题.在AppDelegate.m内无效
    self.navigationItem.title = @"自定义动态图片刷新";//单单导航条标题

}

#pragma mark 找出导航栏底部横线
- (UIImageView *)findHairlineImageViewUnder:(UIView *)view {
    if ([view isKindOfClass:UIImageView.class] && view.bounds.size.height <= 1.0) {
        return (UIImageView *)view;
    }
    for (UIView *subview in view.subviews) {
        UIImageView *imageView = [self findHairlineImageViewUnder:subview];
        if (imageView) {
            return imageView;
        }
    }
    return nil;
}

相关属性

1.导航条UINavigtionBar：

1.1UINavigtionBar的单独创建

iOS中的导航条可以附着于导航控制器UINavigationController之中使用，也可以在controller中单独使用

UINavigationBar *bar = [[UINavigationBar alloc]initWithFrame:CGRectMake(0, 0, 320, 80)];
[self.view addSubview:bar];

1.2导航栏的风格属性

UINavigationBar默认为白色的半透明的样式。导航栏的风格属性可以通过下面的属性来设置：

@property(nonatomic,assign) UIBarStyle barStyle;

UIBarStyle是一个枚举，其中大部分的样式都已弃用，有效果的只有如下两个：

typedef NS_ENUM(NSInteger, UIBarStyle) {
    UIBarStyleDefault          = 0,//默认
    UIBarStyleBlack            = 1,//黑色
}

1.3导航栏不透明

iOS6后导航栏默认都是半透明的，我们可以通过下面的bool值来设置这个属性，设置为NO，则导航栏不透明，默认为YES的半透明状态：

@property(nonatomic,assign,getter=isTranslucent) BOOL translucent;

1.4导航条上按钮的颜色

tintColor这个属性会影响到导航栏上按钮的图案颜色和字体颜色，系统默认是蓝色：

//设置导航条上按钮的文字或图标的颜色
[[UINavigationBar appearance]setTintColor:[UIColor whiteColor]];

1.5导航条背景颜色

BarTintColor用于设置导航栏的背景色，这个属性被设置后，半透明的效果将失效

//设置导航条颜色
[[UINavigationBar appearance]setBarTintColor:[UIColor colorWithRed:80.0/255 green:227.0/255 blue:194.0/255 alpha:1.0]];

1.6导航条背景图片

- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;
- (nullable UIImage *)backgroundImageForBarMetrics:(UIBarMetrics)barMetrics;

上面两个方法用于设置和获取导航栏的背景图案，这里需要注意，默认背景图案是不做缩放处理的，所以我们使用的图片尺寸要和导航栏尺寸匹配

//设置导航条上的背景图片
[[UINavigationBar appearance]setBackgroundImage:[UIImage imageNamed:@"Snip20150916_1.png"] forBarMetrics:UIBarMetricsDefault];

1.7导航条的设备的状态，竖屏横屏

UIBarMetrics参数设置设备的状态，如下：

typedef NS_ENUM(NSInteger, UIBarMetrics) {
    UIBarMetricsDefault,//正常竖屏状态
    UIBarMetricsCompact,//横屏状态
};

1.8设置导航栏的阴影图片

@property(nullable, nonatomic,strong) UIImage *shadowImage;

1.9设置导航栏的标题字体属性

@property(nullable,nonatomic,copy) NSDictionary<NSString *,id> *titleTextAttributes;

标题字体属性会影响到导航栏的中间标题，如下：

//设置导航条标题颜色，@{}代表Dictionary
    [self.navigationController.navigationBar setTitleTextAttributes:@{NSForegroundColorAttributeName:[UIColor whiteColor]}];

1.10设置导航栏标题的竖直位置偏移

- (void)setTitleVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics;
- (CGFloat)titleVerticalPositionAdjustmentForBarMetrics:(UIBarMetrics)barMetrics;

1.10设置导航栏左侧pop按钮的图案

导航栏左侧pop按钮的图案默认是一个箭头，我们可以使用下面的方法修改：

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithImage:[UIImage imageNamed:@"notebook"] style:UIBarButtonItemStylePlain target:self action:@selector(didRightClicked:)];

1.11设置导航栏颜色透明

//设置导航栏颜色透明
    //设置导航条颜色透明只需设置NavigationBar的背景图片为一张空图片即可
    [self.navigationController.navigationBar setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsCompact];

1.11隐藏导航栏底部的分割线

    //NavigationBar下边有一个ShadowImage，也可以通过设置空的UIImage设置透明。//这一句本来可以隐藏导航栏底部的分割线，但是不知为何此时无效，故采取以下另一种方法
    [self.navigationController.navigationBar setShadowImage:[UIImage new]];

    //隐藏导航栏底部的分割线,navBarHairlineImageView是UIImageView类
    navBarHairlineImageView = [self findHairlineImageViewUnder:self.navigationController.navigationBar];

#pragma mark 找出导航栏底部横线
- (UIImageView *)findHairlineImageViewUnder:(UIView *)view {
    if ([view isKindOfClass:UIImageView.class] && view.bounds.size.height <= 1.0) {
        return (UIImageView *)view;
    }
    for (UIView *subview in view.subviews) {
        UIImageView *imageView = [self findHairlineImageViewUnder:subview];
        if (imageView) {
            return imageView;
        }
    }
    return nil;
}

2.导航栏中item的push与pop操作

UINavigationBar上面不只是简单的显示标题，它也将标题进行了堆栈的管理，每一个标题抽象为的对象在iOS系统中是UINavigationItem对象，我们可以通过push与pop操作管理item组。

//向栈中添加一个item，上一个item会被推向导航栏的左侧，变为pop按钮，会有一个动画效果
- (void)pushNavigationItem:(UINavigationItem *)item animated:(BOOL)animated;
//pop一个item
- (nullable UINavigationItem *)popNavigationItemAnimated:(BOOL)animated; 
//当前push到最上层的item
@property(nullable, nonatomic,readonly,strong) UINavigationItem *topItem;
//仅次于最上层的item，一般式被推向导航栏左侧的item
@property(nullable, nonatomic,readonly,strong) UINavigationItem *backItem;
//获取堆栈中所有item的数组
@property(nullable,nonatomic,copy) NSArray<UINavigationItem *> *items;
//设置一组item
- (void)setItems:(nullable NSArray<UINavigationItem *> *)items animated:(BOOL)animated;

3.UINavigationBarDelegate

在UINavigationBar中，还有如下一个属性：

@property(nullable,nonatomic,weak) id<UINavigationBarDelegate> delegate;

通过代理，我们可以监控导航栏的一些push与pop操作：

//item将要push的时候调用，返回NO，则不能push
- (BOOL)navigationBar:(UINavigationBar *)navigationBar shouldPushItem:(UINavigationItem *)item; 
//item已经push后调用
- (void)navigationBar:(UINavigationBar *)navigationBar didPushItem:(UINavigationItem *)item; 
//item将要pop时调用，返回NO，不能pop  
- (BOOL)navigationBar:(UINavigationBar *)navigationBar shouldPopItem:(UINavigationItem *)item; 
//item已经pop后调用 
- (void)navigationBar:(UINavigationBar *)navigationBar didPopItem:(UINavigationItem *)item;

参考自：https://my.oschina.net/u/2340880/blog/527706?p=1

深海飞鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航条UINavigtionBar,标签栏UITabBarController，抽屉MMDrawerController

Demo：- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. self.window
复制链接

扫一扫