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.
Related
I want to create something like this:
Output
This is what I've tried so far:
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"
}
}
Problem with this is that this makes the title text be behind the actual NavigationBar and I can only make it come forward if I create a new UIView for the title and try positioning it on the screen, which makes it extremely difficult to be responsive.
offset isview.safeAreaInsets.top
I would prefer to do it without making a new UIView, because it makes things complicated, but I couldn't even begin to do it.
This is updated & tested code, there were certain lines which needs to be updated to overcome this behaviour,go through my in-line comments for details.
func shadowTopBar(_ topBar: UINavigationBar,_ offset: CGFloat){
// Set the prefers title style first
// since this is how navigation bar bounds gets calculated
//
topBar.prefersLargeTitles = true
topBar.topItem?.title = "HJFSKDJKA"
topBar.isTranslucent = false
topBar.tintColor = UIColor.orange
topBar.setBackgroundImage(UIImage(), for: UIBarMetrics.default)
topBar.shadowImage = UIImage()
topBar.backgroundColor = UIColor.white
// Make your y position to the max of the uiNavigationBar
// Height should the cornerRadius height, in your case lets say 20
let shadowView = UIView(frame: CGRect(x: 0, y: topBar.bounds.maxY, width: (topBar.bounds.width), height: 20))
// Make the backgroundColor of your wish, though I have made it .clear here
// Since we're dealing it in the shadow layer
shadowView.backgroundColor = .clear
topBar.insertSubview(shadowView, at: 1)
let shadowLayer = CAShapeLayer()
// While creating UIBezierPath, bottomLeft & right will do the work for you in this case
// I've removed the extra element from here.
shadowLayer.path = UIBezierPath(roundedRect: shadowView.bounds, byRoundingCorners: [.bottomLeft , .bottomRight], cornerRadii: CGSize(width: 20, height: 20)).cgPath
shadowLayer.fillColor = UIColor.white.cgColor
shadowLayer.shadowColor = UIColor.darkGray.cgColor
shadowLayer.shadowPath = shadowLayer.path
// This too you can set as per your desired result
shadowLayer.shadowOffset = CGSize(width: 2.0, height: 4.0)
shadowLayer.shadowOpacity = 0.8
shadowLayer.shadowRadius = 2
shadowView.layer.insertSublayer(shadowLayer, at: 0)
}
Here's a detailed article on this. Medium
I'm implementing a "fake" border using a view with a background color so that the border doesn't cover another view. (as per this answer and the following code)
UIView *backgroundView = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
backgroundView.backgroundColor = [UIColor blackColor]; /* I want this to be clear except for the part outside bView */
backgroundView.clipsToBounds = NO;
UIView *bView = [[UIView alloc] initWithFrame:CGRectInset(backgroundView.bounds, 3, 3)];
bView.backgroundColor = [UIColor redColor]; /* I want this to be clear */
UIView *cView = [[UIView alloc] initWithFrame:CGRectMake(-50, -50, 100, 100)];
cView.backgroundColor = [UIColor yellowColor];
[bView addSubview:cView];
[backgroundView addSubview:bView];
[self.window addSubview:backgroundView];
How can I have backgroundView be clear(transparent) except for the border and bview be completely transparent? If I set both color to clear, I will lose my border. I am using swift unlike the code example.
Thanks
This is what I actually want. The big box needs to be transparent except for the fake black border around it so that the text (and everything behind it) can show up.
You say you want this:
So now I will easily construct it, but I will make the third view white so we can see it (with an annotation that it should be clear):
self.view.backgroundColor = .gray
let borderView = UIView(frame:CGRect(x: 150, y: 150, width: 200, height: 200))
borderView.backgroundColor = .clear
borderView.layer.borderWidth = 3
self.view.addSubview(borderView)
let yellowView = UIView(frame:CGRect(x: 100, y: 100, width: 100, height: 100))
yellowView.backgroundColor = .yellow
self.view.addSubview(yellowView)
let clearView = UIView(frame:borderView.frame.insetBy(dx: 3, dy: 3))
clearView.backgroundColor = .white // should be .clear
self.view.addSubview(clearView)
Result:
Substitute .clear for .white to get the desired outcome.
Well, I can't give you definitive performance data, but I would expect this to give you better performance than multiple views to create a "fake" border...
class myView: UIView {
override func draw(_ rect: CGRect) {
UIColor.black.set()
let context = UIGraphicsGetCurrentContext()
context?.stroke(rect.insetBy(dx: 1.5, dy: 1.5), width: 3.0)
}
}
let backgroundView = myView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
backgroundView.backgroundColor = UIColor.clear
let cView = UIView(frame: CGRect(x: -50, y: -50, width: 100, height: 100))
cView.backgroundColor = UIColor.yellow
backgroundView.addSubview(cView)
self.view.addSubview(backgroundView)
Of course, if you really want to do this with subviews to create the frame, this will also do the job. It adds 4 subviews to the background view, one for each side of the rectangle:
let backgroundView = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
backgroundView.backgroundColor = UIColor.clear
backgroundView.clipsToBounds = false
let bgvFrame = backgroundView.bounds
let leftEdge = UIView(frame: CGRect(x: 0, y: 0, width: 3, height: bgvFrame.size.height))
leftEdge.backgroundColor = UIColor.black
let topEdge = UIView(frame: CGRect(x: 0, y: 0, width: bgvFrame.size.width, height: 3))
topEdge.backgroundColor = UIColor.black
let rightEdge = UIView(frame: CGRect(x: bgvFrame.size.width - 3, y: 0, width: 3, height: bgvFrame.size.height))
rightEdge.backgroundColor = UIColor.black
let bottomEdge = UIView(frame: CGRect(x: 0, y: bgvFrame.size.height - 3, width: bgvFrame.size.width, height: 3))
bottomEdge.backgroundColor = UIColor.black
backgroundView.addSubview(leftEdge)
backgroundView.addSubview(topEdge)
backgroundView.addSubview(rightEdge)
backgroundView.addSubview(bottomEdge)
let cView = UIView(frame: CGRect(x: -50, y: -50, width: 100, height: 100))
cView.backgroundColor = UIColor.yellow
backgroundView.addSubview(cView)
self.view.addSubview(backgroundView)
How can I create a textField with transparent background and only border bottom?
I have tried this code:
textField.backgroundColor = .clear
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = UIColor.darkGrayColor().CGColor
border.frame = CGRect(x: 0, y: textField.frame.size.height - width, width: textField.frame.size.width, height: textField.frame.size.height)
border.borderWidth = width
textField.layer.addSublayer(border)
textField.layer.masksToBounds = true
But it isn't working.
Here's an alternative implementation using a UIView rather than a CALayer.
let line = UIView()
line.frame.size = CGSize(width: textField.frame.size.width, height: 1)
line.frame.origin = CGPoint(x: 0, y: textField.frame.maxY - line.frame.height)
line.backgroundColor = UIColor.darkGray
line.autoresizingMask = [.flexibleWidth, .flexibleTopMargin]
textField.addSubview(line)
Your code is correct. Problem is only with your border height which is now "textField.frame.size.height" change it to 1.0.(Change your border frame code).
Please try this :
txtField .borderStyle = .none
It may help you.... :)
extension UITextField {
func setBottomBorder(borderColor: CGColor = UIColor.white.cgColor,
backgroundColor: CGColor = UIColor.clear.cgColor) {
self.borderStyle = .none
self.layer.backgroundColor = backgroundColor
let border = CALayer()
let width = CGFloat(2.0)
border.borderColor = borderColor
border.frame = CGRect(x: 0, y: self.frame.size.height - width, width: self.frame.size.width, height: self.frame.size.height)
border.borderWidth = width
self.layer.addSublayer(border)
self.layer.masksToBounds = true
}
}
This worked for me.
Then you can just call
yourTextField.SetBottomBorder(borderColor: UIColor.white.cgColor, backgroundColor: UIColor.clear.cgColor)
Just add this line with your code :-
border.backgroundColor = UIColor.black.cgColor
This code seems to be working fine for me though, setting the backgroundColor to clear fix this
textField.backgroundColor = .clear
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
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