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

iOS中的UITabBarController(类似于微信首页,上面是标题,下面是联系人,通讯录等)

2016-04-14 00:00 417 查看
UITabBarController

新建三个界面,每个界面上都有一个导航栏,最终的结果是类似于微信和QQ的首页,顶上是一横栏,下面分开分别是联系人,发现,设置等,在这里我们下面就是3个栏目

AppDelegate.m页面

#import "AppDelegate.h"
#import "oneViewController.h"
#import "twoViewController.h"
#import "threeViewController.h"

@interface AppDelegate (){
UITabBarController *myTabBar;
UIImage *img;
UIImageView *imgV;
}

@end

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {

//新建三个界面,每个界面上都有一个导航栏,最终的结果是类似于微信和QQ的首页,顶上是一横栏,下面分开分别是联系人,发现,设置等,在这里我们下面就是3个栏目
oneViewController *oneVC = [[oneViewController alloc]init];
UINavigationController *nav1 = [[UINavigationController alloc]initWithRootViewController:oneVC];

twoViewController *twoVC = [[twoViewController alloc]init];
UINavigationController *nav2 = [[UINavigationController alloc]initWithRootViewController:twoVC];

threeViewController *threeVC = [[threeViewController alloc]init];
UINavigationController *nav3 = [[UINavigationController alloc]initWithRootViewController:threeVC];

//将三个导航栏添加到数组中
NSArray *a = @[nav1,nav2,nav3];

//新建一个UITabBarController
myTabBar = [[UITabBarController alloc]init];

//添加代理   !!!注意在.h文件中引入代理<>
myTabBar.delegate = self;

//设置UITabBarController的颜色
[myTabBar.tabBar setTintColor:[UIColor redColor]];

//将含有三个导航栏的数组添加到UITabBarController中
myTabBar.viewControllers = a;

//设置window的颜色
self.window.backgroundColor = [UIColor yellowColor];
//设置window的根视图是UITabBarController
self.window.rootViewController = myTabBar;

//设置window可建可操作
[self.window makeKeyAndVisible];

//这一步是箭头图片的方法
[self addImageView:nil];

return YES;
}

//计算箭头图片横坐标起始点的位置(下面方法中X的位置)
-(float)horizontalX:(NSInteger)index{
//计算下面每一个栏目的距离
float horizontalXDistance = myTabBar.tabBar.frame.size.width/myTabBar.tabBar.items.count;
//找到箭头图片的左边的X轴坐标
float leftX = horizontalXDistance/2 - img.size.width/2;

//点击后下次图片左边X轴坐标到达的目标位置
float changeX = index * horizontalXDistance + leftX;

return changeX;

}

//示例:在UITabBarController下面的三个分栏上添加箭头图片,箭头指向一个栏目的中间,点击另一个栏目,则指向另一个栏目中间
-(void)addImageView:(id)sender{
img = [UIImage imageNamed:@"up4"];

/**
这里有点复杂,确定imgV的位置和大小时:
位置:X->我们用上面的方法计算
位置:Y->屏幕的高 - myTabBar的高 - 图片自身的高
大小:X->图片自身的宽
大小:Y->图片自身的高
*/
imgV = [[UIImageView alloc]initWithFrame:CGRectMake([self horizontalX:0], self.window.frame.size.height-myTabBar.tabBar.frame.size.height-img.size.height, img.size.width, img.size.height)];
imgV.image = img;

imgV.backgroundColor = [UIColor blackColor];

[self.window addSubview:imgV];

}

//UITabBarController的代理方法
- (void)tabBarController:(UITabBarController *)tabBarController didSelectViewController:(UIViewController *)viewController{

//判断点击了下面第几个栏目
NSLog(@"%lu", (unsigned long)tabBarController.selectedIndex);

//--------------------动画的第一种方法----------------------
//在界面上添加一个动画,名字随便起
[UIView beginAnimations:@"no" context:nil];
//没有动画
[UIView animateWithDuration:0.3 animations:^{
nil;
}];
//每次传入计算X距离的方法是,传入:点击了哪一个栏目
float x = [self horizontalX:tabBarController.selectedIndex];
CGRect frame = imgV.frame;

frame.origin.x = x;
imgV.frame = frame;
[UIView commitAnimations];

//--------------------动画的第二种方法----------------------
//iOS9.0以后不建议使用
[UIView animateWithDuration:0.4 animations:^{
float x = [self horizontalX:tabBarController.selectedIndex];
CGRect frame = imgV.frame;
frame.origin.x = x;
imgV.frame = frame;
} completion:^(BOOL finished) {
UIAlertView *aler = [[UIAlertView alloc]initWithTitle:@"suibian" message:nil delegate:self cancelButtonTitle:nil otherButtonTitles:@"ok", nil];
}];

}


oneViewController.m页面
#import "oneViewController.h"

@interface oneViewController (){
UIButton *myButton;
}

@end

@implementation oneViewController

//分别在三个界面中实现init方法
-(instancetype)init{
//如果当前的init等于父类的init
if (self = [super init]) {
//则当前导航栏的文字(上边)等于主页
self.title = @"主页";

//设置没有点击UITabBarController时的图片(透明镂空图)
[self.tabBarItem setImage:[UIImage imageNamed:@"6"]];

//设置点击了UITabBarController后的图片
[self.tabBarItem setSelectedImage:[UIImage imageNamed:@"7"]];

//系统自带的UITabBarController(有各种各样的,比如下载图标等等)
UITabBarItem *itm = [[UITabBarItem alloc]initWithTabBarSystemItem:UITabBarSystemItemDownloads tag:10];
self.tabBarItem = itm;

//几条消息没阅读的小红点
self.tabBarItem.badgeValue = @"new";

//可以变UITabBarController下边分栏上的文字内容,(可以和上面不一样)
[self.tabBarItem setTitle:@"悟空"];

}

return self;

}

- (void)viewDidLoad {
[super viewDidLoad];

//在这个界面上我们可以设置一个Button
myButton = [[UIButton alloc]initWithFrame:CGRectMake(100, 100, 50, 50)];
myButton.backgroundColor = [UIColor redColor];
//透明度
myButton.alpha = 1;
[myButton addTarget:self action:@selector(haha:) forControlEvents:UIControlEventTouchUpInside];
[self.view addSubview:myButton];

}

//Button的方法
-(void)haha:(id)a{
//如果点击了Button,则Button自己就会慢慢消失(变透明)
[UIView animateWithDuration:0.9 animations:^{
myButton.alpha = 0.0;
}];

}


twoViewController.m页面
#import "twoViewController.h"

@interface twoViewController ()

@end

@implementation twoViewController

-(instancetype)init{
if (self = [super init]) {
self.title = @"联系人";
//设置当前UITabBarController下面分栏处的图片
//其实实际中经常点击和没点击都是一个图片,只是点击后会变亮或变色来区分
[self.tabBarItem setImage:[UIImage imageNamed:@"8"]];

}

return self;

}


threeViewController.m页面
#import "threeViewController.h"

@interface threeViewController ()

@end

@implementation threeViewController

-(instancetype)init{
if (self = [super init]) {
self.title = @"设置";
}

return self;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: