I'm actually trying to make the image view height dynamic
I have tried UITableViewAutomaticDimension
in the cell class I have set the image's dynamic height based on the aspect constraint
Well, you can't achieve the dynamic height of cell with UITableViewAutomaticDimension on the basis of image's constraints.
BUT image's height and width can help you in this. There is a plenty of help regarding this issue is available in following answer:
Dynamic UIImageView Size Within UITableView
make sure you have set top-bottom constraints in storyboard.
save the thumbnail image as data to local storage (I'm using core data)
using the thumb image, calculate the aspect of the image
customise the row height as you want in heightForRowAt method.
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
let entity = self.fetchedResultController.object(at: indexPath as IndexPath) as! Message
var newh:CGFloat = 100.00
if let fileThumbnails = entity.file_thumbnails as? NSArray{
if fileThumbnails.count != 0{
fileThumbnails.map { (thumbNail) in
newh = self.getImageHeight(image:UIImage(data: thumbNail as! Data)! , h: UIImage(data: thumbNail as! Data)!.size.height , w: UIImage(data: thumbNail as! Data)!.size.width)
}
}
}
if entity.fileStatus == "DeletedMedia" {
newh = 100
}
if entity.fileStatus == nil{
newh = 0.0
}
print ("newH " , newh)
return newh
}
func getImageHeight(image : UIImage, h : CGFloat, w : CGFloat) -> CGFloat {
let aspect = image.size.width / image.size.height
var newH = (messagesTV.frame.size.width * 0.6) / aspect
// customise as you want in newH
if(newH > 500){
newH = 500
//maximum height 500
}
if(newH < 100){
newH = 100
//minimum height = 100
}
return newH
}
if the thumb image is deleted in local storage then a placeholder image will be shown.
you can customise the newHvariable to get the desired output
Related
What I want to achive is something like list view in Files App. Document will display a little thumbnail if has one. Otherwise a SF Symbol with textStyle .callout will show up. All the rows’ labels should be left aligned. But currently the thumbnails are much bigger than the SF Symbols so that they push the labels away.
I emphasize textStyle because my app supports dynamic type, which means the imageView's frame calculation should base on SF Symbol.
I try to override layoutSubviews. But can't figure out how to do the calculation.
Files App
My App
For maximum control of your cell appearance, you should create a custom cell. But, if you want use a standard Subtitle cell, you can resize your images when setting them.
There are some excellent image scaling functions in this Stack Overflow answer: how to resize a bitmap on iOS
Add the extensions from that answer to your project. Specifically, for your needs, we'll use scaledAspectFit().
So, assuming you have a Subtitle cell prototype, with identifier of "cell", your cellForRowAt will look something like this:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
// however you have your data stored
let title = "IMG_0001.JPG"
let subtitle = "Today at 10:15 AM, 2.5 MB"
let imgName = "IMG_0001"
cell.textLabel?.text = title
cell.detailTextLabel?.text = subtitle
if let img = UIImage(named: imgName) {
// default cell image size is 56x56 (points)
// so we'll proportionally scale the image,
// using screen scale to get the best resolution
let widthHeight = UIScreen.main.scale * 56
let scaledImg = img.scaledAspectFit(to: CGSize(width: widthHeight, height: widthHeight))
cell.imageView?.image = scaledImg
}
return cell
}
Edit
Takes only a little research to implement the use fo SF Symbols...
Add this func to your table view controller - it will return a UIImage of an SF Symbol at specified point size, centered in specified size:
private func drawSystemImage(_ sysName: String, at pointSize: CGFloat, centeredIn size: CGSize) -> UIImage? {
let cfg = UIImage.SymbolConfiguration(pointSize: pointSize)
guard let img = UIImage(systemName: sysName, withConfiguration: cfg) else { return nil }
let x = (size.width - img.size.width) * 0.5
let y = (size.height - img.size.height) * 0.5
let renderer = UIGraphicsImageRenderer(size: size)
return renderer.image { context in
img.draw(in: CGRect(origin: CGPoint(x: x, y: y), size: img.size))
}
}
Then change your cellForRowAt func as needed:
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath)
// however you have your data stored
let title = "IMG_0001.JPG"
let subtitle = "Today at 10:15 AM, 2.5 MB"
let imgName = "IMG_0001"
cell.textLabel?.text = title
cell.detailTextLabel?.text = subtitle
// defalt image view size
let wh = UIScreen.main.scale * 56
let targetSize = CGSize(width: wh, height: wh)
// for this example, if it's the first row, generate an image from SF Symbol
if indexPath.row == 0 {
if let img = drawSystemImage("doc.text", at: UIScreen.main.scale * 24, centeredIn: targetSize) {
cell.imageView?.image = img
}
} else {
if let img = UIImage(named: imgName) {
// default cell image size is 56x56 (points)
// so we'll proportionally scale the image,
// using screen scale to get the best resolution
let scaledImg = img.scaledAspectFit(to: targetSize)
cell.imageView?.image = scaledImg
}
}
return cell
}
I'll leave it up to you to tweak the point size as desired (and configure any other properties of your SF Symbol image such as weight, scale, color, etc).
I am creating a kind of horizontally scrolling menu with multiple items that the user can scroll through.(see picture at the bottom for a preview of what I mean)
The UICollectionView offset already always centers on one of its items. What I want to do is that when an item is the next one to approach the center, I want to apply a transformation to make it larger. This is the code that I'm using to achieve this (the logic doesn't handle animating out of the center or scrolling the other direction yet):
func scrollViewDidScroll(_ scrollView: UIScrollView) {
guard let scrolledCollectionView = scrollView as? UICollectionView,
let flowLayout = scrolledCollectionView.collectionViewLayout as? UICollectionViewFlowLayout else { return }
let itemWidth = flowLayout.itemSize.width
let collectionViewCenter = collectionView.bounds.width * 0.5 + scrolledCollectionView.contentOffset.x
let itemToEnlarge = Int((scrolledCollectionView.contentOffset.x + (itemWidth * 0.5)) / (itemWidth + flowLayout.minimumInteritemSpacing))
let itemEnlargeIndexpath = IndexPath(row: itemToEnlarge, section: 0)
guard let cellToAnimate = collectionView.cellForItem(at: itemEnlargeIndexpath) else { return }
let diff = cellToAnimate.center.x - collectionViewCenter
var transformationVolume: CGFloat = 1
if diff == 0 {
transformationVolume += 0.2
} else {
transformationVolume += (0.2 / diff)
}
DispatchQueue.main.async {
cellToAnimate.transform = CGAffineTransform(scaleX: transformationVolume, y: transformationVolume)
}
}
The problem that I'm having is that the transformation is only applied once the collectionview has stopped scrolling. Does anyone know if there's a way to apply the transformation dynamically? So that if you scroll the item towards the center little by little, the transformation is applied incrementally.
Image on right is what I try to achieve
Does anyone know how I could achieve this on a two column UICollectionView ?
I'm able to discern my columns by testing if (indexPath.row % 2 = 0) but I can't manage to achieve this result.
Is their a simple way to do so ? Or would I need a custom UICollectionViewFlowLayout ?
Note : All my cells are the same size.
Yes, you need to create a custom UICollectionViewLayout and that's simple to achieve. All you need is the following:
prepare(): Perform the up-front calculations needed to provide layout information
collectionViewContentSize: Return the overall size of the entire content area based on your initial calculations
layoutAttributesForElements(in:): Return the attributes for cells and views that are in the specified rectangle
Now that we have cells of the same size it's pretty easy to achieve.
Let's declare few variables to use:
// Adjust this as you need
fileprivate var offset: CGFloat = 50
// Properties for configuring the layout: the number of columns and the cell padding.
fileprivate var numberOfColumns = 2
fileprivate var cellPadding: CGFloat = 10
// Cache the calculated attributes. When you call prepare(), you’ll calculate the attributes for all items and add them to the cache. You can be efficient and
fileprivate var cache = [UICollectionViewLayoutAttributes]()
// Properties to store the content size.
fileprivate var contentHeight: CGFloat = 0
fileprivate var contentWidth: CGFloat {
guard let collectionView = collectionView else {
return 0
}
let insets = collectionView.contentInset
return collectionView.bounds.width - (insets.left + insets.right)
}
Next let's override the prepare() method
override func prepare() {
// If cache is empty and the collection view exists – calculate the layout attributes
guard cache.isEmpty == true, let collectionView = collectionView else {
return
}
// xOffset: array with the x-coordinate for every column based on the column widths
// yOffset: array with the y-position for every column, Using odd-even logic to push the even cell upwards and odd cells down.
let columnWidth = contentWidth / CGFloat(numberOfColumns)
var xOffset = [CGFloat]()
for column in 0 ..< numberOfColumns {
xOffset.append(CGFloat(column) * columnWidth)
}
var column = 0
var yOffset = [CGFloat]()
for i in 0..<numberOfColumns {
yOffset.append((i % 2 == 0) ? 0 : offset)
}
for item in 0 ..< collectionView.numberOfItems(inSection: 0) {
let indexPath = IndexPath(item: item, section: 0)
// Calculate insetFrame that can be set to the attribute
let cellHeight = columnWidth - (cellPadding * 2)
let height = cellPadding * 2 + cellHeight
let frame = CGRect(x: xOffset[column], y: yOffset[column], width: columnWidth, height: height)
let insetFrame = frame.insetBy(dx: cellPadding, dy: cellPadding)
// Create an instance of UICollectionViewLayoutAttribute, sets its frame using insetFrame and appends the attributes to cache.
let attributes = UICollectionViewLayoutAttributes(forCellWith: indexPath)
attributes.frame = insetFrame
cache.append(attributes)
// Update the contentHeight to account for the frame of the newly calculated item. It then advances the yOffset for the current column based on the frame
contentHeight = max(contentHeight, frame.maxY)
yOffset[column] = yOffset[column] + height
column = column < (numberOfColumns - 1) ? (column + 1) : 0
}
}
Last we need collectionViewContentSize and layoutAttributesForElements(in:)
// Using contentWidth and contentHeight from previous steps, calculate collectionViewContentSize.
override var collectionViewContentSize: CGSize {
return CGSize(width: contentWidth, height: contentHeight)
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
var visibleLayoutAttributes = [UICollectionViewLayoutAttributes]()
for attributes in cache {
if attributes.frame.intersects(rect) {
visibleLayoutAttributes.append(attributes)
}
}
return visibleLayoutAttributes
}
override func layoutAttributesForItem(at indexPath: IndexPath) -> UICollectionViewLayoutAttributes? {
return cache[indexPath.item]
}
You can find gist with the class.
This is how it appears:
Note: It is just a demo, you may have to tweak it according to your needs.
Hope It Helps!
I'm building a chat application where each message are inserted into a row inside a table. Each row contains an avatar and a message. I want to set the width and height of the UITextArea as per the length of the text to put inside.
Below is the code I've used. But here, both height and width are constant (200x50)
PS: I'm a newbie to Swift and ios and I'm using Swift 3. Every code I got after searching is in objective-c or swift 2
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = Bundle.main.loadNibNamed("ChatBox1", owner: self, options: nil)?.first as! ChatBox1
let myTextField: UITextView = UITextView(frame: CGRect(x: 30, y: 20, width: 200.00, height: 50.00));
cell.addSubview(myTextField)
myTextField.isScrollEnabled = false
myTextField.isUserInteractionEnabled = false
myTextField.backgroundColor = UIColor.lightGray
myTextField.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry."
myTextField.layer.cornerRadius = 5
print(myTextField.intrinsicContentSize)
let image = UIImage(named: "agent")
let imageView = UIImageView(image: image)
imageView.frame = CGRect(x: 0, y: 0, width: 40, height: 40)
cell.addSubview(imageView)
return cell
}
This two methods are done to set Height and width of textview according to the text on chat.
You can use these. (swift 2.3)
var screenrect = UIScreen.mainScreen().bounds
func GET_WIDTH(textView : UITextView , text : String)-> CGFloat
{
textView.text = text;
let size = textView.bounds.size
let newSizeWidth = textView.sizeThatFits(CGSize(width: CGFloat.max, height: size.height))
// Resize the cell only when cell's size is changed
if size.width != newSizeWidth.width
{
if( newSizeWidth.width > screenrect.width-120 )
{
textView.layer.frame.size.width = screenrect.width-120;
}
else if ( newSizeWidth.width < 40 )
{
textView.layer.frame.size.width = 40
}
else
{
textView.layer.frame.size.width = newSizeWidth.width;
}
}
return textView.layer.frame.size.width + 40;
}
func GET_HEIGHT(textView : UITextView , text : String)-> CGFloat
{
textView.text = text;
let size2 = textView.bounds.size
let newSize = textView.sizeThatFits(CGSize(width: size2.width, height: CGFloat.max))
if size2.height != newSize.height
{
if( newSize.height < 40 )
{
textView.layer.frame.size.height = 40
}
else
{
textView.layer.frame.size.height = newSize.height
}
}
return textView.layer.frame.size.height + 15;
}
You have to call the functions of the textview like this to set height and width.
let textViewRight=UITextView(frame: CGRectMake(0, 4, 40, 40));
textViewRight.layer.frame.size.width = GET_WIDTH(textViewRight, text: currentObject.chat_userMessage)
textViewRight.layer.frame.size.height = GET_HEIGHT(textViewRight, text: currentObject.chat_userMessage)
Try this code:
Answer 1:
func tableView(tableView:UITableView!, numberOfRowsInSection section: Int) -> Int {
yourTableViewName.estimatedRowHeight = 44.0 // Standard tableViewCell size
yourTableViewName.rowHeight = UITableViewAutomaticDimension
return yourArrayName.count }
And also put this code inside your Cell for incase...
yourCell.sizeToFit()
Answer 2:
override func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
override func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {
return UITableViewAutomaticDimension
}
in viewDidLoad Add this
tableView.estimatedRowHeight = 44.0
tableView.rowHeight = UITableViewAutomaticDimension
Just add these two lines and your problem will b solved
Take textView height constraint and set it equal to the content size of the textView.
Alternatively, if you use autolayout you can set the content hugging and compression property to 1000. It should expand your cell according to the content.
I'm trying to get my label and image to dynamically change the height of a uicollectionviewcell. How can I estimate the correct height of what the cell should be from each image obtained? It is expecting a width and height, but I don't want to distort the image.
I'm following this cocoapod: https://github.com/ecerney/CollectionViewWaterfallLayout
Or would there be a better approach to setting the label/text?
Currently the spacing between the label and image is not set...
The cell inside the storyboard looks like the following with UIImageView set to Aspect Fill:
Code to obtain an image set
lazy var imageSet: [UIImage] = {
var _imageSet = [UIImage]()
for x in 0...10{
let array = [600,800,900]
let array2 = [1000,1200,1400]
let randomIndex = Int(arc4random_uniform(UInt32(array.count)))
let randomIndex2 = Int(arc4random_uniform(UInt32(array2.count)))
let urlString:String = String(format: "http://lorempixel.com/%#/%#/", String(array[randomIndex]),String(array2[randomIndex2]))
let image = UIImage(data: NSData(contentsOfURL: NSURL(string: urlString)!)!)
print(urlString)
print("\(x)\n")
_imageSet.append(image!)
}
return _imageSet
}()
Code for setting the size of each cell...
func collectionView(collectionView: UICollectionView, layout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
let thisLayout = layout as! CollectionViewWaterfallLayout
var globalImage = imageSet[indexPath.row]
var finalWith = globalImage.size.width
var finalHeight = globalImage.size.height
var newSize = CGSize(width: finalWith, height: finalHeight )
return newSize
}
My repo https://github.com/rlam3/waterfallCocaopod