仿新浪微博IOS客户端（v5.2.8）——自定义UITabBar替换系统默认的（添加“+”号按钮）

转载请标明出处：http://blog.csdn.net/android_ls/article/details/45896395

声明：仿新浪微博项目，所用所有图片资源都来源于官方新浪微博IOS客户端，编写本应用的目的在于学习交流，如涉及侵权请告知，我会及时换掉用到的相关图片。

自定义UITabBar替换系统默认的，目的是为了在UITabBar中间位置添加一个“+号按钮”，下面我们来聊聊具体的实现。

1、自定义WBTabBar，让其继承自UITabBar，代码如下：

//
//  WBTabBar.h
//  SinaWeibo
//
//  Created by android_ls on 15/5/21.
//  Copyright (c) 2015年 android_ls. All rights reserved.
//

#import <UIKit/UIKit.h>

@interface WBTabBar : UITabBar

@end

2、tabBar是UITabBarController的只读成员变量（属性），是不让修改的，在UITabBarController.h文件中的声明如下：

@property(nonatomic,readonly) UITabBar *tabBar NS_AVAILABLE_IOS(3_0);

针对于这种情况，我们可以使用KVC的方式，更换系统自带的UITabBar，实现代码如下：

    WBTabBar *tabBar = [[WBTabBar alloc] init];
    [self setValue:tabBar forKeyPath:@"tabBar"];

3、添加一个UIButton到WBTabBar中，实现代码如下：

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 添加一个按钮到tabbar中
        UIButton *plusBtn = [[UIButton alloc] init];
        [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
        [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];
        [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_background_icon_add"] forState:UIControlStateNormal];
        [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];
        plusBtn.size = plusBtn.currentBackgroundImage.size;
        [plusBtn addTarget:self action:@selector(plusClick) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:plusBtn];
        self.plusBtn = plusBtn;
    }
    return self;
}

4、设置加号按钮的位置，调整WBTabBar中各个UITabBarButton的位置和宽度，具体实现代码如下：

- (void)layoutSubviews
{
    [super layoutSubviews];

    // 1.设置加号按钮的位置
    self.plusBtn.centerX = self.width * 0.5;
    self.plusBtn.centerY = self.height * 0.5;

    // 2.设置其它UITabBarButton的位置和尺寸
    CGFloat tabbarButtonW = self.width / 5;
    CGFloat tabbarButtonIndex = 0;
    for (UIView *child in self.subviews) {
        Class class = NSClassFromString(@"UITabBarButton");
        if ([child isKindOfClass:class]) {
            // 设置宽度
            child.width = tabbarButtonW;
            // 设置x
            child.x = tabbarButtonIndex * tabbarButtonW;

            // 增加索引
            tabbarButtonIndex++;
            if (tabbarButtonIndex == 2) {
                tabbarButtonIndex++;
            }
        }
    }
}

5、定义WBTabBarDelegate协议，声明WBTabBar的代理，代码如下：

//
//  WBTabBar.h
//  SinaWeibo
//
//  Created by android_ls on 15/5/21.
//  Copyright (c) 2015年 android_ls. All rights reserved.
//

#import <UIKit/UIKit.h>

#pragma mark 因为在UITabBar中已经声明过一个UITabBarDelegate协议，
#pragma mark 我们若想新增一个对外的代理函数，可以让我们自定义的协议继承自UITabBarDelegate，添加一个扩展函数。

@class WBTabBar;

@protocol WBTabBarDelegate <UITabBarDelegate>

@optional
- (void)tabBarDidClickPlusButton:(WBTabBar *)tabBar;

@end

@interface WBTabBar : UITabBar

@property (nonatomic, weak) id<WBTabBarDelegate> tabBarDelegate;

@end

6、在加号按钮的点击事件处理器中，通知代理

#pragma mark 加号按钮点击事件处理器
- (void)plusClick
{
    // 通知代理
    if ([self.tabBarDelegate respondsToSelector:@selector(tabBarDidClickPlusButton:)]) {
        [self.tabBarDelegate tabBarDidClickPlusButton:self];
    }
}

7、在WBTabBarController中设置WBTabBar的代理，具体实现如下：

 // 2、使用KVC的方式，更换系统自带的UITabBar
    WBTabBar *tabBar = [[WBTabBar alloc] init];
    tabBar.tabBarDelegate = self;
    [self setValue:tabBar forKeyPath:@"tabBar"];
#pragma mark - HWTabBarDelegate代理方法
- (void)tabBarDidClickPlusButton:(WBTabBar *)tabBar
{
    ComposeViewController *composeViewController= [[ComposeViewController alloc] init];
    UINavigationController * navigationController = [[UINavigationController alloc]initWithRootViewController:composeViewController];
    [self presentViewController:navigationController animated:YES completion:nil];
}

8、有图有真相，已实现的效果图如下：

点击加号按钮，弹出写作界面，效果图如下：

WBTabBarController.m文件完整源码如下：

//
//  WBTabBarController.m
//  SinaWeibo
//
//  Created by android_ls on 15/5/17.
//  Copyright (c) 2015年 android_ls. All rights reserved.
//

#import "WBTabBarController.h"
#import "HomeViewController.h"
#import "MessageViewController.h"
#import "DiscoverViewController.h"
#import "ProfileViewController.h"
#import "WBNavigationController.h"
#import "WBTabBar.h"
#import "ComposeViewController.h"

@interface WBTabBarController ()<WBTabBarDelegate>
{
    HomeViewController * _homeViewController;
    MessageViewController * _messageViewController;
    DiscoverViewController * _discoverViewController;
    ProfileViewController * _profileViewController;
}
@end

@implementation WBTabBarController

- (void)viewDidLoad {
    [super viewDidLoad];

    // 初始化子控制器，并将其添加到UITabBarController中
    _homeViewController = [[HomeViewController alloc]init];
    [self addChildController:_homeViewController title:@"首页" image:@"tabbar_home"];

    _messageViewController = [[MessageViewController alloc]init];
    [self addChildController:_messageViewController title:@"消息" image:@"tabbar_message_center"];

    _discoverViewController = [[DiscoverViewController alloc]init];
    [self addChildController:_discoverViewController title:@"发现" image:@"tabbar_discover"];

    _profileViewController = [[ProfileViewController alloc]init];
    [self addChildController:_profileViewController title:@"我" image:@"tabbar_profile"];

    // @property(nonatomic,readonly) UITabBar *tabBar NS_AVAILABLE_IOS(3_0);
    // tabBar是UITabBarController的只读成员变量（属性），是不让修改的

    // 2、使用KVC的方式，更换系统自带的UITabBar
    WBTabBar *tabBar = [[WBTabBar alloc] init];
    tabBar.tabBarDelegate = self;
    [self setValue:tabBar forKeyPath:@"tabBar"];

}

#pragma mark - HWTabBarDelegate代理方法
- (void)tabBarDidClickPlusButton:(WBTabBar *)tabBar
{
    ComposeViewController *composeViewController= [[ComposeViewController alloc] init];
    UINavigationController * navigationController = [[UINavigationController alloc]initWithRootViewController:composeViewController];
    [self presentViewController:navigationController animated:YES completion:nil];
}

/**
 * 添加子控制器到UITabBarController中
 */
- (void)addChildController:(UIViewController *)childViewController title:(NSString *)title image:(NSString *)image
{
    // 设置子控制器，tabbar和navigationBar上的title
    childViewController.title = title;

    // 设置tabBarItem上默认的指示图片和选中时的图片
    childViewController.tabBarItem.image = [UIImage imageNamed:image];
    childViewController.tabBarItem.selectedImage = [[UIImage imageNamed:[NSString stringWithFormat:@"%@%@", image, @"_selected"]]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

    // 设置tabBarItem上文字的样式（这里是设置文字在不同状态下的颜色值）
    [childViewController.tabBarItem setTitleTextAttributes:
     @{NSForegroundColorAttributeName:kColor(117, 117, 117)} forState:UIControlStateNormal];
    [childViewController.tabBarItem setTitleTextAttributes:
     @{NSForegroundColorAttributeName:kColor(253, 109, 10)} forState:UIControlStateSelected];

    // 使用系统默认的UINavigationController
//    [self addChildViewController:[[UINavigationController alloc] initWithRootViewController:childViewController]];

    // 使用我们自定义的导航栏(WBNavigationController继承自UINavigationController)
    WBNavigationController * navigationController = [[WBNavigationController alloc]initWithRootViewController:childViewController];
    [self addChildViewController:navigationController];
}

@end

WBTabBar.h文件完整源码如下：

//
//  WBTabBar.h
//  SinaWeibo
//
//  Created by android_ls on 15/5/21.
//  Copyright (c) 2015年 android_ls. All rights reserved.
//

#import <UIKit/UIKit.h>

#pragma mark 因为在UITabBar中已经声明过一个UITabBarDelegate协议，
#pragma mark 我们若想新增一个对外的代理函数，可以让我们自定义的协议继承自UITabBarDelegate，添加一个扩展函数。

@class WBTabBar;

@protocol WBTabBarDelegate <UITabBarDelegate>

@optional
- (void)tabBarDidClickPlusButton:(WBTabBar *)tabBar;

@end

@interface WBTabBar : UITabBar

@property (nonatomic, weak) id<WBTabBarDelegate> tabBarDelegate;

@end

WBTabBar.m文件完整源码如下：

//
//  WBTabBar.m
//  SinaWeibo
//
//  Created by android_ls on 15/5/21.
//  Copyright (c) 2015年 android_ls. All rights reserved.
//

#import "WBTabBar.h"

@interface WBTabBar()
@property (nonatomic, weak) UIButton *plusBtn;
@end

@implementation WBTabBar

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // 添加一个按钮到tabbar中
        UIButton *plusBtn = [[UIButton alloc] init];
        [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button"] forState:UIControlStateNormal];
        [plusBtn setBackgroundImage:[UIImage imageNamed:@"tabbar_compose_button_highlighted"] forState:UIControlStateHighlighted];
        [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_background_icon_add"] forState:UIControlStateNormal];
        [plusBtn setImage:[UIImage imageNamed:@"tabbar_compose_icon_add_highlighted"] forState:UIControlStateHighlighted];
        plusBtn.size = plusBtn.currentBackgroundImage.size;
        [plusBtn addTarget:self action:@selector(plusClick) forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:plusBtn];
        self.plusBtn = plusBtn;
    }
    return self;
}

#pragma mark 加号按钮点击事件处理器
- (void)plusClick
{
    // 通知代理
    if ([self.tabBarDelegate respondsToSelector:@selector(tabBarDidClickPlusButton:)]) {
        [self.tabBarDelegate tabBarDidClickPlusButton:self];
    }
}

- (void)layoutSubviews
{
    [super layoutSubviews];

    // 1.设置加号按钮的位置
    self.plusBtn.centerX = self.width * 0.5;
    self.plusBtn.centerY = self.height * 0.5;

    // 2.设置其它UITabBarButton的位置和尺寸
    CGFloat tabbarButtonW = self.width / 5;
    CGFloat tabbarButtonIndex = 0;
    for (UIView *child in self.subviews) {
        Class class = NSClassFromString(@"UITabBarButton");
        if ([child isKindOfClass:class]) {
            // 设置宽度
            child.width = tabbarButtonW;
            // 设置x
            child.x = tabbarButtonIndex * tabbarButtonW;

            // 增加索引
            tabbarButtonIndex++;
            if (tabbarButtonIndex == 2) {
                tabbarButtonIndex++;
            }
        }
    }
}

@end

ComposeViewController继承自UIViewController，主要实现在m文件，其完整代码如下：

//
//  ComposeViewController.m
//  SinaWeibo
//
//  Created by android_ls on 15/5/21.
//  Copyright (c) 2015年 android_ls. All rights reserved.
//

#import "ComposeViewController.h"
#import "UIBarButtonItem+Category.h"

@interface ComposeViewController ()

@end

@implementation ComposeViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    self.title = @"写作界面";
    self.view.backgroundColor = [UIColor whiteColor];

    self.navigationItem.leftBarButtonItem = [UIBarButtonItem itemWithTarget:self
                            action:@selector(back)
                            image:@"navigationbar_back_withtext"
                            highImage:@"navigationbar_back_withtext_highlighted"
                            title:@"返回"];

}

- (void)back
{
    [self.navigationController dismissViewControllerAnimated:YES completion:^{}];
}

@end

作为程序员，我不善于言谈。很多时候去面试，面的有些知识点我使用过，也知道其原理，但是就是表达不清楚，老让人鄙视。

最后聊聊我的技术博客写作思路，先详细讲解每一步的实现，最后我会贴出完整代码，供想认真阅读的读者看个痛快。

时间： 2024-10-02 17:34:25

仿新浪微博IOS客户端（v5.2.8）——自定义UITabBar替换系统默认的（添加“+”号按钮）的相关文章

iOS之自定义UITabBar替换系统默认的（添加“+”号按钮）

自定义UITabBar替换系统默认的,目的是为了在UITabBar中间位置添加一个“+号按钮”,下面我们来聊聊具体的实现. 1.自定义WBTabBar,让其继承自UITabBar,代码如下: // // WBTabBar.h // SinaWeibo // // Created by android_ls on 15/5/21. // Copyright (c) 2015年 android_ls. All rights reserved. // #import <UIKit/UIKit.h>

仿新浪微博IOS客户端（v5.2.8）——下拉菜单栏的实现

转载请标明出处:http://blog.csdn.net/android_ls/article/details/45877983 声明:仿新浪微博项目,所用所有图片资源都来源于官方新浪微博IOS客户端,编写本应用的目的在于学习交流,如涉及侵权请告知,我会及时换掉用到的相关图片. 接着上一篇博文,这篇我们来聊聊新浪微博导航栏上,点击中间部分的标题(titleView)弹出的下拉菜单是如何实现. 1.自定义导航栏中间的titleView,代码如下: // 设置导航栏中间的titleView _tit

仿新浪微博IOS客户端（v5.2.8）——设置导航栏外观

转载请标明出处:http://blog.csdn.net/android_ls/article/details/45849447 声明:仿新浪微博项目,所用所有图片资源都来源于官方新浪微博IOS客户端,编写本应用的目的在于学习交流,如涉及侵权请告知,我会及时换掉用到的相关图片. 一. 在Xcode6下添加.pch文件 对于使用惯了之前版本Xcode的朋友来说,在系统提醒之下升级到Xcode 6之后,发现新建项目后Xcode不再帮我们创建.pch文件了.可是我们已经习惯了,把一些在很多地方都用的宏

仿新浪微博IOS客户端（v5.2.8）——搭建项目基本框架

转载请标明出处:http://blog.csdn.net/android_ls/article/details/45827719 声明:仿新浪微博项目,所用所有图片资源都来源于官方新浪微博IOS客户端,编写本应用的目的在于学习交流,如涉及侵权请告知,我会及时换掉用到的相关图片. 最近我打算利用业余时间,仿下新浪微博IOS客户端,至于能写到哪里我也不确定,能写多少就写多少吧,下面我们开始项目的基本搭建: 1.打开Xcode选择创建新项目,并创建各个模块的目录结构,完成后项目的目录结构如下图: 2.

仿Bilibili iOS客户端 练习案例源码

仿Bilibili iOS客户端 练习启动页 源码下载:http://code.662p.com/view/14534.html 首页    分区 发现 我的 视频信息 普通/直播 视频播放 详细说明:http://ios.662p.com/thread-3121-1-1.html

JS替换系统默认对话框，仿IOS风格

Alert alert("这个是一个alert弹窗"); Alert 自定义参数 alert({ content: "自定义alert弹窗", btnText: "OK", boxClass: "custom-alert" }, function () { console.log("good!"); }); Confirm confirm("这个是一个confirm弹窗", functi

iOS开发项目篇—27自定义UITabBar

iOS开发项目篇—27自定义UITabBar 一.自定义 思路: (1)新建一个继承自UITabBar的类,自定义一个UITabBar (2)用自定义的UITabBar换掉系统的UItabBar(使用了KVC) (3)监听控制器的切换,只要控制器一切换,就调用代理方法强制重新布局子控件(内部会调用layoutSubviews). YYTabBar.m文件代码: 1 // 2 // YYTabBar.m 3 // 4 5 #import "YYTabBar.h" 6 7 @interfa

仿制新浪微博iOS客户端之四-未登录页面处理

写在最前:非常抱歉,前期因为个人原因有二十多天的时间没有再继续更新这个专题,期间仅仅是完成了苹果官方的UIStackView的文档的翻译.在这里我们将继续未完成的任务,继续做下去!现在继续! 一.前期总结 在完成第三篇的任务后,我们实际上完成的效果如下: 目前我们已经能保证界面的顺利切换,并且给微博的撰写按钮预留了点击事件接口,再下一步,我们将要完成在用户登录前的所有准备工作. 二.抽取基类 目前我们在首页.消息.发现.我这四个界面中使用的都是UITableViewController来加载和显

仿制新浪微博iOS客户端之三-自定义TabBar

继续上一篇文章的进度,我们实际完成了微博基本框架的搭建,具体实现的效果如下左图,但我们实际需要实现的效果为右图,除去主要的页面内容不谈,仅仅下面的TabBar距离我们的需求就有相当的差距.因此本文着重于实现需要的效果.                           再简要汇总一下我们的需求: 1.我们要在TabBar原有四个按钮的基础上,再增加一个按钮,作为撰写微博的入口: 2.新加入的按钮必须和原有按钮一起,均匀分布在TabBar上: 3.新加入的按钮只有图片,没有文字. 需求汇总如上,