独特的标签栏设计

Posted 2023-03-13

【中文标题】独特的标签栏设计

【英文标题】：Unique tabbar design

【发布时间】：2015-10-02 12:36:08

【问题描述】：

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

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

【问题讨论】：

一种方法是在选定的选项卡上应用蒙版。

感谢您的回复，您能否就这个问题多说一点，没有看到面具如何为我提供所需的东西。

可以使用多种方式来制作遮罩。一种方法是创建一个 uiview 并将其添加到选项卡的正前方，并为该 uiview 提供自定义外观

我得到一个工作原型后会发布一个示例代码。

我发布了我的答案，p[lease check it @Rob

【参考方案1】：

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

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

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

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

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

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

【参考方案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 个标签的代码。

【讨论】：

我真的认为应该从UIView 中删除tag 属性，它只会导致糟糕的设计。

到目前为止，这是我觉得很容易删除 uiview 的唯一方法。但请提供更多信息，说明为什么使用标签是一种糟糕的设计？

我想更好的方法（稍微好一点）是保留对您正在添加和删除的视图的引用。更好的方法仍然是创建一个添加和删除视图本身的子类。什么的。

你可以创建一个`[ViewController: UITabBarItem] 的字典。