独特的tabbar设计

Question

我需要编写一个唯一的标签栏，其中心标签比其他标签高得多，但是，较高标签左侧和右侧的区域不是标题栏的一部分。

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

Answer 1

注意：您需要找到中心标签，并为中心标签执行相同的操作。

您可以尝试这种方式在选择标签栏项目时在标签栏上显示自定义视图：或者您可以按照另一种不同的方式从此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个选项卡的代码。