iOS TabBar 自定义
iOS TabBar 自定义
别情花如依丶 发表于7个月前
iOS TabBar 自定义
  • 发表于 7个月前
  • 阅读 19
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

如图,项目需求:

项目需求图

完成该 tabBar 需要对 TabBar 进行自定义.多数都会采用自定义 UITabBar 通过重写 layoutSubviews 方法实现,这种方法比较麻烦,对中间按钮点击事件特殊处理.

简单方式可以通过设置 UITabBarItem 的 Image 偏移量来实现这种效果:tabBarItem.imageInsets = UIEdgeInsetsMake(-15, 0, 15, 0);

如果中间按钮点击不需要跳转页面,则可通过代理方法:tabBarController:shouldSelectViewController:实现

线条采用 UIBezierPath 绘制,代码如下:

    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:CGPointMake(0, width / 2 * (1 - sin(M_PI / 12)))];
    [path addLineToPoint:CGPointMake((KScreenWidth -width ) / 2, width / 2 * (1 - sin(M_PI / 12)))];
    [path addArcWithCenter:CGPointMake(KScreenWidth / 2, width / 2 ) radius:width / 2 / cos(M_PI / 12) startAngle:(M_PI + M_PI / 12) endAngle:M_PI * 2 - M_PI / 12  clockwise:YES];
    [path addLineToPoint:CGPointMake(KScreenWidth, width / 2 * (1 - sin(M_PI / 12)))];
    CAShapeLayer *shapLayer = [CAShapeLayer layer];
    shapLayer.frame = CGRectMake(0, - width / 2 + 2, KScreenWidth, width / 2);
    shapLayer.strokeColor = kCOLORWITH_RGB(165, 165, 165).CGColor;
    shapLayer.lineWidth = 2;
    shapLayer.fillColor = [UIColor clearColor].CGColor;
    shapLayer.path = path.CGPath;
    [self.tabBar.layer addSublayer:shapLayer];

 

共有 人打赏支持
别情花如依丶
粉丝 5
博文 78
码字总数 20405
作品 6
×
别情花如依丶
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: