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

iOS阶段学习第33天笔记(自定义标签栏(UITabBar)介绍)

2015-08-30 18:49 555 查看
iOS学习(UI)知识点整理

一、自定义标签栏

1、方法一 单个创建标签栏

#import "AppDelegate.h"
#import "SecondViewController.h"
#import "ViewController.h"
#import "ThirdViewController.h"
#import "ForthViewController.h"
#import "ViewController1.h"
#import "ViewController2.h"
#import "ViewController3.h"
#import "ViewController4.h"
@interface AppDelegate ()<UITabBarControllerDelegate>
@end

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
//1.直接设置默认的标签的属性
UINavigationController *navi1 = [[UINavigationController alloc]initWithRootViewController:[ViewController new]];
//设置navi1所对应的界面的标签的标题
navi1.tabBarItem.title = @"home";
//设置navi1所对应的标签的图标
navi1.tabBarItem.image = [[UIImage imageNamed:@"tabbar_account_press"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//2.直接创建一个新的标签
UIViewController *vc1 = [ViewController1 new];
//创建的方式里面包含三个参数:文字标题,普通状态下的图片,选中状态下的图片
UITabBarItem *item = [[UITabBarItem alloc]initWithTitle:@"界面二"  image:[UIImage imageNamed:@"tabbar_appfree"]
selectedImage:[UIImage imageNamed:@"tabbar_account"]];
vc1.tabBarItem = item;
//设置数字徽标,用来提示用户
item.badgeValue = @"20";
//设置系统图标右上角的数字
[[UIApplication sharedApplication] setApplicationIconBadgeNumber:55];

//3.创建标签的另一种方式
UINavigationController *navi2 = [[UINavigationController alloc]initWithRootViewController:[ViewController2 new]];
//参数:标题和图片
UITabBarItem *item2 = [[UITabBarItem alloc]initWithTitle:@"界面三" image:[UIImage imageNamed:@"tabbar_reduceprice"] tag:100];
item2.selectedImage = [UIImage imageNamed:@"tabbar_subject"];
navi2.tabBarItem = item2;

//4.他们系统样式的标签
UINavigationController *navi3 = [[UINavigationController alloc]initWithRootViewController:[ViewController3 new]];
//使用系统的样式创建标签,图片和文字都无法修改
navi3.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemDownloads tag:200];
//无法修改
navi3.tabBarItem.title = @"界面四";
UINavigationController *navi4 = [[UINavigationController alloc]initWithRootViewController:[ViewController4 new]];
navi4.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemFeatured tag:101];

//如果创建的标签数量大于5个,则从第5个开始(包括第5个)都会被放到More标签中
UINavigationController *navi5 = [[UINavigationController alloc]initWithRootViewController:[SecondViewController new]];
navi5.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemHistory tag:101];

//创建标签栏控制器
UITabBarController *tabbar = [[UITabBarController alloc]init];
//设置标签栏控制器所管理的视图控制器
tabbar.viewControllers = @[navi1,vc1,navi2,navi3,navi4,navi5];
NSInteger index = [[[NSUserDefaults standardUserDefaults]valueForKey:@"selectedindex"] integerValue];
//设置tabbar选中的标签
tabbar.selectedIndex = index;
tabbar.delegate = self;
self.window.rootViewController = tabbar;
self.window.backgroundColor = [UIColor whiteColor];
return YES;
}

//选中某一个视图控制器的时候,调用该方法
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController
{
[[NSUserDefaults standardUserDefaults]setValue:@(tabBarController.selectedIndex) forKey:@"selectedindex"];
[[NSUserDefaults standardUserDefaults]synchronize];
NSLog(@"%@",viewController);
}

//自定义视图控制器完成的时候调用
- (void)tabBarController:(UITabBarController *)tabBarController didEndCustomizingViewControllers:(NSArray *)viewControllers
changed:(BOOL)changed
{
NSLog(@"%@",viewControllers);
}
@end


2、方法二 循环遍历创建标签栏

1)创建一个继承自UIButton的类 MyTabbBarItem 用于创建标签栏的按钮

MyTabbBarItem.h 文件中的代码实现

#import <UIKit/UIKit.h>
@interface MyTabbBarItem : UIButton
@end


2) MyTabbBarItem.m 文件中的代码实现

#import "MyTabbBarItem.h"
@implementation MyTabbBarItem
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.titleLabel.font = [UIFont systemFontOfSize:12];
self.titleLabel.textAlignment = NSTextAlignmentCenter;
[self setTitleColor:[UIColor grayColor] forState:UIControlStateNormal];
[self setTitleColor:[UIColor whiteColor] forState:UIControlStateSelected];
}
return self;
}

//这个方法返回的cgrect是按钮上的title部分的位置和大小
- (CGRect)titleRectForContentRect:(CGRect)contentRect
{
return CGRectMake(0, 30, contentRect.size.width, 15);
}

- (CGRect)imageRectForContentRect:(CGRect)contentRect
{
return CGRectMake((contentRect.size.width - 26)/2, 2, 26, 26);
}


3)自定义标签栏的类 MyTabBarController.h 代码实现

#import <UIKit/UIKit.h>
@interface MyTabBarController : UITabBarController

@end


4)自定义标签栏的类 MyTabBarController.m 代码实现

#import "MyTabBarController.h"
#import "ViewController.h"
#import "ViewController1.h"
#import "ViewController2.h"
#import "ViewController3.h"
#import "ViewController4.h"
#import "MyTabbBarItem.h"

@interface MyTabBarController ()
{
UIImageView *_myTabbar;
}
@end

@implementation MyTabBarController

- (void)viewDidLoad {
[super viewDidLoad];

//配置标签栏控制器
//自定义标签栏的步骤

//1.隐藏系统的标签栏
self.tabBar.hidden = YES;

//3.创建所有的视图控制器
[self createViewControllers];

//2.创建一个新标签栏
[self createTabbar];

//4.创建所有标签
[self createTabs];

//5.标签和视图控制器进行关联

}

-(void)createTabbar
{
CGRect frame = [[UIScreen mainScreen]bounds];
frame.origin.y = frame.size.height - 49;
frame.size.height = 49;

_myTabbar = [[UIImageView alloc]initWithFrame:self.tabBar.bounds];

_myTabbar.backgroundColor = [UIColor blueColor];

//将自定义标签栏添加在系统标签栏上
[self.tabBar addSubview:_myTabbar];
_myTabbar.userInteractionEnabled = YES;
}
-(void)createViewControllers
{
NSArray *vcArray = @[@"ViewController",
@"ViewController1",
@"ViewController2",
@"ViewController3",
@"ViewController4"];

NSMutableArray *vcs = [[NSMutableArray alloc]init];
for (int i = 0; i<vcArray.count; i++) {
//反射(将字符串对象转换成对应的类对象)
UIViewController *vc = [[NSClassFromString(vcArray[i]) alloc]init];
vc.navigationItem.title = vcArray[i];
UINavigationController *navi = [[UINavigationController alloc]initWithRootViewController:vc];
[vcs addObject:navi];
}
self.viewControllers = vcs;
}

-(void)createTabs
{
NSArray *titleArray = @[@"首页",@"社会",@"金融",@"法制",@"教育"];
NSArray *imageArray = @[@"tabbar_account",
@"tabbar_appfree",
@"tabbar_limitfree",
@"tabbar_reduceprice",
@"tabbar_subject"];
NSArray *imageSelectedArray = @[@"tabbar_account_press",
@"tabbar_appfree_press",
@"tabbar_limitfree_press",
@"tabbar_reduceprice_press",
@"tabbar_subject_press"];

for (int i = 0; i<titleArray.count; i++) {
MyTabbBarItem *btn = [MyTabbBarItem buttonWithType:UIButtonTypeCustom];
[btn setTitle:titleArray[i] forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:imageArray[i]] forState:UIControlStateNormal];
[btn setImage:[UIImage imageNamed:imageSelectedArray[i]] forState:UIControlStateSelected];
if (i == 0) {
btn.selected = YES;
}
CGFloat width = [[UIScreen mainScreen]bounds].size.width/5;
btn.frame = CGRectMake(width * i, 0, width, 49);
[_myTabbar addSubview:btn];
btn.tag = 100 + i;
[btn addTarget:self action:@selector(selectAction:) forControlEvents:UIControlEventTouchUpInside];
}
}

-(void)selectAction:(UIButton *)btn
{
NSInteger index = btn.tag - 100;
self.selectedIndex = index;
for (UIButton *btn in _myTabbar.subviews) {
btn.selected = NO;
}
//设置selected属性
btn.selected = YES;
}

@end


5)AppDelegate.m 文件中的代码实现

//系统自带的标签的高度是49
//可以自定义标签来设置不同高度的标签栏
//此处不能指定导航栏否则标签栏无法显示,因为后面会指定导航栏
MyTabBarController *tabbar = [[MyTabBarController alloc]init];
self.window.rootViewController = tabbar;
self.window.backgroundColor = [UIColor whiteColor];
return YES;


3、UITabbarController的视图层级关系;利用Window 实现QQ右侧菜单视图功能

1)AppDelegate.m 代码实现

#import "AppDelegate.h"
#import "ViewController.h"
@interface AppDelegate ()
{
UIWindow *_w;
}
@end
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
_w = [[UIWindow alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
_w.backgroundColor = [UIColor purpleColor];          _w.rootViewController = [RootViewController new];
[_w makeKeyAndVisible];
UITabBarController *tabbar = [[UITabBarController alloc]init];
UINavigationController *navi = [[UINavigationController alloc]initWithRootViewController:[ViewController new]];
navi.tabBarItem = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemContacts tag:100];
tabbar.viewControllers = @[navi];
self.window.rootViewController = tabbar;
self.window.backgroundColor = [UIColor clearColor];
return YES;
}


2)ViewController.m window切换代码实现

#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor blueColor];
self.title = @"首页";
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, 100, 300)];
label.backgroundColor = [UIColor redColor];
[self.view addSubview:label];

self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemBookmarks
target:self action:@selector(testAciton)];

}

-(void)testAciton
{
UIView *window = self.navigationController.tabBarController.view.superview;
[UIView animateWithDuration:1.0 animations:^{
window.center = CGPointMake(300, 240);
window.transform = CGAffineTransformScale(window.transform, 0.8, 0.8);
}];

//视图层级关系
UIView *layoutContainerView = window.subviews[0];
UIView *transitionView = layoutContainerView.subviews[0];
UIView *wrapperView = transitionView.subviews[0];
UIView *layoutView = wrapperView.subviews[0];
UIView *naviTransitionView = layoutView.subviews[0];
UIView *naviWrapperView = naviTransitionView.subviews[0];
UIView *uiview = naviWrapperView.subviews[0];
NSLog(@"%@",uiview.subviews);
//判断两个视图坐标是否重合或发生碰撞
//CGRectIntersectsRect(<#CGRect rect1#>, <#CGRect rect2#>);
}


3)RootViewController.m 右侧展现视图 代码实现

#import "RootViewController.h"
@interface RootViewController ()
@end
@implementation RootViewController
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor yellowColor];

UIButton *btn = [UIButton buttonWithType:UIButtonTypeCustom];
btn.frame = CGRectMake(10, 100, 300, 50);
btn.backgroundColor = [UIColor whiteColor];
[self.view addSubview:btn];
[btn addTarget:self action:@selector(clickAction) forControlEvents:UIControlEventTouchUpInside];
}
-(void)clickAction
{
NSLog(@"==============");
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: