Skip to content

Commit

Permalink
Auto Sizing Cells.attachment
Browse files Browse the repository at this point in the history
  • Loading branch information
@aregvarda
aregvarda committed Dec 8, 2021
1 parent cd1ad5a commit 496ac1e
Show file tree
Hide file tree
Showing 4 changed files with 64 additions and 35 deletions.
5 changes: 4 additions & 1 deletion VKNewsFeed/Helpers/WebImageView.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,10 @@ import UIKit
class WebImageView: UIImageView {

func set(imageURL: String?) {
guard let imageURL = imageURL, let url = URL(string: imageURL) else { return }
guard let imageURL = imageURL, let url = URL(string: imageURL) else {
self.image = nil
return
}

if let cachedResponse = URLCache.shared.cachedResponse(for: URLRequest(url: url)) {
self.image = UIImage(data: cachedResponse.data)
Expand Down
9 changes: 7 additions & 2 deletions VKNewsFeed/Newsfeed/Cell/NewsfeedCell.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ protocol FeedCellViewModel {
protocol FeedCellSizes {
var postLabelFrame: CGRect { get }
var attachmentFrame: CGRect { get }
var bottomView: CGRect { get }
var bottomViewFrame: CGRect { get }
var totalHeight: CGFloat { get }
}

Expand All @@ -49,6 +49,11 @@ class NewsfeedCell: UITableViewCell {
@IBOutlet weak var viewsLabel: UILabel!
@IBOutlet weak var bottomView: UIView!

override func prepareForReuse() {
iconImageView.set(imageURL: nil)
postImageView.set(imageURL: nil)
}

override func awakeFromNib() {
super.awakeFromNib()
iconImageView.layer.cornerRadius = iconImageView.frame.width / 2
Expand All @@ -73,7 +78,7 @@ class NewsfeedCell: UITableViewCell {

postLabel.frame = viewModel.sizes.postLabelFrame
postImageView.frame = viewModel.sizes.attachmentFrame
bottomView.frame = viewModel.sizes.bottomView
bottomView.frame = viewModel.sizes.bottomViewFrame

if let photoAttachment = viewModel.photoAttachment {
postImageView.set(imageURL: photoAttachment.photoUrlString)
Expand Down
56 changes: 28 additions & 28 deletions VKNewsFeed/Newsfeed/Cell/NewsfeedCell.xib
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,17 +44,6 @@
</label>
</subviews>
</view>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="aOH-mV-4kC">
<rect key="frame" x="8" y="59" width="343" height="53"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="15"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="0qC-i0-tab" customClass="WebImageView" customModule="VKNewsFeed" customModuleProvider="target">
<rect key="frame" x="0.0" y="120" width="359" height="48"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
</imageView>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="epc-UZ-ePU" userLabel="Bottom View">
<rect key="frame" x="0.0" y="168" width="359" height="61"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMinY="YES"/>
Expand All @@ -63,72 +52,83 @@
<rect key="frame" x="0.0" y="0.0" width="80" height="61"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="like" translatesAutoresizingMaskIntoConstraints="NO" id="1kk-e4-s8l">
<rect key="frame" x="8" y="18" width="24" height="24"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="4756" textAlignment="natural" lineBreakMode="clip" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="rDC-NS-PEO">
<rect key="frame" x="36" y="22" width="44" height="17"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" weight="medium" pointSize="14"/>
<color key="textColor" red="0.50588235294117645" green="0.5490196078431373" blue="0.59999999999999998" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="like" translatesAutoresizingMaskIntoConstraints="NO" id="1kk-e4-s8l">
<rect key="frame" x="8" y="18" width="24" height="24"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
</imageView>
</subviews>
</view>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="YhH-QZ-fME">
<rect key="frame" x="80" y="0.0" width="80" height="61"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="comment" translatesAutoresizingMaskIntoConstraints="NO" id="9po-AN-3kz">
<rect key="frame" x="8" y="18" width="24" height="24"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="4756" textAlignment="natural" lineBreakMode="clip" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="XQZ-Ue-y7e">
<rect key="frame" x="36" y="22" width="44" height="17"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" weight="medium" pointSize="14"/>
<color key="textColor" red="0.50588235290000005" green="0.54901960780000003" blue="0.59999999999999998" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="comment" translatesAutoresizingMaskIntoConstraints="NO" id="9po-AN-3kz">
<rect key="frame" x="8" y="18" width="24" height="24"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
</imageView>
</subviews>
</view>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="aZ0-aO-p59">
<rect key="frame" x="160" y="0.0" width="80" height="61"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="share" translatesAutoresizingMaskIntoConstraints="NO" id="S4y-ai-UeJ">
<rect key="frame" x="8" y="18" width="24" height="24"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="4756" textAlignment="natural" lineBreakMode="clip" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="H00-4n-nVc">
<rect key="frame" x="36" y="22" width="44" height="17"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" weight="medium" pointSize="14"/>
<color key="textColor" red="0.50588235290000005" green="0.54901960780000003" blue="0.59999999999999998" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="share" translatesAutoresizingMaskIntoConstraints="NO" id="S4y-ai-UeJ">
<rect key="frame" x="8" y="18" width="24" height="24"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
</imageView>
</subviews>
</view>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="BsQ-aH-PXm">
<rect key="frame" x="279" y="0.0" width="80" height="61"/>
<autoresizingMask key="autoresizingMask" flexibleMaxY="YES"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="eye" translatesAutoresizingMaskIntoConstraints="NO" id="697-z8-a64">
<rect key="frame" x="8" y="18" width="24" height="24"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="56K" textAlignment="natural" lineBreakMode="clip" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ZnX-Rj-Gii">
<rect key="frame" x="36" y="22" width="44" height="17"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" weight="medium" pointSize="14"/>
<color key="textColor" red="0.50588235290000005" green="0.54901960780000003" blue="0.59999999999999998" alpha="1" colorSpace="calibratedRGB"/>
<nil key="highlightedColor"/>
</label>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" image="eye" translatesAutoresizingMaskIntoConstraints="NO" id="697-z8-a64">
<rect key="frame" x="8" y="18" width="24" height="24"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
</imageView>
</subviews>
</view>
</subviews>
</view>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="aOH-mV-4kC">
<rect key="frame" x="8" y="59" width="343" height="53"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="15"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="0qC-i0-tab" customClass="WebImageView" customModule="VKNewsFeed" customModuleProvider="target">
<rect key="frame" x="0.0" y="120" width="359" height="48"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" flexibleMinY="YES"/>
</imageView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</view>
Expand Down
29 changes: 25 additions & 4 deletions VKNewsFeed/Newsfeed/Cell/NewsfeedCellLayoutCalculator.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import UIKit
struct Sizes: FeedCellSizes {
var postLabelFrame: CGRect
var attachmentFrame: CGRect
var bottomView: CGRect
var bottomViewFrame: CGRect
var totalHeight: CGFloat
}

Expand All @@ -20,6 +20,7 @@ struct Constants {
static let topViewHeight: CGFloat = 36
static let postLabelInsets = UIEdgeInsets(top: 8 + Constants.topViewHeight + 8, left: 8, bottom: 8, right: 8)
static let postLabelFont = UIFont.systemFont(ofSize: 15)
static let bottomViewHeight: CGFloat = 44
}

protocol FeedCellLayoutCalculatorProtocol {
Expand Down Expand Up @@ -50,9 +51,29 @@ final class FeedCellLayoutCalculator: FeedCellLayoutCalculatorProtocol {

postLabelFrame.size = CGSize(width: width, height: height)
}

//MARK: postLabelAttachment

let attachmentTop = postLabelFrame.size == CGSize.zero ? Constants.postLabelInsets.top : postLabelFrame.maxY + Constants.postLabelInsets.bottom

var attachmentFrame = CGRect(origin: CGPoint(x: 0, y: attachmentTop),
size: CGSize.zero)
if let attachment = photoAttachment {
let photoHeight: Float = Float(attachment.height)
let photoWidth: Float = Float(attachment.width)
let ratio = CGFloat(photoHeight / photoWidth)
attachmentFrame.size = CGSize(width: cardViewWidth, height: cardViewWidth * ratio)
}

let bottomViewTop = max(postLabelFrame.maxY, attachmentFrame.maxY)
let bottomViewFrame = CGRect(origin: CGPoint(x: 0, y: bottomViewTop),
size: CGSize(width: cardViewWidth,
height: Constants.bottomViewHeight))
let totalHeight = bottomViewFrame.maxY + Constants.cardInsets.bottom

return Sizes(postLabelFrame: postLabelFrame,
attachmentFrame: CGRect.zero,
bottomView: CGRect.zero,
totalHeight: 300)
attachmentFrame: attachmentFrame,
bottomViewFrame: bottomViewFrame,
totalHeight: totalHeight)
}
}

0 comments on commit 496ac1e

Please sign in to comment.