ios - Draw border of certain color around colored UIImage in tab bar -

in order understand problem start short description of goal:

in center of tab bar deliberately use big image (a circle) extends on tab bar (the tab bar's background color white) laps on top border of tab bar. since uitabbaritems' default color light gray (apparently neither uicolor.lightgray nor .darkgray) , change color of (and this) uitabbaritem (or rather image considering thing can seen of uitabbaritem) white i've used following extension/function works fine:

extension uiimage {     func tabbarimagewithcustomtint(tintcolor: uicolor) -> uiimage {         uigraphicsbeginimagecontextwithoptions(self.size, false, self.scale)         let context: cgcontext = uigraphicsgetcurrentcontext()!         context.translateby(x: 0, y: self.size.height)         context.scaleby(x: 1.0, y: -1.0)         context.setblendmode(cgblendmode(rawvalue: 1)!)         let rect: cgrect = cgrect(x: 0, y: 0, width:  self.size.width, height: self.size.height)         context.clip(to: rect, mask: self.cgimage!)         tintcolor.setfill()         context.fill(rect)         var newimage: uiimage = uigraphicsgetimagefromcurrentimagecontext()!         uigraphicsendimagecontext()         newimage = newimage.withrenderingmode(uiimagerenderingmode.alwaysoriginal)         return newimage     } } 

link question found extension

as both tint color of image , background color of tab bar white, add border of red color now white image. luckily, managed find question on stackoverflow answered question (although must add not entirely content extension because leaves small space between uiimage , border):

extension uiimage {     func roundedimagewithborder(width: cgfloat, color: uicolor) -> uiimage? {         let square = cgsize(width: min(size.width, size.height) + width * 2, height: min(size.width, size.height) + width * 2)         let imageview = uiimageview(frame: cgrect(origin: cgpoint(x: 0, y: 0), size: square))         imageview.contentmode = .center         imageview.image = self         imageview.layer.cornerradius = square.width/2         imageview.layer.maskstobounds = true         imageview.layer.borderwidth = width         imageview.layer.bordercolor = color.cgcolor         uigraphicsbeginimagecontextwithoptions(imageview.bounds.size, false, scale)         guard let context = uigraphicsgetcurrentcontext() else { return nil }         imageview.layer.render(in: context)         let result = uigraphicsgetimagefromcurrentimagecontext()         uigraphicsendimagecontext()         return result     } } 

my problem if use function consecutively this...:

let tabrecordbutton = uiimage(named: "circle").tabbarimagewithcustomtint(tintcolor: .white).roundedimagewithborder(width: 1, color: .red) 

..., border is drawn uitabbaritem's tint color goes default gray aforementioned (not border red).

so question: there way can both, i.e. color image white , border red in uitabbar?

you have add line result = result.withrenderingmode(uiimagerenderingmode.alwaysoriginal) in second extension well, if omit line image take tint tabbar, original issue

replace roundedimagewithborder extension method implementation one

func roundedimagewithborder(width: cgfloat, color: uicolor) -> uiimage? {         let square = cgsize(width: min(size.width, size.height) + width * 2, height: min(size.width, size.height) + width * 2)         let imageview = uiimageview(frame: cgrect(origin: cgpoint(x: 0, y: 0), size: square))         imageview.contentmode = .center         imageview.image = self         imageview.layer.cornerradius = square.width/2         imageview.layer.maskstobounds = true         imageview.layer.borderwidth = width         imageview.layer.bordercolor = color.cgcolor         uigraphicsbeginimagecontextwithoptions(imageview.bounds.size, false, scale)         guard let context = uigraphicsgetcurrentcontext() else { return nil }         imageview.layer.render(in: context)         var result = uigraphicsgetimagefromcurrentimagecontext()         uigraphicsendimagecontext()         result = result?.withrenderingmode(uiimagerenderingmode.alwaysoriginal)         return result     } 

testing

override func viewdidload() {     super.viewdidload()     // additional setup after loading view, typically nib.     self.tabbaritem.selectedimage = uiimage(named: "icono-menu")?.tabbarimagewithcustomtint(tintcolor: uicolor.magenta).roundedimagewithborder(width: 1, color: uicolor.blue)     self.tabbarcontroller?.tabbar.tintcolor = uicolor.red //note tintcolor of tabbar red } 

result