I am using a font called: Luckiest Guy in a Swift project (Link to the font).
However, in UILabels, it's not vertically aligned to the center even after setting baselineAlignment to the center...
Could you check my code and help me out. Thanks a lot!!
I attached a screen shot here to show the problem (https://www.dropbox.com/s/1hxq68dewtzzkxi/IMG_9733.png?dl=0)
var dynamicLabel: UILabel = UILabel()
dynamicLabel.frame = CGRectMake(0, 0, 60, 35) //Frame (the coordinates are changed here to simply the code)
// *** Color and offset *** //
dynamicLabel.backgroundColor = UIColor.blueColor()
dynamicLabel.textColor = UIColor.whiteColor()
dynamicLabel.shadowColor = UIColor.blackColor()
dynamicLabel.shadowOffset = CGSizeMake(0, 1.0)
// *** Text alignment *** //
dynamicLabel.textAlignment = NSTextAlignment.Center
dynamicLabel.font = UIFont(name: "LuckiestGuy-Regular", size: 25)
dynamicLabel.adjustsFontSizeToFitWidth = true
dynamicLabel.minimumScaleFactor = 0.5
dynamicLabel.baselineAdjustment = UIBaselineAdjustment.AlignCenters
// *** Label corner and border *** //
dynamicLabel.layer.masksToBounds = true
dynamicLabel.layer.cornerRadius = 15.0
dynamicLabel.layer.borderColor = UIColor.whiteColor().CGColor
dynamicLabel.layer.borderWidth = 1.0
// Text
dynamicLabel.text = "Excellent!"
As your explanation to what is happening instead is rather vague I assume that the Label isn't really visible, because with the implementation of dynamicLabel.textAlignment = NSTextAlignment.Center the text should be aligned
I've tried your code in a sample project and the only two things I noticed that were off were the x and y coordinates of the label (as they're set to zero, so the label doesn't really get displayed anyways) and that you didn't add the label to the view:
let dynamicLabel = UILabel(frame: CGRectMake(100, 200, 200, 100))
// *** Color and offset *** //
dynamicLabel.backgroundColor = UIColor.blueColor()
dynamicLabel.textColor = UIColor.whiteColor()
dynamicLabel.shadowColor = UIColor.blackColor()
dynamicLabel.shadowOffset = CGSizeMake(0, 1.0)
dynamicLabel.text = "Excellent!"
// *** Text alignment *** //
dynamicLabel.textAlignment = NSTextAlignment.Center
dynamicLabel.adjustsFontSizeToFitWidth = true
dynamicLabel.minimumScaleFactor = 0.5
dynamicLabel.baselineAdjustment = UIBaselineAdjustment.AlignCenters
// *** Label corner and border *** //
dynamicLabel.layer.masksToBounds = true
dynamicLabel.layer.cornerRadius = 15.0
dynamicLabel.layer.borderColor = UIColor.whiteColor().CGColor
dynamicLabel.layer.borderWidth = 1.0
view.addSubview(dynamicLabel)
Related
Here is the code I have for UILabel
descriptionText.layer.cornerRadius = 8
descriptionText.layer.borderColor = UIColor.lightGray.cgColor
descriptionText.layer.borderWidth = 2
descriptionText.text = ""
descriptionText.layer.shadowOffset = CGSize(width: -10, height: -10)
descriptionText.layer.shadowRadius = -5.0
descriptionText.backgroundColor = .white
descriptionText.textColor = .black
descriptionText.numberOfLines = 0
descriptionText.lineBreakMode = .byWordWrapping
However This is what it looks like
Why is the Corner Not Transparent or how do you make what is outside the border transparent
Thanks in advance
You need to hide everything outside of the cornerRadius by setting .clipsToBounds on the label to true. Problem is that if you do this you will lose the shadow, as this is outside the bounds as well. Try this:
Place your label inside a container view, constrain the label to the container edges, and create an outlet to it. Then try the following code:
containerView.borderColor = UIColor.lightGray.cgColor
containerView.layer.borderColor = UIColor.lightGray.cgColor
containerView.layer.borderWidth = 2
containerView.layer.shadowOffset = CGSize(width: -10, height: -10)
containerView.layer.shadowRadius = -5.0
containerView.backgroundColor = UIColor.clear
descriptionText.text = "Testing"
descriptionText.cornerRadius = 8
descriptionText.clipsToBounds = true // or descriptionText.layer.masksToBounds = true
descriptionText.backgroundColor = .white
descriptionText.textColor = .black
descriptionText.numberOfLines = 0
descriptionText.lineBreakMode = .byWordWrapping
I’m trying to add a label to an SCNNode. So far I’ve managed to set a SKLabelNode as the material for the SCNNode. It sort of works, I can the SCNNode becomes the background colour of the SKLabelNode but I can’t see the text. Sometime I can see a red haze (the text colour is red) but no readable text.
I also tried setting the material as a UIView and adding a UiLabel as a sub view. Again it sets as I can the whole SCNNode becomes the background colour of the UiLabel but I can’t see any text.
var block = SCNNode()
var spriteScene = SKScene()
var Lbl = SKLabelNode()
lbl.text = “Hello World”
lbl.color = blue (playground colour literal)
lbl. = 2 //I tried various numbers
lbl.fontColor = SKColor.red
spriteScene.addChild(lbl)
I got it after some hit and trial. I had to try different values before I got these size, scale and rotation to display the label as I want.
note: My node here is SCNPlane with 0.3 width and 0.2 height, so size of SKScene and rectangle and position of label are hard coded accordingly.
func addLabel(text: String){
let sk = SKScene(size: CGSize(width: 3000, height: 2000))
sk.backgroundColor = UIColor.clear
let rectangle = SKShapeNode(rect: CGRect(x: 0, y: 0, width: 3000, height: 2000), cornerRadius: 10)
rectangle.fillColor = UIColor.black
rectangle.strokeColor = UIColor.white
rectangle.lineWidth = 5
rectangle.alpha = 0.5
let lbl = SKLabelNode(text: text)
lbl.fontSize = 160
lbl.numberOfLines = 0
lbl.fontColor = UIColor.white
lbl.fontName = "Helvetica-Bold"
lbl.position = CGPoint(x:1500,y:1000)
lbl.preferredMaxLayoutWidth = 2900
lbl.horizontalAlignmentMode = .center
lbl.verticalAlignmentMode = .center
lbl.zRotation = .pi
sk.addChild(rectangle)
sk.addChild(lbl)
let material = SCNMaterial()
material.isDoubleSided = true
material.diffuse.contents = sk
node.geometry?.materials = [material]
node.geometry?.firstMaterial?.diffuse.contentsTransform = SCNMatrix4MakeScale(Float(1), Float(1), 1)
node.geometry?.firstMaterial?.diffuse.wrapS = .repeat
node.geometry?.firstMaterial?.diffuse.wrapS = .repeat
}
I am trying to implement the solution here (which I converted to Swift): How to create rounded UITextField with inner shadow
My code is as follows:
mobileInputView.layer.cornerRadius = 5.0;
let shadowLayer = CAShapeLayer()
shadowLayer.frame = mobileInputView.bounds;
// Standard shadow stuff
shadowLayer.shadowColor = UIColor(white: 0, alpha: 1).CGColor
shadowLayer.shadowOffset = CGSizeMake(0.0, 0.0)
shadowLayer.shadowOpacity = 1.0
shadowLayer.shadowRadius = 4
// Causes the inner region in this example to NOT be filled.
shadowLayer.fillRule = kCAFillRuleEvenOdd
// Create the larger rectangle path.
let path = CGPathCreateMutable();
CGPathAddRect(path, nil, CGRectInset(mobileInputView.bounds, -42, -42));
// Add the inner path so it's subtracted from the outer path.
// someInnerPath could be a simple bounds rect, or maybe
// a rounded one for some extra fanciness.
let someInnerPath = UIBezierPath(roundedRect: mobileInputView.bounds, cornerRadius:5.0).CGPath
CGPathAddPath(path, nil, someInnerPath)
CGPathCloseSubpath(path);
shadowLayer.path = path
//CGPathRelease(path);
mobileInputView.layer.addSublayer(shadowLayer)
//[[_textField layer] addSublayer:shadowLayer];
let maskLayer = CAShapeLayer()
maskLayer.path = someInnerPath
shadowLayer.mask = maskLayer
But the view ends up coming out like this:
The width of the component is correct, I can type until the edge of the screen, it's just the border that comes out a bad size. If I set the background colour of the view I can see the view itself is being sized correctly.
If I try using .frame instead of .bounds I get the same result.
A much simpler way to achieve this is to modify the UITextField directly without have the outlining UIView and the label:
let label = UILabel(frame: CGRectMake(1, 1, 125, 25))
label.text = "Mobile number:"
label.textAlignment = NSTextAlignment.Right
mobileNumber.leftView = label
mobileNumber.leftViewMode = UITextFieldViewMode.Always
mobileNumber.borderStyle = UITextBorderStyle.Bezel;
mobileNumber.layer.borderWidth = 1.0
mobileNumber.layer.borderColor = UIColor.grayColor().CGColor
mobileNumber.layer.cornerRadius = 5.0
I'm working on chat. So I stopped where I should do self-sizing labels to display text.
I tried to make my label as:
messageLabel.frame = CGRectMake(0, 0, self.chatScrollView.frame.size.width - 90, CGFloat.max)
messageLabel.sizeToFit()
messageLabel.frame.origin.x = (self.chatScrollView.frame.size.width - self.messageX) - messageLabel.frame.size.width
messageLabel.frame.origin.y = self.messageY
but my label didn't appear at all. If I make some exact height of my label for example 100 and comment line
//messageLabel.sizeToFit()
so the whole label code:
let messageLabel: UILabel = UILabel()
messageLabel.text = self.messageArray[i]
messageLabel.frame = CGRectMake(0, 0, self.chatScrollView.frame.size.width - 90, CGFloat.max)
messageLabel.backgroundColor = UIColor.groupTableViewBackgroundColor()
messageLabel.numberOfLines = 0
messageLabel.lineBreakMode = .ByWordWrapping
messageLabel.sizeToFit()
messageLabel.textAlignment = .Left
messageLabel.font = UIFont(name: "Apple SD Gothic Neo", size: 20)
messageLabel.textColor = UIColor.grayColor()
messageLabel.layer.zPosition = 20
messageLabel.frame.origin.x = (self.chatScrollView.frame.size.width - self.messageX) - messageLabel.frame.size.width
messageLabel.frame.origin.y = self.messageY
print(self.messageArray[i])
print("label origin \(messageLabel.frame.origin.x, messageLabel.frame.origin.y)")
self.chatScrollView.addSubview(messageLabel)
self.messageY += messageLabel.frame.size.height + 30
let width = self.view.frame.size.width
self.chatScrollView.contentSize = CGSizeMake(width, self.messageY)
self.chatScrollView.bringSubviewToFront(messageLabel)
Edit #1
Label definitely has text (print statement proofs it)
Label origin is on the screen area (second print statement proofs it)
Question: How I can fix it (or how I can make my label appear and be self-sizing label)?
I found the solution!
I just put my
messageLabel.text = self.messageArray[i]
right under the
let messageLabel: UILabel = UILabel()
so my label appeared!
I want an image to appear as a circle with a shadow. Doing the following don't work because the shadow is probably cut off by the clipping...
let layer = myImageView.layer
// cut circle
layer.borderWidth = 1
layer.masksToBounds = false
layer.borderColor = UIColor.whiteColor().CGColor
layer.cornerRadius = myImageView.frame.height/2
myImageView.clipsToBounds = true
// add shadow
layer.shadowColor = UIColor.blackColor().CGColor
layer.shadowOffset = CGSize(width: 0, height: 10)
layer.shadowOpacity = 0.4
layer.shadowRadius = 5
I had the same problem...
I solve this by putting an image on top of the button(in my case was a button not an image) to act like a shadow.
button.sizeToFit()
shadow.layer.cornerRadius = 6
shadow.backgroundColor = UIColor.whiteColor()
shadow.layer.shadowOpacity = 0.8
shadow.layer.shadowRadius = 6
shadow.layer.shadowOffset = CGSizeMake(0, 2)
button.layer.cornerRadius = 6
button.clipsToBounds = true
shadow is the imageView that will be the shadow, of course.
button in your case will be your image.