I want to display a little circle point as indicator to the selected UITabBarItem. How can i do this?
I use a custom UITabBarController. It looks like this:
import UIKit
class EventTabBar: UITabBarController {
override func awakeFromNib() {
tabBar.barTintColor = UIColor.white
tabBar.tintColor = UIColor(red: 79/255, green: 122/255, blue: 198/255, alpha: 1)
tabBar.unselectedItemTintColor = UIColor(red: 198/255, green: 203/255, blue: 209/255, alpha: 1)
tabBar.isTranslucent = false
tabBar.shadowImage = UIImage()
tabBar.backgroundImage = UIImage()
//Add Shadow to TabBar
tabBar.layer.shadowOpacity = 0.12
tabBar.layer.shadowOffset = CGSize(width: 0, height: 2)
tabBar.layer.shadowRadius = 8
tabBar.layer.shadowColor = UIColor.black.cgColor
tabBar.layer.masksToBounds = false
}
}
Can i use the selectionIndicatorImage to do this?
Hope you can help me. Thanks for your answer
let size = CGSize(width: tabController.tabBar.frame.width / (amount of items),
height: tabController.tabBar.frame.height)
let dotImage = UIImage().createSelectionIndicator(color: .blue, size: size, lineHeight: 7)
tabController.tabBar.selectionIndicatorImage = dotImage
-
extension UIImage {
func createSelectionIndicator(color: UIColor, size: CGSize, lineHeight: CGFloat) -> UIImage {
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
let innerRect = CGRect(x: (size.width/2) - lineHeight/2,
y: size.height - lineHeight - 2,
width: lineHeight,
height: lineHeight)
let path = UIBezierPath(roundedRect: innerRect, cornerRadius: lineHeight/2)
path.fill()
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
It's pretty easy actually. TabBarButton has two properties to set image, one is TabBarItem.image and another is TabBarItem.selectedImage set an image without the circle point for TabBarItem.image property and set an image with circle point for TabBarItem.selectedImage property.
If you want to set only the circle point for selected state, set the normal image property to UIImage(). Hope this solves the problem.
scanTabBarItem.image = UIImage.fontAwesomeIcon(name: .qrcode, textColor: .white, size: CGSize(width: 30, height: 30))
scanTabBarItem.selectedImage = UIImage.fontAwesomeIcon(name: .addressBook, textColor: .white, size: CGSize(width: 30, height: 30))
if not to show any image normally,
scanTabBarItem.image = UIImage()
Related
I change background color into tab bar when selected, but in iPhone X this is doesn't work.
Screen Shot
My code:
class TabbarVC: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
let numberOfItems = CGFloat(tabBar.items!.count)
UITabBar.appearance().selectionIndicatorImage = UIImage().makeImageWithColorAndSize(color: #colorLiteral(red: 0.1294117719, green: 0.2156862766, blue: 0.06666667014, alpha: 1), size: CGSize(width:tabBar.frame.width/numberOfItems,height:(tabBar.frame.height)))
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(true)
tabBar.invalidateIntrinsicContentSize()
tabBar.superview?.setNeedsLayout()
tabBar.superview?.layoutSubviews()
}
}
extension UIImage {
func makeImageWithColorAndSize(color: UIColor, size: CGSize) -> UIImage {
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(CGRect(x:0,y:0,width:size.width,height:size.height))
let image = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return image!
}
}
How change selected bckg color with automatic height?
Any help, thanks!
You can change selected TabBar background color with below code.
private func changeTabBarBackground(){
//Change Background Color of Selected Image
let numberOfItems = CGFloat(5)
let tabBarItemSize = CGSize(width: (self.tabBar.frame.width) / numberOfItems,
height: (self.tabBar.frame.height))
self.tabBar.selectionIndicatorImage
= UIImage.imageWithColor(color: UIColor.green,
size: tabBarItemSize).resizableImage(withCapInsets: .zero)
self.tabBar.frame.size.width = (self.view.frame.width) + 4
self.tabBar.frame.origin.x = -2
}
P.S: Of course you should change the numberOfItems to your desire number.
Try this code
let numberOfItems = CGFloat(tabBar.items!.count)
let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)
tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor.red, size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)
tabBar.frame.size.width = self.view.frame.width + 4
tabBar.frame.origin.x = -2
I have used simple UIButton with my usecase being: 3 different background colors for states - Normal, Highlighted and Disabled. I have achieved this by the following code:
#IBOutlet var myButton: UIButton!{
didSet{
myButton.setBackgroundImage(UIImage.imageWithColor(color: #colorLiteral(red: 0, green: 0.3803921569, blue: 0.6196078431, alpha: 1)), for: .normal)
myButton.setBackgroundImage(UIImage.imageWithColor(color: #colorLiteral(red: 0, green: 0.4745098039, blue: 0.7725490196, alpha: 1)), for: .highlighted)
myButton.setBackgroundImage(UIImage.imageWithColor(color: .gray), for: .disabled)
}
}
Extension function for UIImage---
class func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 0.5)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
color.setFill()
UIRectFill(rect)
let image : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
But my button appears as follows in iphone8 and iphone X
Instead of gray, it is giving me a gradient of gray and blue
Recently, I have faced with this issue too, using exactly the same code. Solution was pretty simple: in your extension, change CGRect height value to 1.0 instead of 0.5. Now, everything will be rendered properly on every device. Strange issue, maybe somebody has ideas, why it works that way?
Your updated extension code:
class func imageWithColor(color: UIColor) -> UIImage {
let rect = CGRect(x: 0.0, y: 0.0, width: 1.0, height: 1.0)
UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
color.setFill()
UIRectFill(rect)
let image : UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
func addGradientToBackground() {
let layer = CAGradientLayer()
layer.frame = CGRect(origin: .zero, size: self.frame.size)
layer.colors = [color1, color2, color3]
layer.startPoint = CGPoint(x: 0.0, y: 0.0)
layer.endPoint = CGPoint(x: 1.0, y: 0.0)
view.layer.insertSublayer(layer, at: 0)
}
Instead of color1, color2, color3 you can add your color respectively.
If you aiming to let the button to has a solid background color, you would need to change:
myButton.setBackgroundImage(UIImage.imageWithColor(color: .gray), for: .disabled)
Note that this line of code doesn't compile for me.
to:
myButton.backgroundColor = .gray
There is no need to set a background image for the button in your case, instead you should change directly the button background color (solid).
I am trying to use custom color in MFMessageComposeViewController. I thought it will be okay to use:
#IBAction func sendMessage(sender: AnyObject) {
let messageVC = MFMessageComposeViewController()
messageVC.body = "Enter a message";
messageVC.recipients = [phoneString]
messageVC.messageComposeDelegate = self;
//color
UINavigationBar.appearance().barTintColor = UIColor(hexString: "fec13e")
UINavigationBar.appearance().tintColor = UIColor.whiteColor()
self.presentViewController(messageVC, animated: false, completion: nil)
}
but its not working.
You can use the below code to change the color of MFMessageComposeViewController navigation color.
let size = CGSize(width: (self.window?.frame.size.width)!, height: 64)
let image = self.getImageWithColor(UIColor .init(colorLiteralRed: 40.0/255.0, green: 140.0/255.0, blue: 204.0/255.0, alpha: 1.0), size:size)
UINavigationBar.appearance().setBackgroundImage(image.resizableImage(withCapInsets: UIEdgeInsets.zero, resizingMode: .stretch), for: .default)
Where getImageWithColor is the func which return image of desired color
func getImageWithColor(_ color: UIColor, size: CGSize) -> UIImage
{
let rect = CGRect(origin: CGPoint(x: 0, y: 0), size: CGSize(width: size.width, height: size.height))
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
This is what the project currently looks like
And this is the code that I use
func styleNavBar() {
let navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.tintColor = UIColor(red:1.0, green:1.0, blue:1.0, alpha:1.0)
navigationBarAppearace.titleTextAttributes = [NSForegroundColorAttributeName:UIColor(red:1.00, green:1.00, blue:1.00, alpha:1.0)]
navigationBarAppearace.translucent = true
navigationBarAppearace.backgroundColor = UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.3)
navigationBarAppearace.setBackgroundImage(UIImage(), forBarMetrics: .Default)}
I have tried to remove the following code, but then it looks like this.
navigationBarAppearace.setBackgroundImage(UIImage(), forBarMetrics: .Default)
My question is, how do I get the navbar to fill up to the top? and still have the same look
First, create an extension for UIImage which create image with solid color of specified size.
Keep this extension in any ViewController at class label
extension UIImage {
class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
then use the below method to customise your navbar
func styleNavBar() {
let navigationBarAppearace = UINavigationBar.appearance()
navigationBarAppearace.tintColor = UIColor(red:1.0, green:1.0, blue:1.0, alpha:1.0)
navigationBarAppearace.titleTextAttributes = [NSForegroundColorAttributeName:UIColor(red:1.00, green:1.00, blue:1.00, alpha:1.0)]
navigationBarAppearace.isTranslucent = true
let colorImage = UIImage.imageWithColor(color: UIColor(red: 0.0, green: 0.0, blue: 0.0, alpha: 0.3), size: CGSize(width: UIScreen.main.bounds.width, height: 64))
navigationBarAppearace.setBackgroundImage(colorImage, for: .default)
}
Hope this will solve your problem.
I'm using this code on my UINavigationBar to make it transparent. You can adjust it to your needs. In the picture there's a searchController in the titleView
if let topBar = self.navigationController?.navigationBar {
topBar.setBackgroundImage(UIImage(), forBarMetrics: .Default)
topBar.shadowImage = UIImage()
topBar.barTintColor = UIColor.clearColor()
topBar.tintColor = UIColor.whiteColor()
topBar.translucent = true
}
Here's what it looks like:
I want to make my navigation bar have a tinge of a colour but not go completely translucent.
Here is the code I have and their results:
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().translucent = true
UINavigationBar.appearance().barTintColor = UIColor(red: 0, green: 107/255, blue: 178/255, alpha: 0.5)
But if I turn the 'translucent' to false i.e use this code:
UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarMetrics: UIBarMetrics.Default)
UINavigationBar.appearance().shadowImage = UIImage()
UINavigationBar.appearance().translucent = false
UINavigationBar.appearance().barTintColor = UIColor(red: 0, green: 107/255, blue: 178/255, alpha: 0.5)
I get this result:
How do I make the bar have an alpha value of 0.5 or be 'part translucent'?
Thank you, any help will be appreciated.
I would set a translucent background image for the navigation bar.
Use this code:
UINavigationBar.appearance().setBackgroundImage(UIColor.green.toImage()?.imageWithAlpha(alpha: 0.5), for: .default)
Two extensions used:
Create an UIImage from UIColor:
extension UIColor {
func toImage() -> UIImage? {
return toImageWithSize(size: CGSize(width: 1, height: 1))
}
func toImageWithSize(size: CGSize) -> UIImage? {
UIGraphicsBeginImageContext(size)
if let ctx = UIGraphicsGetCurrentContext() {
let rectangle = CGRect(x: 0, y: 0, width: size.width, height: size.height)
ctx.setFillColor(self.cgColor)
ctx.addRect(rectangle)
ctx.drawPath(using: .fill)
let colorImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return colorImage
} else {
return nil
}
}
}
Create a new UIImage from an UIImage with a specified Alpha:
extension UIImage {
func imageWithAlpha(alpha: CGFloat) -> UIImage? {
UIGraphicsBeginImageContextWithOptions(size, false, scale)
draw(at: CGPoint.zero, blendMode: .normal, alpha: alpha)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return newImage
}
}