自定义UITabBar项目

时间:2014-05-02 06:42:35

标签: ios uitabbaritem

我为每个TabBar项目设计了一个简单的设计:

  • 背景颜色:

    firstTab width =屏幕的1/3(左)height = tabBarHeight   secondTab width =屏幕的1/3(中间)height = tabBarHeight   thirdTab width =屏幕的1/3(右)height = tabBarHeight

  • 以tabbaritem

  • 为中心的水平和垂直标题

我发现了有关如何更改整个标签栏背景的不同文章:

UIImage* tabBarBackground = [UIImage imageNamed:@"tabbar.png"];
[[UITabBar appearance] setBackgroundImage:tabBarBackground];

我发现每个tabbaritem选择的图像但是没有填满整个标签:

[[tabBarController.tabBar.items objectAtIndex:0] setFinishedSelectedImage:[UIImage imageNamed:@"tabbaritem.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"tabbaritem.png"]];

3 个答案:

答案 0 :(得分:2)

UITabBarItem *tab1 = [[UITabBarItem alloc] init];
tab1.image = [[UIImage imageNamed:@"home_icon.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
tab1.selectedImage = [[UIImage imageNamed:@"home_icon_selected.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

答案 1 :(得分:2)

更好的方法是创建UITabBarController

的子类

改变背景颜色,

 self.tabBar.backgroundColor = [UIColor redColor];

for tintColor

self.tabBar.barTintColor = [UIColor greenColor];

在'init'方法本身。

对于seetTitle

创建一个数组

//title

titleArray = [[NSMutableArray alloc]initWithObjects:@"Title 1",@"Title 2",@"Title 3", nil];

//image array

NSArray *imageArray = @[image1,image2,image3];



for (int i = 0; i< imageArray.count; i++)
  {
   UINavigationController *nav = [self.viewControllers objectAtIndex:i];
   [nav.tabBarItem setTitle:[titleArray objectAtIndex:i]];

   //You can adjust title position by adjust `titlePositionAdjustment`
   nav.tabBarItem.titlePositionAdjustment = UIOffsetMake(0, -15);

  //for add image on tabbr item for ios 7
  nav.tabBarItem.image = [[imageArray objectAtIndex:i]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

  }

在ios 6上添加图片

nav.tabBarItem.image = [imageArray objectAtIndex:i];

在ios 7中更改所选图像

nav.tabBarItem.image = [imageArray objectAtIndex:i];

for ios 6

nav.tabBarItem.selectedImage = [imageArraySelected objectAtIndex:i];

调整图像EdgeInset

nav.tabBarItem.imageInsets = UIEdgeInsetsMake(14,0.0, -14,-2);

添加标题Attibutes

[nav.tabBarItem setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor],NSForegroundColorAttributeName,[UIFont fontWithName:@"Helvetica-Bold" size:14.0f],NSFontAttributeName, nil] forState:UIControlStateNormal];

答案 2 :(得分:0)

你可以这样做

 UIImage *tabBackground = [[UIImage imageNamed:@"tabbg.png"]
 resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 0)];

 [[UITabBar appearance] setBackgroundImage:tabBackground];


 UITabBarItem *tabBarItem1 = [tabbar.items objectAtIndex:0];
 UITabBarItem *tabBarItem2 = [tabbar.items objectAtIndex:1];
 UITabBarItem *tabBarItem3 = [tabbar.items objectAtIndex:2];

 tabBarItem1.title = @"one";
 tabBarItem2.title = @"Two";
 tabBarItem3.title = @"Three";

 [tabbar setSelectedItem:[tabbar.items objectAtIndex:0]];
 [tabBarItem1 setFinishedSelectedImage:[UIImage imageNamed:@"one.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"one_active.png"]];
 [tabBarItem2 setFinishedSelectedImage:[UIImage imageNamed:@"Two".png"] withFinishedUnselectedImage:[UIImage imageNamed:@"Two_active.png"]];
    [tabBarItem3 setFinishedSelectedImage:[UIImage imageNamed:@"Three.png"] withFinishedUnselectedImage:[UIImage imageNamed:@"Three_active.png"]];