please help me to make a simple badge like UILabel.
My code is:
let badgeLabel = UILabel(frame: CGRectMake(0, 0, 25, 25))
badgeLabel.backgroundColor = UIColor.clearColor()
badgeLabel.layer.backgroundColor = UIColor.redColor().CGColor
badgeLabel.layer.cornerRadius = 25/2
badgeLabel.layer.borderWidth = 3.0
badgeLabel.layer.borderColor = UIColor.whiteColor().CGColor
And in result I have a UILabel with tiny red stroke on white border:
Try this.
let badgeLabel = UILabel(frame: CGRectMake(0, 0, 25, 25))
badgeLabel.backgroundColor = UIColor.redColor()
badgeLabel.layer.backgroundColor = UIColor.clearColor().CGColor
badgeLabel.layer.cornerRadius = 25/2
badgeLabel.layer.borderWidth = 3.0
badgeLabel.layer.borderColor = UIColor.whiteColor().CGColor
Hey Check this latest code, sure it will work.
let roundRing = UILabel(frame: badgeLabel.frame)
roundRing.backgroundColor = UIColor.clearColor()
roundRing.layer.backgroundColor = UIColor.whiteColor().CGColor
roundRing.layer.cornerRadius = 25/2
roundRing.layer.borderWidth = 3.0
roundRing.layer.borderColor = UIColor.whiteColor().CGColor
self.view .addSubview(roundRing)
let innerRegion = UILabel(frame: CGRectMake(3, 3, 19, 19))
innerRegion.backgroundColor = UIColor.clearColor()
innerRegion.layer.backgroundColor = UIColor.redColor().CGColor
innerRegion.layer.cornerRadius = 19/2
innerRegion.text="2"
innerRegion.font=UIFont(name: "MarkerFelt-Thin", size: 10)!
innerRegion.textAlignment=NSTextAlignment.Center
roundRing.addSubview(innerRegion)
You are missing masksToBounds
for swift 3:
let badgeLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 25, height: 25))
badgeLabel.backgroundColor = .red
badgeLabel.layer.cornerRadius = 25/2
badgeLabel.layer.masksToBounds = true
badgeLabel.layer.borderWidth = 3.0
badgeLabel.layer.borderColor = .white
Related
I've set up a UINavigationBar to have rounded bottom corners with shadow, but it removed my UINavigationItem. I've tried to set it back programatically but it sets it behind the top bar item.
class RoundedShadowCorners {
func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat,_ navigationItem: UINavigationItem){
topBar.isTranslucent = false
topBar.tintColor = UIColor.orange
topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
topBar.shadowImage = UIImage()
topBar.backgroundColor = UIColor.white
let shadowView = UIView(frame: CGRect(x: 0, y: -offset, width: (topBar.bounds.width), height: (topBar.bounds.height) + offset))
shadowView.backgroundColor = UIColor.white
topBar.insertSubview(shadowView, at: 1)
let shadowLayer = CAShapeLayer()
shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight , .topLeft], cornerRadii: CGSize(width: 20, height: 20)).cgPath
shadowLayer.fillColor = UIColor.white.cgColor
shadowLayer.shadowColor = UIColor.darkGray.cgColor
shadowLayer.shadowPath = shadowLayer.path
shadowLayer.shadowOffset = CGSize(width: 2.0, height: 2.0)
shadowLayer.shadowOpacity = 0.8
shadowLayer.shadowRadius = 2
shadowView.layer.insertSublayer(shadowLayer, at: 0)
topBar.prefersLargeTitles = true
topBar.topItem?.title = "HJFSKDJKA"
}
}
offset is view.safeAreaInsets.top! Picture attached, as you can see, the title is behind the layer.
Text is behind
As you can see, layer works
I have edited #Daljeet's code and thanks to that I've found the solution:
let titleLabelView = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
titleLabelView.backgroundColor = UIColor.clear
titleLabelView.textAlignment = .center
titleLabelView.textColor = UIColor.black
titleLabelView.font = UIFont.systemFont(ofSize: 17)
titleLabelView.adjustsFontSizeToFitWidth = true
titleLabelView.text = navigationItem.title
let labelView: UIView = titleLabelView
topBar.insertSubview(labelView, aboveSubview: shadowView)
let yCoordPlaceholder = labelView.center.y
labelView.center = CGPoint(x: safeArea.width/2, y: yCoordNavPlaceholder)
Thanks again #Daljeet!
You can try below code:
// First create custom label
UILabel *titleLabelView = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 200, 40)];
[titleLabelView setBackgroundColor:[UIColor clearColor]];
[titleLabelView setTextAlignment: NSTextAlignmentCenter];
[titleLabelView setTextColor:[UIColor whiteColor]];
[titleLabelView setFont:[UIFont systemFontOfSize: 27]];
[titleLabelView setAdjustsFontSizeToFitWidth:YES];
titleLabelView.text = #"You text here";
// here set in navBar titleView
topBar.topItem.titleView = titleLabelView;
topBar.bringSubviewToFront(topBar.topItem!.titleView!)
Add this line of code after setting the title.
I am currently trying to make a simple pop up, here I have a button, once it gets tapped.
It should show a simple view above it, I achieved the blue background, but I am not being able to add a label to it, and center the label to the blue popup
let width = (sender as! UIButton).frame.width
let y = (sender as! UIButton).frame.origin.y
let x = (sender as! UIButton).frame.origin.x
myView = UIView(frame: CGRect(x: x, y: y - 30, width:width, height: 30))
myView.backgroundColor = UIColor.blue
let label = UILabel()
label.text = (sender as! UIButton).titleLabel?.text
label.font = UIFont(name:"avenirNext-Meduim",size:20)
label.center = self.myView.center
myview.addSubview(label)
self.view.addSubview(myView)
UIView.animate(withDuration: 0.1, delay: 0.1, options: [], animations: {
self.myView.alpha = 0.0
}) { (finished: Bool) in
self.myView.isHidden = true
}
Try to set your label frame:
let label = UILabel(frame: CGRect(origin: .zero, size: yourLabelSize))
Instead of
label.center = self.myView.center
try
label.centerXAnchor.constraint(equalTo: myView.centerXAnchor).isActive = true
label.centerYAnchor.constraint(equalTo: myView.centerYAnchor).isActive = true
after
myview.addSubview(label)
self.view.addSubview(myView)
My solution
let codedLabel:UILabel = UILabel()
codedLabel.frame = CGRect(x: myView.center.x, y: myView.center.y, width: 51, height: 30)
codedLabel.textAlignment = .center
codedLabel.text = "q"
codedLabel.numberOfLines = 1
codedLabel.textColor=UIColor.red
codedLabel.font=UIFont.systemFont(ofSize: 22)
codedLabel.backgroundColor=UIColor.lightGray
self.myView.addSubview(codedLabel)
codedLabel.translatesAutoresizingMaskIntoConstraints = false
codedLabel.heightAnchor.constraint(equalToConstant: 30).isActive = true
codedLabel.widthAnchor.constraint(equalToConstant: 30).isActive = true
codedLabel.centerXAnchor.constraint(equalTo: codedLabel.superview!.centerXAnchor).isActive = true
codedLabel.centerYAnchor.constraint(equalTo: codedLabel.superview!.centerYAnchor).isActive = true
let headerView = UIView.init(frame: CGRect.init(x: 0, y: 0, width: tableView.frame.width, height: 50))
let label = UILabel()
label.frame = CGRect.init(x: headerView.center.x-60, y:headerView.center.y-15, width: 120, height: 30)
label.textAlignment = .center
label.textColor = #colorLiteral(red: 0.1290470958, green: 0.2743584514, blue: 0.6418049335, alpha: 1)
label.font = UIFont(name: "Roboto-Bold", size: 15)
label.text = "11-12-2020"
headerView.addSubview(label)
headerView.backgroundColor = #colorLiteral(red: 0.9967060685, green: 0.9998621345, blue: 0.9997505546, alpha: 1)
I have a UINavigationBar with a title of variable length. To make sure the title fits without being truncated I've implemented the following code in my viewDidLoad():
let titleLabel = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
titleLabel.text = "\(petsName)'s Day"
titleLabel.font = UIFont.systemFont(ofSize: 30)
titleLabel.backgroundColor = UIColor.clear
titleLabel.textColor = UIColor.white
titleLabel.adjustsFontSizeToFitWidth = true
titleLabel.minimumScaleFactor = 0.5
self.navBar.topItem?.titleView = titleLabel
However, because I have a bar button item, the title is being moved over to the left:
Is there any way to implement the code above but keep the text center aligned within the navigation bar?
Please help me to resolve this issue
Try this.. may be worked
var view = UIView(frame: CGRect(x: 0, y: 0, width: 150, height: 40))
var label = UILabel(frame: CGRect(x: 0, y: 0, width: 150, height: 40))
label.text = "Joys Day"
label.textAlignment = .center
label.font = UIFont.systemFont(ofSize: 30)
view.addSubview(label)
navigationItem?.titleView = view
Change titleLabel width to device width and align it to center. Try this:
let deviceWidth = UIScreen.main.bounds.size.width
let titleLabel = UILabel(frame: CGRect(x: 0, y: 0, width: deviceWidth, height: 40))
titleLabel.text = "My Test Title"
titleLabel.font = UIFont.systemFont(ofSize: 20)
titleLabel.backgroundColor = UIColor.clear
titleLabel.textColor = UIColor.white
titleLabel.adjustsFontSizeToFitWidth = true
titleLabel.minimumScaleFactor = 0.5
titleLabel.textAlignment = .center
self.navigationItem.titleView = titleLabel
Output:
Hello I want to show a UIActivityIndicatorView on my UIViewController exactly like this
How can I draw a UIViewIndicator like this above image
I have tried this
func showIndicatorView(){
let loadingIndicator = UIActivityIndicatorView(frame: CGRectMake(0, 0, 50, 50))
loadingIndicator.layer.cornerRadius = 05
loadingIndicator.opaque = false
loadingIndicator.backgroundColor = UIColor(white: 0.0, alpha: 0.6)
loadingIndicator.center = self.view.center;
loadingIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray
loadingIndicator.color = UIColor.whiteColor()
loadingIndicator.startAnimating()
self.view.addSubview(loadingIndicator)
}
You could put it in another view that has a black background color. Something like this. You could also add the 'Loading...' label in that view if you need it.
func showIndicatorView(){
let loadingIndicator = UIActivityIndicatorView(frame: CGRectMake(0, 0, 50, 50))
let backgroundView = UIView()
backgroundView.layer.cornerRadius = 05
backgroundView.clipsToBounds = true
backgroundView.opaque = false
backgroundView.backgroundColor = UIColor(white: 0.0, alpha: 0.6)
loadingIndicator.activityIndicatorViewStyle = UIActivityIndicatorViewStyle.Gray
loadingIndicator.color = UIColor.whiteColor()
loadingIndicator.startAnimating()
let loadingLabel = UILabel()
loadingLabel.text = "Loading..."
let textSize: CGSize = loadingLabel.text!.sizeWithAttributes([NSFontAttributeName: loadingLabel.font ])
loadingLabel.frame = CGRectMake(50, 0, textSize.width, textSize.height)
loadingLabel.center.y = loadingIndicator.center.y
backgroundView.frame = CGRectMake(0, 0, textSize.width + 70, 50)
backgroundView.center = self.view.center;
self.view.addSubview(backgroundView)
backgroundView.addSubview(loadingIndicator)
backgroundView.addSubview(loadingLabel)
}
Use MBProgressHud library .
This is what you need :-
https://github.com/jdg/MBProgressHUD
let bottomBorder = CALayer()
let borderWidth = CGFloat(1.0)
bottomBorder.borderColor = UIColor(hex: 0xf5f5f5).CGColor
bottomBorder.frame = CGRect(x: 0, y: summary.frame.size.height - borderWidth, width: summary.frame.size.width, height: summary.frame.size.height)
bottomBorder.borderWidth = borderWidth
self.summary.layer.addSublayer(bottomBorder)
self.summary.layer.masksToBounds = true
I know how to add a bottom border, but when I apply the same principle to "topBorder", one of them disappears.
You can add top and bottom boarder using following code. you code have just framing issue.
let topBorder = CALayer()
let topHeight = CGFloat(1.0)
topBorder.borderColor = UIColor.blackColor().CGColor
topBorder.frame = CGRect(x: 0, y: 0, width: summary.frame.size.width, height: topHeight)
topBorder.borderWidth = summary.frame.size.width
self.summary.layer.addSublayer(topBorder)
let bottomBorder = CALayer()
let borderHeight = CGFloat(1.0)
bottomBorder.borderColor = UIColor.blackColor().CGColor
bottomBorder.frame = CGRect(x: 0, y: summary.frame.size.height - borderHeight, width: summary.frame.size.width, height: borderHeight)
bottomBorder.borderWidth = summary.frame.size.width
self.summary.layer.addSublayer(bottomBorder)
self.summary.layer.masksToBounds = true
I think it's your frames, review and modify this as necessary:
*Note this function was added as an extension to UITextView
func addBorders(color:UIColor) {
let bottomBorder = CALayer()
bottomBorder.backgroundColor = color.CGColor
bottomBorder.frame = CGRectMake(0, CGRectGetHeight(bounds) - 1, CGRectGetWidth(bounds), 1)
bottomBorder.name = "BottomBorder"
layer.addSublayer(bottomBorder)
let topBorder = CALayer()
topBorder.backgroundColor = color.CGColor
topBorder.frame = CGRectMake(0, 0, CGRectGetWidth(bounds), 1)
topBorder.name = "TopBorder"
layer.addSublayer(topBorder)
}
var bottomBorder = CALayer()
bottomBorder.frame = CGRect(x:0.0, y:self.descriptionTextView.frame.size.height - 1, width:self.descriptionTextView.frame.size.width, height: 1.0)
bottomBorder.backgroundColor = UIColor(hex:K.NODD_RED_HEX).cgColor
self.descriptionTextView.layer.addSublayer(bottomBorder)