I am trying to build a UITableView which cells are containing a UIImageView and a few UILabels.
Not in general but sometimes updating the list via reloadData().
My table images conflict with UIViewContentMode.ScaleToFill and clipping to bounds.
The cell will appear like this, extending it's edges.:
These options are set for the image in awakeFromNib:
self.miniImg.layer.cornerRadius = self.miniImg.frame.width/2 // Circular
self.miniImg.clipsToBounds = true
self.miniImg.layer.masksToBounds = true
self.miniImg.contentMode = UIViewContentMode.ScaleToFill
My idea was to try and fix this by clipsToBounds and masksToBounds. But it didn't work.
Related
I am facing a strange issue when I try to apply rounded corners and shadow to my UITableView with dynamic content, which changes height as per the data (number of cells).
Here is screen recording of the jerky effect on scrolling.
My motive is to add shadow and corner radius to the dynamic table view.
When I add the corner radius it works fine, but when I try to add the shadow it doesn't show up. So I found a solution here saying that we need to set
self.tableView.clipsToBounds = false
self.tableView.layer.masksToBounds = false
However, after setting it I am getting the above jerky effect and the corner radius is no longer visible.
I tried other (proposed) solutions like adding a custom view on runtime with respect to tableview frame, but that creates a static height view and hence disabling the interactivity with the superview for that area.
Here is my code:
searchResultTblView.layer.cornerRadius = 10
searchResultTblView.layer.maskedCorners = [.layerMinXMaxYCorner , .layerMaxXMaxYCorner]
searchResultTblView.keyboardDismissMode = .onDrag
searchResultTblView.layer.shadowColor = UIColor.gray.cgColor
searchResultTblView.layer.shadowOpacity = 0.6
searchResultTblView.layer.shadowRadius = 5
searchResultTblView.tableFooterView = UIView.init(frame: CGRect.zero)
searchResultTblView.separatorInset = .zero
searchResultTblView.clipsToBounds = false
searchResultTblView.layer.masksToBounds = false
I know there's probably a better way to set both shadow and corner radius on the table view. However, I am currently unable to achieve it.
So I had done it several times, it worked fine, but i don't know what am I missing this time. The Problem is that image inside image view is not being clipped to bounds.
In simulator it is shown like this:
Inside the table view cell class, in my awakeFromNib() method i have following code:
override func awakeFromNib()
{
super.awakeFromNib()
profileImageView.layer.masksToBounds = true
profileImageView.clipsToBounds = true
profileImageView.layer.cornerRadius = profileImageView.frame.size.width / 2
profileImageView.layer.borderWidth = 2
profileImageView.layer.borderColor = UIColor.black.cgColor
}
but still as you see in the image, the image inside image view is coming out of the bounds, whereas circular border is correctly applied.
I have tried to put this code inside layoutSubviews() method in tableViewCell class, as well as i have also tried to apply this cornerRadius inside cellForRowAt method of table view.
Moreover, i have also tried changing the properties of image view to Aspect Fit and Scale To Fit from storyboard.
Nothing is working, The image is still shown outside the circular bounds! why ?
EDIT: Screenshot of my storyboard, where i had a prototype cell, with image view in it
As per the OP...
In cellForRowAt you're setting:
cell.imageView?.image
where you should be setting:
cell.profileImageView.image
A UITableViewCell has "built-in" .textLabel, .detailTextLabel and .imageView elements. We have to be careful not to use those objects if we've created a custom cell with our own labels / imageViews / etc.
I have a UIImageView in a UICollectionViewCell that I am moving in relation to a scroll views content offset. This is all to provide a parallax effect when the user scrolls horizontally, however there seems to be a clipping issue when the scroll view begins to scroll.
Instead of clipping, the edges persist and are shown outside of the containers boundaries.
The attached screenshot best showcases the behavior...
In the screen shot the scroll view has begun scrolling right and the accompanying views have begun translating however the UIImageView has not clipped its borders to match the receiver. Which in this case should be the transparent UIView.
Here is the UIImageView
let cellImage: UIImageView = {
let c = UIImageView()
c.clipsToBounds = true
c.layer.masksToBounds = true
c.contentMode = .scaleAspectFill
c.image = UIImage(named: "tree")
c.translatesAutoresizingMaskIntoConstraints = false
c.layer.cornerRadius = 15
return c
}()
The UIImageView is then added to a containerView and is set to fill it's bounds.
cellContainerView.addSubview(cellImage)
//add constraints
My thoughts are that if anything this issue may have to do with my interpretation of what the .clipsToBounds property does.
The documentation states:
Setting this value to true causes subviews to be clipped to the bounds
of the receiver.
I initially thought the receiver was the view you attached the UIImageView to however that is looking to not be the case.
Any suggestions?
As the documentation states:
Setting this value to true causes subviews to be clipped to the bounds
of the receiver.
Currently you are setting this property on cellImage ,so in this case it is the receiver, so its subviews will be clipped. But you want to clip this imageview so I think you need to set this property on cellContainerView, since you want its subviews to be clipped.
I have a table and a cell with a text and image. i want to remove the imageview completely from the cell because the cells are dynamically generated and some have images and some dont.
i have tried:
imageview.hidden = true
and i also tried:
imageview.removeFromSuperview()
but those remove the image but not the image view. right now, when there is no image, the image does not show up in the imageview but there is a huge gap below the text with no image because it seems like the imageview is still there. i want to remove the imageview completely so the huge gap is not there for cells with no images.
It's important that cells were reused. Don't remove because you didn't add it back. And if you hide image view, you should show it when this was needed. Like this:
if needed {
imageview.hidden = false
} else {
imageview.hidden = true
}
Using Autolayout you can solve this problem. Dont give fixed height and fixed width. And check content hugging/compression priority of imageview is properly set or not.
I will have about 12+ (any multiple of 4 per row) images that I want to have inside a ScrollView. See example below, the 12 circles (with the last row cut off a bit) are the UIImageViews.
I am not able to add the UIImageViews inside the ScrollView. The width,height of the scrollView is 250,250
This is what I have tried:
func setScrollView() {
scrollView_avatars.contentSize = CGSizeMake(250,300);
let imgView1: UIImageView = UIImageView(image: UIImage(named: "img1.jpg"))
let imgView2: UIImageView = UIImageView(image: UIImage(named: "img2.jpg"))
let imgView3: UIImageView = UIImageView(image: UIImage(named: "img3.jpg"))
scrollView_avatars.addSubview(imgView1)
scrollView_avatars.addSubview(imgView2)
scrollView_avatars.addSubview(imgView3)
}
iOS noob here
My code above gives me very bizarre output, i think the sizes of the UIImageViews are not set correctly.
I dont also know how to position the UIImageViews within the ScrollView like only part of a image is visible.
As #rmaddy says, you need to set the frame properties on your views. You will need to do math to calculate their positions based on row/column position in your grid of views.
If you're using AutoLayout you may need to generate constraints to set the view's sizes and positions. (I haven't tried to add views to a scroll view in code with AutoLayout before, so I'm not totally positive what happens if you just set their frames without defining constraints.)
You need to declare your image views like this:
if let image = UIImage(named: "myImage"){
let imageView = UIImageView(frame: CGRectMake(yourXpoint, yourYpoint, image.size.width, image.size.height))
imageView.image = image
}
where yourXpoint and yourYpoint is where you want the image origin to be set, this way you are saying to swift where do you want the images to be place and what is its size.
The if let is just to be safe in case the image does not exist.
Another good option is to set constrains as it will make your app have a nice layout in al different screen sizes and orientation