独特的标签栏设计

Question

我需要编写一个独特的标签栏，其中心标签远高于其他标签，但是较高标签的左右区域不属于该栏。

寻找从哪里开始的建议，从来没有一个标签栏突出到上面的视图空间中。

Answer 1

UITabBarController 只是一个 UIViewController，它包含其他几个 UIViewControllers 并管理当前存在的一个。

它将其子视图控制器的view 放置为其自己的view 的subview，然后将UIView 放置在标签栏的for 上。

使用您自己的自定义控制器重新创建它会相对容易。

您需要一组视图控制器来管理为“选项卡”，或者甚至只是每个选项卡的特定视图控制器。您需要一个视图来充当您的标签栏。

视图上会有按钮，然后触发控制器中的操作。然后这些操作可以更改当前显示的选项卡。

这听起来像是很多工作，但实际上不是，而且比尝试更改标签栏边界之外的图像等要简单得多......

Answer 2

注意：您需要找到中心标签，并为中心标签做同样的事情。

当您选择标签栏项目时，您可以尝试通过这种方式在标签栏上显示自定义视图：或者您可以按照另一种不同的方式从 link: 中提升选定的标签栏项目

在您的标签栏viewDidAppear 方法中，将标签设置为标签栏项目：

-(void)viewWillAppear:(BOOL)animated{

    [super viewWillAppear:animated];


    [[[self.viewControllers objectAtIndex:0]tabBarItem]setTag:0];
    [[[self.viewControllers objectAtIndex:1]tabBarItem]setTag:1];

}

当你选择一个标签栏项目时，这个方法会被命中，所以你自定义这个方法：

-(void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item{

if (item.tag==0) {

    [[self.view viewWithTag:1]removeFromSuperview];

    mycustomView  *  maskView= [[[NSBundle mainBundle] loadNibNamed:@"customView" owner:self options:nil] firstObject];

    [maskView  setFrame:CGRectMake(tabBar.frame.origin.x, tabBar.frame.origin.y+tabBar.frame.size.height-80, maskView.frame.size.width,maskView.frame.size.height)];

   [maskView setAlpha:0.5];
    maskView.tag=2;
    [maskView setColor:[UIColor redColor]];
    [self.view addSubview:maskView];

}

if (item.tag==1) {

    [[self.view viewWithTag:2]removeFromSuperview];

 mycustomView *  maskView= [[[NSBundle mainBundle] loadNibNamed:@"customView" owner:self options:nil] firstObject];

    [maskView  setFrame:CGRectMake(tabBar.frame.origin.x+tabBar.frame.size.width/2, tabBar.frame.origin.y+tabBar.frame.size.height-80, maskView.frame.size.width,maskView.frame.size.height)];

    [maskView setAlpha:0.5];
    [maskView setColor:[UIColor greenColor]];
    maskView.tag=1;

    [self.view addSubview:maskView];

}

}

这是自定义的 UIView 文件：

@interface mycustomView : UIView

@property (nonatomic,assign) UIColor *color;

@end

和自定义视图 .m 文件：

- (void)drawRect:(CGRect)frame {

    UIBezierPath* bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.5, CGRectGetMinY(frame) + 39.5)];
    [bezierPath addCurveToPoint: CGPointMake(7.5, 87.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 1.5, CGRectGetMinY(frame) + 80.5) controlPoint2: CGPointMake(7.5, 87.5)];
    [bezierPath addLineToPoint: CGPointMake(213.5, 87.5)];
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 206.5, CGRectGetMinY(frame) + 39.5)];
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 173.5, CGRectGetMinY(frame) + 11.5)];
    [bezierPath addLineToPoint: CGPointMake(104.5, 6.5)];
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 38.5, CGRectGetMinY(frame) + 11.5)];
    [bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 0.5, CGRectGetMinY(frame) + 39.5)];
    [self.color setFill];
    [bezierPath fill];
    [UIColor.blackColor setStroke];
    bezierPath.lineWidth = 1;
    [bezierPath stroke];


}

结果会是这样的：

请注意，您需要注意为添加到每个标签栏项目上的视图赋予不同的标签值，并为每个自定义视图计算适当的框架大小，以完全适合标签栏项目。这个例子，我只写了 2 个标签的代码。