UIView Height Change Not Reflected in UI - ios

I have a UIView with embedded stack views containing labels and imageViews. This UIView is designed to expand in height when the text of one of the labels reaches a certain size. The label is set to lines = 0 and word wrap. I have confirmed that the height changes, but this isn't reflected in the UI.
This is the UIView with a standard size name label:
This is the UIView with an extended size name label. As you can see the "open" label is cut off:
This function determines the height of UIView:
func viewHeight(_ locationName: String) -> CGFloat {
let locationName = tappedLocation[0].name
var size = CGSize()
if let font = UIFont(name: ".SFUIText", size: 17.0) {
let fontAttributes = [NSAttributedStringKey.font: font]
size = (locationName as NSString).size(withAttributes: fontAttributes)
}
let normalCellHeight = CGFloat(96)
let extraLargeCellHeight = CGFloat(normalCellHeight + 20.33)
let textWidth = ceil(size.width)
let cellWidth = ceil(nameLabel.frame.width)
if textWidth > cellWidth {
return extraLargeCellHeight
} else {
return normalCellHeight
}
}
And this function applies it:
func mapView(_ mapView: MKMapView, didSelect view: MKAnnotationView) {
annotation = view.annotation as! MKPointAnnotation
horizontalStackView.addBackground(color: UIColor.black)
// Add the tapped location to the tappedLocation array
for location in locations {
if location.latitude == annotation.coordinate.latitude && location.longitude == annotation.coordinate.longitude {
tappedLocation.append(location)
}
}
locationView.frame.size.height = viewHeight(tappedLocation[0].name)
print("locationView height = \(locationView.frame.height)")
print("locationView x = \(locationView.frame.origin.x)")
print("locationView y = \(locationView.frame.origin.y)")
print("Frame height: \(locationView.frame.size.height)")
print("Frame widthL \(locationView.frame.size.width)")
YelpClient.sharedInstance().loadImage(tappedLocation[0].imageUrl, completionHandler: { (image) in
performUIUpdatesOnMain {
self.thumbnailImageView.layer.cornerRadius = 10
self.thumbnailImageView.clipsToBounds = true
self.thumbnailImageView.layer.borderColor = UIColor.white.cgColor
self.thumbnailImageView.layer.borderWidth = 1
self.thumbnailImageView.image = image
self.nameLabel.text = self.tappedLocation[0].name
self.nameLabel.textColor = UIColor.white
self.priceLabel.text = self.tappedLocation[0].price
self.priceLabel.textColor = UIColor.white
self.displayRating(location: self.tappedLocation[0])
}
YelpClient.sharedInstance().getOpeningHoursFromID(id: self.tappedLocation[0].id, completionHandlerForOpeningHours: { (isOpenNow, error) in
if let error = error {
print("There was an error: \(String(describing: error))")
}
if let isOpenNow = isOpenNow {
performUIUpdatesOnMain {
if isOpenNow {
self.openLabel.text = "Open"
self.openLabel.textColor = UIColor.white
} else {
self.openLabel.text = "Closed"
self.openLabel.textColor = UIColor(red: 195/255, green: 89/255, blue: 75/255, alpha: 1.0)
self.openLabel.font = UIFont.systemFont(ofSize: 17.0, weight: .semibold)
}
}
}
})
})
locationView.isHidden = false
}
This print statement indicates the height of the UIView is changing height, but the x and y origins are not changing (the view should extend upwards to accommodate the word wrap in the name label):

Manual height manipulation doesn't work in autolayout. If you want to increase the height, create an IBOutlet to a height constraint and set its constant value. You can even animate it.

Related

Align label's center.x with image inside tabBar's imageView

I need to get a label's center.x directly aligned with the image inside a tabBar's imageView. Using the below code the label is misaligned, instead of the label's text "123" being directly over the bell inside the tabBar, it's off to the right.
guard let keyWindow = UIApplication.shared.windows.first(where: { $0.isKeyWindow }) else { return }
guard let fourthTab = tabBarController?.tabBar.items?[3].value(forKey: "view") as? UIView else { return }
guard let imageView = fourthTab.subviews.compactMap({ $0 as? UIImageView }).first else { return }
guard let imageViewRectInWindow = imageView.superview?.superview?.convert(fourthTab.frame, to: keyWindow) else { return }
let imageRect = AVMakeRect(aspectRatio: imageView.image!.size, insideRect: imageViewRectInWindow)
myLabel.text = "123"
myLabel.textAlignment = .center // I also tried .left
myLabel.center.x = imageRect.midX
myLabel.center.y = UIScreen.main.bounds.height - 74
myLabel.frame.size.width = 50
myLabel.frame.size.height = 21
print("imageViewRectInWindow: \(imageViewRectInWindow)") // (249.99999999403948, 688.0, 79.00000000298022, 48.0)
print("imageRect: \(imageRect)") // (265.4999999955296, 688.0, 48.0, 48.0)
print("myLabelRect: \(myLabel.frame)") // (289.4999999955296, 662.0, 50.0, 21.0)
It might be a layout issue, as in, setting the coordinates before everything is laid out. Where do you call the code from? I was able to get it to work with the following, but got strange results with some if the functions you use, so cut out a couple of them. Using the frame of the tabview worked for me, and calling the coordinate setting from the view controller's viewDidLayoutSubviews function.
class ViewController: UIViewController {
var myLabel: UILabel = UILabel()
var secondTab: UIView?
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
self.view.addSubview(myLabel)
myLabel.textColor = .black
myLabel.text = "123"
myLabel.textAlignment = .center // I also tried .left
myLabel.frame.size.width = 50
myLabel.frame.size.height = 21
secondTab = tabBarController?.tabBar.items?[1].value(forKey: "view") as? UIView
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
guard let secondTab = secondTab else {
return
}
myLabel.center.x = secondTab.frame.midX
myLabel.center.y = UIScreen.main.bounds.height - 70
}
}
Try below code to return a centreX by tabbar item index.
extension UIViewController {
func centerX(of tabItemIndex: Int) -> CGFloat? {
guard let tabBarItemCount = tabBarController?.tabBar.items?.count else { return nil }
let itemWidth = view.bounds.width / CGFloat(tabBarItemCount)
return itemWidth * CGFloat(tabItemIndex + 1) - itemWidth / 2
}
}

Resize font and frame with pinchGesture when textView isScrollEnabled = false

I have used pinchGesture to zoom-in and zoom-out textView using below code.
added pinchGesture to textView
let pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(self.handlePinch))
pinchGesture.delegate = self
view.addGestureRecognizer(pinchGesture)
delagate
#IBAction func handlePinch(recognizer:UIPinchGestureRecognizer) {
if let view = recognizer.view as? UITextView {
view.transform = view.transform.scaledBy(x: recognizer.scale, y: recognizer.scale)
recognizer.scale = 1
}
}
Result
Here is the possible solution i have applied but still not able to find perfect solution.
#IBAction func handlePinch(recognizer:UIPinchGestureRecognizer) {
if let textView = recognizer.view as? UITextView {
let font = textView.font!
var pointSize = font.pointSize
let fontName = font.fontName
pointSize = ((recognizer.velocity > 0) ? 1 : -1) * 1 + pointSize;
if (pointSize < 13) {
pointSize = 13
}
if (pointSize > 100) {
pointSize = 100
}
textView.font = UIFont(name: fontName, size: pointSize)
}
}
Result
Using above solution i am successfully able to increase font size but textView frame is not updating so text is getting cut off because textView frame is smaller.
Expected Result
Font will get increased and also frame will get update so it will look like simple zoom-in and zoom-out but without blurry.
Looking for best possible solution to increase font size with frame like instagram and snapchat is doing.
Thanks.
Here is the code to resize font size along with frame on pinch zoom in/out using UITextView and isScrollEnabled = false
#objc func pinchRecoginze(_ pinchGesture: UIPinchGestureRecognizer) {
guard recognizer.view != nil, let view = recognizer.view else {return}
if view is UITextView {
let textView = view as! UITextView
if recognizer.state == .began {
let font = textView.font
let pointSize = font!.pointSize
recognizer.scale = pointSize * 0.1
}
if 1 <= recognizer.scale && recognizer.scale <= 10 {
textView.font = UIFont(name: textView.font!.fontName, size: recognizer.scale * 10)
let textViewSiSize = textView.intrinsicContentSize
textView.bounds.size = textViewSiSize
}
}
}
Updated answer to compatible with UITextView
Here is the to resize font and frame with pinchGesture when textView isScrollEnabled = false.
#IBAction func handlePinch(recognizer:UIPinchGestureRecognizer) {
if let view = recognizer.view {
if view is UITextView {
let textView = view as! UITextView
if textView.font!.pointSize * recognizer.scale < 90 {
let font = UIFont(name: textView.font!.fontName, size: textView.font!.pointSize * recognizer.scale)
textView.font = font
let sizeToFit = textView.sizeThatFits(CGSize(width: UIScreen.main.bounds.size.width,
height:CGFloat.greatestFiniteMagnitude))
textView.bounds.size = CGSize(width: textView.intrinsicContentSize.width,
height: sizeToFit.height)
} else {
let sizeToFit = textView.sizeThatFits(CGSize(width: UIScreen.main.bounds.size.width,
height:CGFloat.greatestFiniteMagnitude))
textView.bounds.size = CGSize(width: textView.intrinsicContentSize.width,
height: sizeToFit.height)
}
textView.setNeedsDisplay()
} else {
view.transform = view.transform.scaledBy(x: recognizer.scale, y: recognizer.scale)
}
recognizer.scale = 1
}
}
What if you try to enable scrolling in the beginning of your handlePinch method and disable it again at the end of pinching?:
#IBAction func handlePinch(recognizer:UIPinchGestureRecognizer) {
if let textView = recognizer.view as? UITextView {
textView.isScrollingEnabled = true
let font = textView.font!
var pointSize = font.pointSize
let fontName = font.fontName
pointSize = ((recognizer.velocity > 0) ? 1 : -1) * 1 + pointSize;
if (pointSize < 13) {
pointSize = 13
}
if (pointSize > 100) {
pointSize = 100
}
textView.font = UIFont(name: fontName, size: pointSize)
let width = view.frame.size.width
textView.frame.size = textView.sizeThatFits(CGSize(width: width, height: CGFloat.greatestFiniteMagnitude))
textView.isScrollingEnabled = false
}
}

how to define a label by a tag

i try a make a cloud of tag, and i have trouble with how to determine which label was pressed, for to the change color it. if i use like viewq.viewWithTag(1) it work but how i can understand what a label i press ? for change value. Maybe i need a make class ? because i want (if u press once, set color red and some action, if again it set blue color again and make some action)
//
// ViewController.swift
// weqddwqd
//
// Created by Jacket on 4/2/18.
// Copyright © 2018 TryFit. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
#IBOutlet weak var viewq: UIView!
var arrq: [String] = ["Hello", "World", "of", "Tags"]
var tags: [Int] = Array()
override func viewDidLoad() {
super.viewDidLoad()
createTagsLabel(arrq)
}
}
extension ViewController {
func createTagsLabel(_: [String]) {
var xPos:CGFloat = 15.0
var ypos: CGFloat = 130.0
var tag: Int = 0
for word in arrq {
let width = word.widthOfString(usingFont: UIFont(name:"verdana", size: 13.0)!)
let checkWholeWidth = CGFloat(xPos) + CGFloat(width) + CGFloat(13.0) + CGFloat(25.5)
if checkWholeWidth > UIScreen.main.bounds.size.width - 30.0 {
xPos = 15.0
ypos = ypos + 29.0 + 8.0
}
let textlable = UILabel(frame: CGRect(x: xPos, y: ypos, width: width + 18, height: 18))
textlable.layer.borderWidth = 1.8
textlable.layer.cornerRadius = 8
textlable.layer.borderColor = UIColor(red:0.00, green:0.48, blue:1.00, alpha:1.0).cgColor
textlable.textColor = UIColor(red:0.00, green:0.48, blue:1.00, alpha:1.0)
textlable.text = word
textlable.font = UIFont(name: "verdana", size: 13.0)
textlable.textAlignment = .center
textlable.isUserInteractionEnabled = true
ypos = ypos + 25
textlable.tag = tag
tags.append(tag)
tag = tag + 1
let tap = UITapGestureRecognizer(target: self, action: #selector(self.tapFunction(_:)))
//textlable.addTarget(self, action: #selector(tapFunction(_:)), for: .touchUpInside)
textlable.addGestureRecognizer(tap)
viewq.addSubview(textlable)
}
}
func tapFunction(_ recognizer: UITapGestureRecognizer) {
print(viewq.viewWithTag(1))
let tag = viewq.viewWithTag(1) as! UILabel
tag.layer.borderColor = UIColor .red.cgColor
tag.textColor = UIColor .red
print("Added")
}
}
extension String {
func widthOfString(usingFont font: UIFont) -> CGFloat {
let fontAttributes = [NSFontAttributeName: font]
let size = self.size(attributes: fontAttributes)
return size.width
}
func heightOfString(usingFont font: UIFont) -> CGFloat {
let fontAttributes = [NSFontAttributeName: font]
let size = self.size(attributes: fontAttributes)
return size.height
}
}
Your tapFunction can easily get the tapped view from the gesture. No tags required:
func tapFunction(_ recognizer: UITapGestureRecognizer) {
if let tappedLabel = recognizer.view as? UILabel {
tappedLabel.layer.borderColor = UIColor.red.cgColor
tappedLabel.textColor = .red
print("Added")
}
}

Issue with "if" statement: "trying to style message.content differently according to message.sender

I have created a class of message including, content and sender. I successfully store the desired data in Parse and I am querying them. So far, no problem. Then, I attempt to filter the messages according to the sender, or the receiver, in order to display them in different manners on my tableView.
For instance, let's say that is sender is currentUser, the text is blue, otherwise it is green.
If currentUser sends a message, all the text becomes blue, even the one sent by the other user; and vice versa.
class Message {
var sender = ""
var message = ""
var time = NSDate()
init(sender: String, message: String, time: NSDate)
{
self.sender = sender
self.message = message
self.time = time
}
}
var message1: Message = Message(sender: "", message: "", time: NSDate())
func styleTextView()
{
if message1.sender == PFUser.currentUser()?.username {
self.textView.textColor = UIColor.blueColor()
} else {
self.textView.textColor = UIColor.greenColor()
}
}
func addMessageToTextView(message1: Message)
{
textView.text = message1.message
self.styleTextView()
}
func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell
{
var cell: messageCell = tableView.dequeueReusableCellWithIdentifier("cell", forIndexPath: indexPath) as! messageCell
let message = self.array[indexPath.row]
cell.setupWithMessage(message)
return cell
}
I have other codes on my viewController, however I believe they are irrelevant to this matter; if needed, I can provide them.
Any idea why I cannot have the textViews in different style according to the sender?
They are all either blue, either green.
Below is the code for the full set up of the tableViewCell:
class messageCell: UITableViewCell {
private let padding: CGFloat = 10.0
var array1 = [Message]()
private func styleTextView()
{
let halfTextViewWidth = CGRectGetWidth(textView.bounds) / 2.0
let targetX = halfTextViewWidth + padding
let halfTextViewHeight = CGRectGetHeight(textView.bounds) / 2.0
self.textView.font = UIFont.systemFontOfSize(12.0)
if PFUser.currentUser()?.username == message1.sender && textView.text == message1.message {
self.textView.backgroundColor = UIColor.blueColor()
self.textView.layer.borderColor = UIColor.blueColor().CGColor
self.textView.textColor = UIColor.whiteColor()
textView.center.x = targetX
textView.center.y = halfTextViewHeight
} else {
self.textView.backgroundColor = UIColor.orangeColor()
self.textView.layer.borderColor = UIColor.orangeColor().CGColor
self.textView.textColor = UIColor.whiteColor()
self.textView.center.x = CGRectGetWidth(self.bounds) - targetX
self.textView.center.y = halfTextViewHeight
}
}
private lazy var textView: MessageBubbleTextView = {
let textView = MessageBubbleTextView(frame: CGRectZero, textContainer: nil)
self.contentView.addSubview(textView)
return textView
}()
class MessageBubbleTextView: UITextView
{
override init(frame: CGRect = CGRectZero, textContainer: NSTextContainer? = nil)
{
super.init(frame: frame, textContainer: textContainer)
self.scrollEnabled = false
self.editable = false
self.textContainerInset = UIEdgeInsets(top: 7, left: 7, bottom: 7, right: 7)
self.layer.cornerRadius = 15
self.layer.borderWidth = 2.0
}
required init(coder aDecoder: NSCoder)
{
fatalError("init(coder:) has not been implemented")
}
}
private let minimumHeight: CGFloat = 30.0
private var size = CGSizeZero
private var maxSize: CGSize {
get {
let maxWidth = CGRectGetWidth(self.bounds)
let maxHeight = CGFloat.max
return CGSize(width: maxWidth, height: maxHeight)
}
}
func setupWithMessage(message: Message) -> CGSize
{
textView.text = message.message
size = textView.sizeThatFits(maxSize)
if size.height < minimumHeight {
size.height = minimumHeight
}
textView.bounds.size = size
self.styleTextView()
return size
}
}
One possible error can be in this line:
if message1.sender == PFUser.currentUser()?.username
where you are comparing different types since message1 is a String whereas PFUser.currentUser()?.username is an optional String. The right way to compare them is:
if let username = PFUser.currentUser()?.username where username == message1.sender {
self.textView.textColor = UIColor.blueColor()
} else {
self.textView.textColor = UIColor.greenColor()
}
This is because you are changing the text color of the entire UITextView with your code. See the following post for a start in the right direction: Is it possible to change the color of a single word in UITextView and UITextField

How to add small red dot in UITabBarItem

How to add red dot on the top right side of the UITabBarItem.
I have searched a while and some guys said this can be done setting Badge Value of the UITabBarItem.But when I give it a try and set badge value to empty space " ",the red dot is somewhat big.How can I get a proper one?Big thanks.
If you want to avoid traversing subviews & potentially dangerous hacks in general, what I've done is set the badge's background colour to clear and used a styled bullet point to appear as a badge:
tabBarItem.badgeValue = "●"
tabBarItem.badgeColor = .clear
tabBarItem.setBadgeTextAttributes([NSAttributedStringKey.foregroundColor.rawValue: UIColor.red], for: .normal)
This seems more future-proof than the other answers.
you can try this method:
func addRedDotAtTabBarItemIndex(index: Int) {
for subview in tabBarController!.tabBar.subviews {
if let subview = subview as? UIView {
if subview.tag == 1314 {
subview.removeFromSuperview()
break
}
}
}
let RedDotRadius: CGFloat = 5
let RedDotDiameter = RedDotRadius * 2
let TopMargin:CGFloat = 5
let TabBarItemCount = CGFloat(self.tabBarController!.tabBar.items!.count)
let HalfItemWidth = CGRectGetWidth(view.bounds) / (TabBarItemCount * 2)
let xOffset = HalfItemWidth * CGFloat(index * 2 + 1)
let imageHalfWidth: CGFloat = (self.tabBarController!.tabBar.items![index] as! UITabBarItem).selectedImage.size.width / 2
let redDot = UIView(frame: CGRect(x: xOffset + imageHalfWidth, y: TopMargin, width: RedDotDiameter, height: RedDotDiameter))
redDot.tag = 1314
redDot.backgroundColor = UIColor.redColor()
redDot.layer.cornerRadius = RedDotRadius
self.tabBarController?.tabBar.addSubview(redDot)
}
set the badgeValue for your desired UITabBarItem as follow:
// for first tab
(tabBarController!.tabBar.items!.first! as! UITabBarItem).badgeValue = "1"
//for second tab
(tabBarController!.tabBar.items![1] as! UITabBarItem).badgeValue = "2"
// for last tab
(tabBarController!.tabBar.items!.last! as! UITabBarItem).badgeValue = "final"
for remove a badge from the UITabBarItem just assign nil
(tabBarController!.tabBar.items!.first! as! UITabBarItem).badgeValue = nil
you can get the output Like
for additional information please ref this link
Choice --2
var lbl : UILabel = UILabel(frame: CGRectMake(225, 5, 20, 20))
lbl.layer.borderColor = UIColor.whiteColor().CGColor
lbl.layer.borderWidth = 2
lbl.layer.cornerRadius = lbl.bounds.size.height/2
lbl.textAlignment = NSTextAlignment.Center
lbl.layer.masksToBounds = true
lbl.font = UIFont(name: hereaddyourFontName, size: 13)
lbl.textColor = UIColor.whiteColor()
lbl.backgroundColor = UIColor.redColor()
lbl.text = "1" //if you no need remove this
// add subview to tabBarController?.tabBar
self.tabBarController?.tabBar.addSubview(lbl)
the output is
That is very simple in current iOS versions
tabBarItem.badgeValue = " "
it shows the red dot on the top of the tabbar item
Swift 5+
This goes into the controller that belongs to the tab
alt. you just need to grab the right tabBarItem
func updateTabBarBadge(showDot: Bool) {
guard let tbi = tabBarItem else {
return
}
if showDot {
tbi.setBadgeTextAttributes([.font: UIFont.systemFont(ofSize: 6), .foregroundColor:UIColor(named: "Primary")!], for: .normal)
tbi.badgeValue = "⬤"
tbi.badgeColor = UIColor.clear
} else {
tbi.badgeValue = nil
}
}
I have figured out a hack solution.
func addRedDotAtTabBarItemIndex(index: Int,dotRadius: CGFloat) {
var tabBarButtons = [UIView]()
// find the UITabBarButton instance.
for subview in tabBarController!.tabBar.subviews.reverse() {
if subview.isKindOfClass(NSClassFromString("UITabBarButton")) {
tabBarButtons.append(subview as! UIView)
}
}
if index >= tabBarButtons.count {
println("out of bounds")
return
}
let tabBar = tabBarButtons[index]
var selectedImageWidth: CGFloat!
var topMargin: CGFloat!
for subview in tabBar.subviews {
if subview.isKindOfClass(NSClassFromString("UITabBarSwappableImageView")) {
selectedImageWidth = (subview as! UIView).frame.size.width
topMargin = (subview as! UIView).frame.origin.y
}
}
// remove existing red dot.
for subview in tabBar.subviews {
if subview.tag == 999 {
subview.removeFromSuperview()
}
}
let redDot = UIView(frame: CGRect(x: CGRectGetMidX(tabBar.bounds) + selectedImageWidth / 2 + dotRadius, y: topMargin, width: dotRadius * 2, height: dotRadius * 2))
redDot.backgroundColor = UIColor.redColor()
redDot.layer.cornerRadius = dotRadius // half of the view's height.
redDot.tag = 999
tabBar.addSubview(redDot)
}
Works both for iPad and iPhone.
Be able to hide and calculate index automatically.
Call self.setTabBarDotVisible(visible:true) if self is not an UITabBarController.
Call self.setTabBarDotVisible(visible:true, index:2) if self is an UITabBarController.
import UIKit
public extension UIViewController {
func setTabBarDotVisible(visible:Bool,index: Int? = nil) {
let tabBarController:UITabBarController!
if self is UITabBarController
{
tabBarController = self as! UITabBarController
}
else
{
if self.tabBarController == nil
{
return
}
tabBarController = self.tabBarController!
}
let indexFinal:Int
if (index != nil)
{
indexFinal = index!
}
else
{
let index3 = tabBarController.viewControllers?.index(of: self)
if index3 == nil
{
return;
}
else
{
indexFinal = index3!
}
}
guard let barItems = tabBarController.tabBar.items else
{
return
}
//
let tag = 8888
var tabBarItemView:UIView?
for subview in tabBarController.tabBar.subviews {
let className = String(describing: type(of: subview))
guard className == "UITabBarButton" else {
continue
}
var label:UILabel?
var dotView:UIView?
for subview2 in subview.subviews {
if subview2.tag == tag {
dotView = subview2;
}
else if (subview2 is UILabel)
{
label = subview2 as? UILabel
}
}
if label?.text == barItems[indexFinal].title
{
dotView?.removeFromSuperview()
tabBarItemView = subview;
break;
}
}
if (tabBarItemView == nil || !visible)
{
return
}
let barItemWidth = tabBarItemView!.bounds.width
let x = barItemWidth * 0.5 + (barItems[indexFinal].selectedImage?.size.width ?? barItemWidth) / 2
let y:CGFloat = 5
let size:CGFloat = 10;
let redDot = UIView(frame: CGRect(x: x, y: y, width: size, height: size))
redDot.tag = tag
redDot.backgroundColor = UIColor.red
redDot.layer.cornerRadius = size/2
tabBarItemView!.addSubview(redDot)
}
}
i test this question's answer. but not work on iPad.
now i found that, when u add this on iPhone, tabBarItem left and right margin is 2, and each items margin is 4. Code as below:
NSInteger barItemCount = self.tabBar.items.count;
UITabBarItem *barItem = (UITabBarItem *)self.tabBar.items[index];
CGFloat imageHalfWidth = barItem.image.size.width / 2.0;
CGFloat barItemWidth = (BXS_WINDOW_WIDTH - barItemCount * 4) / barItemCount;
CGFloat barItemMargin = 4;
CGFloat redDotXOffset = barItemMargin / 2 + barItemMargin * index + barItemWidth * (index + 0.5);
and iPad as below:
barItemWidth = 76;
barItemMargin = 34;
redDotXOffset = (BXS_WINDOW_WIDTH - 76 * barItemCount - 34 * (barItemCount - 1)) / 2.0 + 76 * (index + 0.5) + 34 * index;
Hope this is useful.
This it Swift 4 solution:
1) Add BaseTabBar custom class to your project:
import UIKit
class BaseTabBar: UITabBar {
static var dotColor: UIColor = UIColor.red
static var dotSize: CGFloat = 4
static var dotPositionX: CGFloat = 0.8
static var dotPositionY: CGFloat = 0.2
var dotMap = [Int: Bool]()
func resetDots() {
dotMap.removeAll()
}
func addDot(tabIndex: Int) {
dotMap[tabIndex] = true
}
func removeDot(tabIndex: Int) {
dotMap[tabIndex] = false
}
override func draw(_ rect: CGRect) {
super.draw(rect)
if let items = items {
for i in 0..<items.count {
let item = items[i]
if let view = item.value(forKey: "view") as? UIView, let dotBoolean = dotMap[i], dotBoolean == true {
let x = view.frame.origin.x + view.frame.width * BaseTabBar.dotPositionX
let y = view.frame.origin.y + view.frame.height * BaseTabBar.dotPositionY
let dotPath = UIBezierPath(ovalIn: CGRect(x: x, y: y, width: BaseTabBar.dotSize, height: BaseTabBar.dotSize))
BaseTabBar.dotColor.setFill()
dotPath.fill()
}
}
}
}
}
2) Change the custom class of UITabBar inside your UITabBarController to BaseTabBar.
3) Manage the dots in the place where you can access the tabBarController
func updateNotificationCount(count: Int) {
if let tabBar = navigationController?.tabBarController?.tabBar as? BaseTabBar {
if count > 0 {
tabBar.addDot(tabIndex: 0)
} else {
tabBar.removeDot(tabIndex: 0)
}
tabBar.setNeedsDisplay()
}
}
I added 5 tab bar indexes and add the dot points according to the notification occurs. First, create Dots view array.
var Dots = [UIView](repeating: UIView(), count: 5)
func addRedDotAtTabBarItemIndex(index: Int) {
if self.Dots[index].tag != index {
let RedDotRadius: CGFloat = 7
let RedDotDiameter = RedDotRadius
let TopMargin:CGFloat = 2
let tabSize = self.tabBarController.view.frame.width / CGFloat(5)
let xPosition = tabSize * CGFloat(index - 1)
let tabHalfWidth: CGFloat = tabSize / 2
self.Dots[index] = UIView(frame: CGRect(x: xPosition + tabHalfWidth - 2 , y: TopMargin, width: RedDotDiameter, height: RedDotDiameter))
self.Dots[index].tag = index
self.Dots[index].backgroundColor = UIColor.red
self.Dots[index].layer.cornerRadius = RedDotRadius
self.tabBarController.tabBar.addSubview(self.Dots[index])
}
}
If you want to remove the dot from selected index, use this code:
func removeRedDotAtTabBarItemIndex(index: Int) {
self.Dots[index].removeFromSuperview()
self.Dots[index].tag = 0
}
simple solution
set space in storyboard tabbaritem badge value.
if we add space below output you can get:
In Swift 5:
tabBarItem.badgeValue = "1"
to change from default color use:
tabBarItem.badgeColor = UIColor.systemBlue
From iOS 13, use UITabBarAppearance and UITabBarItemAppearance
let appearance = UITabBarAppearance()
let itemAppearance = UITabBarItemAppearance(style: .stacked)
itemAppearance.normal.badgeBackgroundColor = .clear
itemAppearance.normal.badgeTextAttributes = [.foregroundColor: UIColor.red]
profileViewController.tabBarItem.badgeValue = "●"

Resources