iOS：如何在UITabBarItem中添加下划线

Question

我正在开发一个应用程序，需要在UITabbarItem中添加下划线。

因此，我想在iOS默认的UITabbarcontroller中在所选UITabbarItem下面添加下划线。

我已经创建了UITabbarcontroller的子类，但没有找到任何方法来添加下划线。

我想做像下面图片一样的效果。

如果有人对此有任何想法，请在这里分享。

- Malav Soni

Answer 1

Swift 3的代码

在didFinishLaunching中调用方法：

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
        // Override point for customization after application launch.
        UITabBar.appearance().selectionIndicatorImage = getImageWithColorPosition(color: UIColor.blue, size: CGSize(width:(self.window?.frame.size.width)!/4,height: 49), lineSize: CGSize(width:(self.window?.frame.size.width)!/4, height:2))
        return true
    }

方法：

func getImageWithColorPosition(color: UIColor, size: CGSize, lineSize: CGSize) -> UIImage {
        let rect = CGRect(x:0, y: 0, width: size.width, height: size.height)
        let rectLine = CGRect(x:0, y:size.height-lineSize.height,width: lineSize.width,height: lineSize.height)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        UIColor.clear.setFill()
        UIRectFill(rect)
        color.setFill()
        UIRectFill(rectLine)
        let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }

- ajay_nasa

---

你的代码帮了我很多忙。我需要更多的自定义，需要在左上角和右上角有圆角。我该怎么做？ - Shangari C

如何在顶部完成？我需要在所选的tabItem上方显示该行。 - iDeveloper

Answer 2

请尝试这个方法。我曾在我的应用程序中使用过，希望它也能帮到你。

这是我如何通过编程方式创建选项卡栏的方法：

      UITabBarController *tab = [[UITabBarController alloc]init];
      ViewController1 *v1 = [[ViewController1 alloc]init];
      ViewController1 *v2 = [[ViewController1 alloc]init];
      ViewController1 *v3 = [[ViewController1 alloc]init];
      ViewController1 *v4 = [[ViewController1 alloc]init];

      tab.viewControllers = [NSArray
arrayWithObjects:v1,v2,v3,v4,nil];

      [[tab.tabBar.items objectAtIndex:0]setImage:[UIImage imageNamed:@""]];
      [[tab.tabBar.items objectAtIndex:1]setImage:[UIImage imageNamed:@""]];
      [[tab.tabBar.items objectAtIndex:2]setImage:[UIImage imageNamed:@""]];
      [[tab.tabBar.items objectAtIndex:3]setImage:[UIImage imageNamed:@""]];
      int divide = 4;
      if([UIDevice currentDevice].userInterfaceIdiom ==UIUserInterfaceIdiomPad)
          divide =6;
      }
      UIView *view = [[UIView alloc]initWithFrame:CGRectMake(tab.tabBar.frame.origin.x,tab.tabBar.frame.origin.y, self.view.frame.size.width/divide, 56)];

      UIImageView *border = [[UIImageView alloc]initWithFrame:CGRectMake(view.frame.origin.x,view.frame.size.height-6, self.view.frame.size.width/divide, 6)];  
      border.backgroundColor = “your color”;
      [view addSubview:border];
      [tab.tabBar setSelectionIndicatorImage:[self changeViewToImage:view]];

//This is the method that will draw the underline
-(UIImage ) changeViewToImage : (UIView ) viewForImage {
      UIGraphicsBeginImageContext(viewForImage.bounds.size);
      [viewForImage.layer   renderInContext:UIGraphicsGetCurrentContext()];
      UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
      UIGraphicsEndImageContext();
      return img;
}

- AP7

Answer 3

将此代码放入Appdelegate中。

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
// Override point for customization after application launch.

UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake([UITabBar appearance].frame.origin.x,[UITabBar appearance].frame.origin.y, [[UIScreen mainScreen] bounds].size.width/3, 56)];

UIImageView *border = [[UIImageView alloc]initWithFrame:CGRectMake(view1.frame.origin.x,view1.frame.size.height-6, [[UIScreen mainScreen] bounds].size.width/3, 6)];
border.backgroundColor = [UIColor colorWithRed:255.0f/255.0f green:105.0f/255.0f blue:84.0f/255.0f alpha:1.0f];
[view1 addSubview:border];
UIImage *img=[self ChangeViewToImage:view1];
[[UITabBar appearance] setSelectionIndicatorImage:img];
[[UITabBar appearance] setTintColor: [UIColor colorWithRed:255.0f/255.0f green:105.0f/255.0f blue:84.0f/255.0f alpha:1.0f]];

return YES;
}
-(UIImage * ) ChangeViewToImage : (UIView *) viewForImage
{
UIGraphicsBeginImageContext(viewForImage.bounds.size);
[viewForImage.layer renderInContext:UIGraphicsGetCurrentContext()];
UIImage *img = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return img;
}

- Premkumar

Answer 4

在AppDelegate的didFinishLaunching方法中，向UITabbar添加全局样式。

UITabBar.appearance().selectionIndicatorImage = UIImage.getImageWithColorPosition(UIColor.whiteColor(), size: CGSizeMake(kScreenWidth/4, 49), lineSize: CGSizeMake(kScreenWidth/4, 2))

class func getImageWithColorPosition(color: UIColor, size: CGSize, lineSize: CGSize) -> UIImage {
    let rect = CGRectMake(0, 0, size.width, size.height)
    let rectLine = CGRectMake(0, size.height-lineSize.height, lineSize.width, lineSize.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    UIColor.clearColor().setFill()
    UIRectFill(rect)
    color.setFill()
    UIRectFill(rectLine)
    let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}

编辑 Swift 3

func getImageWithColorPosition(color: UIColor, size: CGSize, lineSize: CGSize) -> UIImage {

    let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
    let rectLine = CGRect(x: 0, y: size.height-lineSize.height, width: lineSize.width, height: lineSize.height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    UIColor.clear.setFill()
    UIRectFill(rect)
    color.setFill()
    UIRectFill(rectLine)
    let image = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()
    return image
}

- Kit

Answer 5

使用以下代码为任何UIView对象添加底部边框，只需将view替换为您的UITabbarItem对象即可：

CALayer *bottomBorder = [CALayer layer];
bottomBorder.frame = CGRectMake(0, view.frame.size.height - 1, view.frame.size.width - 1, 1);
bottomBorder.backgroundColor = [UIColor lightGrayColor].CGColor;
[view.layer addSublayer:bottomBorder];

- Nishant

---

你自己检查过这个解决方案吗？UITabBarItem不继承自UIView，也没有layer属性。 - Eimantas