UIImageView disappears when enabling "ClipToBounds" - ios

I have an UIImageView element that I added via Interface Builder (XIB file).
I create an IBOutlet to this imageView and on awakeFromNib() method I add those 2 lines (for creating a circular imageView):
self.myImageView.layer.cornerRadius = self.myImageView.frame.size.width / 2
self.myImageView.clipsToBounds = true
The constraints to this UIImageView (via Interface Builder, NameLabel is a UIlabel with frame of: x: 27, y: 170, width: 319, height: 25) are:
Width = 77
Top space to SuperView = 88
Bottom space to NameLabel = 5
Align center X = NameLabel
When I run the app I can't see the imageView - it just disappears!
Note: (I think it happened every time a constraint sets its height).
Note 2: When I remove self.myImageView.clipsToBounds = true line or self.myImageView.layer.cornerRadius = self.myImageView.frame.size.width / 2 line it works!
Any idea how to fix it?
Thank you!

Related

clipsToBounds on UILabel not working

I have a UILabel, that I am setting up like this:
class someSuperclass {
var firstLetterLabel = UILabel(frame: CGRect(x: 58, y: 0, width: 81, height: 120))
func commonInit() {
firstLetterLabel.font = UIFont(name: "MuseoSans-500", size: 110.0)
firstLetterLabel.textColor = UIColor.museumRed
firstLetterLabel.textAlignment = .center
firstLetterLabel.numberOfLines = 1
firstLetterLabel.lineBreakMode = .byClipping
firstLetterLabel.clipsToBounds = false
addSubview(firstLetterLabel)
}
}
But it is still being clipped by its bounds
Since clipsToBounds does not seem to apply to the content of a label. How can I stop label content from being clipped by it's frame/bounds?
ClipsToBounds allows subviews or sub layers to spill out of a view or prevent that but it does not do that for drawn content by a view and in this case it is a UILabel. You cannot draw past the bounds of the view/label. That is why it is clipped. This difference always clips drawn content.
possible solutions
1) let intrinsic size of the single letter labels keep it from clipping. Place all the the labels in a horizontal stack view.
2) enable minimum font scale on the label to allow it to fit.
3) lastly it appears it is not drawing centered. Not really sure why as you have given very little to look at.
You can use UIButton instead, and setting button.userInteractionEnabled = false.

Swift - Issues with setting background image in a UIScrollView

I have created a UIScrollView and added UILabels and UIButtons. I then have created a UIImageView and added it to the my UIScrollView. I have used the following code to set the UIImageView to the background of my UIScrollView.
let paperImageView = UIImageView(image: UIImage(named: "White Notebook Paper.png"))
paperImageView.frame = CGRect(x: -60, y: -60, width: UIScreen.main.bounds.width + 60, height: currentY + 60)
scrollView.addSubview(paperImageView)
scrollView.sendSubview(toBack: paperImageView)
As you can see in the following screenshot, by UIImageView is distorted.
The background image supposed to look like notebook paper. As you can see, the spacing of the lines becomes wider the lower you go in the UIScrollView. Thanks for taking the time to share your thoughts.
I forgot to change the content mode of the image view.
paperImageView.contentMode = .scaleAspectFill

Calculate where text starts on centre alignment

I have a UILabel that I want to add a UIView exactly where the text starts.
The problem is that the text in the label is aligned to the centre so I don't know how to determinate where the actual text starts and where to position this UIView.
Any idea how can I calculate this thing?
Thank you!
You can use a UIView container which will wrap the UILabel and your new UIView. Then you can let the UILabel decides the width depending on its content and set it in the center of the container. Once you have this working you can just read the UILabel x to understand where it starts.
so the UILabel will have the constraints to top, bottom, the height you want and at center to horizontal whereas the little UIView to top, bottom, height, width and leading equal to UILabel
From :How to find the position(x,y) of a letter in UILabel
NSRange range = [#"Good,Morning" rangeOfString:#","];
NSString *prefix = [#"Good,Morning" substringToIndex:range.location];
CGSize size = [prefix sizeWithFont:[UIFont systemFontOfSize:18]];
CGPoint p = CGPointMake(size.width, 0);
NSLog(#"p.x: %f",p.x);
NSLog(#"p.y: %f",p.y);
you can modify it for your purpose
you can get text size using "nsattributedstring"
let label = UILabel(frame: CGRectMake(0, 0, 100, 100))
label.text = "dshfk,j"
label.textAlignment = .Center
label.textColor = UIColor.redColor()
let string = label.attributedText
let width = string!.size().width
let height = string!.size().height
let view = UIView(frame: CGRectMake(width, height, width, height))
view.backgroundColor = UIColor.blackColor()
then you can find rect using this ..
sample view
You could also use
yourLabel.sizeToFit()
to automatically resize your label for the space it needs. And then read out the frame of your label with:
yourLabel.frame.size (width or height)

not able to prepare circular imageview using swift 2 in ios app for iPad

I am trying to load a circular imageview in my ios app.
I have tried all the combinations that has been listed in stack-overflow, but i still get the same error. I tried every mentioned step over here
How to set imageView in circle like imageContacts in Swift correctly?
What I have done is this
I have created an image view in my storyboard - with height=300, width=300, view mode = aspect fit.
I defined constraint to place the image view at the horizontal and vertical center. Also defined trailing from top and right edge
The 4 constraint are as follows
i. ImageView.centerY = centreY
ii.ImageView.centerY = centreY
iii. ImageView.top = TopLayoutGUide.bottom + 103
iv. trailingMargin = ImageView.trailing + 125
In my controller file I have `declared and IBOutlet for imageview as
#IBOutlet var imageView: UIImageView!
In my controller file I have used the following piece of code to make it circular
func circularImage(photoImageView: UIImageView?)
{
photoImageView!.layer.frame = CGRectInset(photoImageView!.layer.frame, 0, 0)
photoImageView!.layer.borderColor = UIColor.grayColor().CGColor
photoImageView!.layer.cornerRadius = photoImageView!.frame.width/2
photoImageView!.layer.masksToBounds = false
photoImageView!.clipsToBounds = true
photoImageView!.layer.borderWidth = 0.5
photoImageView!.contentMode = UIViewContentMode.ScaleAspectFill
}
I am however, getting an oval shaped image view.
Try this:
#IBOutlet var imageView: UIImageView! {
didSet {
imageView.layer.borderColor = UIColor.grayColor().CGColor
imageView.layer.cornerRadius = imageView.frame.width/2
imageView.clipsToBounds = true
imageView.layer.borderWidth = 0.5
}
}
And if you want you can just set clipsToBounds in storyboard instead of using it here.
Depending on when you're calling that circularImage function you wrote, the frame on the image might not be right yet.
If this doesn't fix the issue, you probably have some constraint troubles - make sure height and width are high priority and consider deleting the top & right constraints if you're using center horizontal and vertical.

UIView border has different widths. Why?

Here is the picture :
I tried first with buttons, and then with UILabels on top of UIViews but the problem remained the same. Here's my code:
interView = UIView()
interView.backgroundColor = UIColor.clearColor()
interView.layer.borderWidth = 0.4
interView.layer.borderColor = UIColor.blackColor().colorWithAlphaComponent(0.4).CGColor
interView.frame = CGRectMake(0, 0, 130, 70)
interView.layer.shadowColor = UIColor.clearColor().CGColor
self.view.addSubview(interView)
So, I would like my UIView to have the same widths on every side of its border. Why is this happening?

Resources