您的位置:首页 > 产品设计 > UI/UE

自定义UITabBar(仿微博)

2016-03-23 00:00 411 查看
摘要: 之前也写过小微博,今天看到有个同事提到了自定义UITabBar。那就拿出来说说。

1、自定义WBTabBar,让其继承自UITabBar
#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的代理,代码如下:
#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文件完整源码如下:
#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文件完整源码如下:
#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文件完整源码如下:
#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文件,其完整代码如下:
#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
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  自定义 TabBar