Extract attachment layout to it's own view

Use AutoLayout + stack views instead of manual frames, fixes attachments
sometimes not using the whole width
This commit is contained in:
Shadowfacts 2019-06-16 19:02:18 -04:00
parent e6c6293c10
commit 55fc032f36
Signed by: shadowfacts
GPG Key ID: 94A5AB95422746E5
7 changed files with 125 additions and 96 deletions

View File

@ -160,6 +160,7 @@
D6C693F92162E4DB007D6A6D /* StatusContentLabel.swift in Sources */ = {isa = PBXBuildFile; fileRef = D6C693F82162E4DB007D6A6D /* StatusContentLabel.swift */; };
D6C693FC2162FE6F007D6A6D /* LoadingViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = D6C693FB2162FE6F007D6A6D /* LoadingViewController.swift */; };
D6C693FE2162FEEA007D6A6D /* UIViewController+Children.swift in Sources */ = {isa = PBXBuildFile; fileRef = D6C693FD2162FEEA007D6A6D /* UIViewController+Children.swift */; };
D6C7D27D22B6EBF800071952 /* AttachmentsContainerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D6C7D27C22B6EBF800071952 /* AttachmentsContainerView.swift */; };
D6C94D872139E62700CB5196 /* LargeImageViewController.swift in Sources */ = {isa = PBXBuildFile; fileRef = D6C94D862139E62700CB5196 /* LargeImageViewController.swift */; };
D6C94D892139E6EC00CB5196 /* AttachmentView.swift in Sources */ = {isa = PBXBuildFile; fileRef = D6C94D882139E6EC00CB5196 /* AttachmentView.swift */; };
D6D4DDD0212518A000E1C4BB /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = D6D4DDCF212518A000E1C4BB /* AppDelegate.swift */; };
@ -391,6 +392,7 @@
D6C693F82162E4DB007D6A6D /* StatusContentLabel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = StatusContentLabel.swift; sourceTree = "<group>"; };
D6C693FB2162FE6F007D6A6D /* LoadingViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LoadingViewController.swift; sourceTree = "<group>"; };
D6C693FD2162FEEA007D6A6D /* UIViewController+Children.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "UIViewController+Children.swift"; sourceTree = "<group>"; };
D6C7D27C22B6EBF800071952 /* AttachmentsContainerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AttachmentsContainerView.swift; sourceTree = "<group>"; };
D6C94D862139E62700CB5196 /* LargeImageViewController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = LargeImageViewController.swift; sourceTree = "<group>"; };
D6C94D882139E6EC00CB5196 /* AttachmentView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AttachmentView.swift; sourceTree = "<group>"; };
D6D4DDCC212518A000E1C4BB /* Tusker.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Tusker.app; sourceTree = BUILT_PRODUCTS_DIR; };
@ -918,13 +920,13 @@
D6D58DF822074B74009C8DD9 /* LinkLabel.swift */,
04496BD621625361001F1B23 /* ContentLabel.swift */,
D6C693F82162E4DB007D6A6D /* StatusContentLabel.swift */,
D6C94D882139E6EC00CB5196 /* AttachmentView.swift */,
D641C77E213DC78A004B4513 /* InlineTextAttachment.swift */,
04ED00B021481ED800567C53 /* SteppedProgressView.swift */,
D67C57A721E2649B00C3118B /* Account Detail */,
D67C57B021E28F9400C3118B /* Compose Status Reply */,
D60C07E221E817560057FAA8 /* Compose Media */,
D641C78A213DD926004B4513 /* Status */,
D6C7D27B22B6EBE200071952 /* Attachments */,
D641C78B213DD92F004B4513 /* Profile Header */,
D641C78C213DD937004B4513 /* Notifications */,
D6C693CB2161256B007D6A6D /* Silent Action Permissions */,
@ -954,6 +956,15 @@
path = Utilities;
sourceTree = "<group>";
};
D6C7D27B22B6EBE200071952 /* Attachments */ = {
isa = PBXGroup;
children = (
D6C94D882139E6EC00CB5196 /* AttachmentView.swift */,
D6C7D27C22B6EBF800071952 /* AttachmentsContainerView.swift */,
);
path = Attachments;
sourceTree = "<group>";
};
D6D4DDC3212518A000E1C4BB = {
isa = PBXGroup;
children = (
@ -1401,6 +1412,7 @@
D6285B5121EA6E6E00FE4B39 /* AdvancedTableViewController.swift in Sources */,
0450531F22B0097E00100BA2 /* Timline+UI.swift in Sources */,
D667E5F52135BCD50057A976 /* ConversationTableViewController.swift in Sources */,
D6C7D27D22B6EBF800071952 /* AttachmentsContainerView.swift in Sources */,
D6F953F021251A2900CF0F2B /* MastodonController.swift in Sources */,
0411610022B442870030A9B7 /* AttachmentViewController.swift in Sources */,
D62D2426217ABF63005076CC /* UserActivityType.swift in Sources */,

View File

@ -22,23 +22,20 @@ class AttachmentView: UIImageView, GIFAnimatable {
var gifData: Data?
public lazy var animator: Animator? = Animator(withDelegate: self)
init(attachment: Attachment) {
super.init(image: nil)
commonInit()
self.attachment = attachment
loadImage()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
commonInit()
}
override init(frame: CGRect) {
super.init(frame: frame)
commonInit()
}
convenience init(frame: CGRect, attachment: Attachment) {
self.init(frame: frame)
self.attachment = attachment
loadImage()
}
func commonInit() {
contentMode = .scaleAspectFill
layer.masksToBounds = true

View File

@ -0,0 +1,88 @@
//
// AttachmentsContainerView.swift
// Tusker
//
// Created by Shadowfacts on 6/16/19.
// Copyright © 2019 Shadowfacts. All rights reserved.
//
import UIKit
import Pachyderm
class AttachmentsContainerView: UIView {
var delegate: AttachmentViewDelegate?
override func awakeFromNib() {
super.awakeFromNib()
self.isUserInteractionEnabled = true
}
func updateUI(status: Status) {
let attachments = status.attachments.filter { $0.kind == .image }
if attachments.count > 0 {
self.isHidden = false
let mainView: UIView
switch attachments.count {
case 1:
mainView = createAttachmentView(attachments[0])
case 2:
mainView = createAttachmentsStack(axis: .horizontal, arrangedSubviews: [
createAttachmentView(attachments[0]),
createAttachmentView(attachments[1])
])
case 3:
mainView = createAttachmentsStack(axis: .horizontal, arrangedSubviews: [
createAttachmentView(attachments[0]),
createAttachmentsStack(axis: .vertical, arrangedSubviews: [
createAttachmentView(attachments[1]),
createAttachmentView(attachments[2])
])
])
case 4:
mainView = createAttachmentsStack(axis: .horizontal, arrangedSubviews: [
createAttachmentsStack(axis: .vertical, arrangedSubviews: [
createAttachmentView(attachments[0]),
createAttachmentView(attachments[2])
]),
createAttachmentsStack(axis: .vertical, arrangedSubviews: [
createAttachmentView(attachments[1]),
createAttachmentView(attachments[3])
])
])
default:
fatalError("Too many attachments")
}
addSubview(mainView)
NSLayoutConstraint.activate([
mainView.leadingAnchor.constraint(equalTo: leadingAnchor),
mainView.trailingAnchor.constraint(equalTo: trailingAnchor),
mainView.topAnchor.constraint(equalTo: topAnchor),
mainView.bottomAnchor.constraint(equalTo: bottomAnchor)
])
} else {
self.isHidden = true
subviews.forEach { $0.removeFromSuperview() }
}
}
private func createAttachmentView(_ attachment: Attachment) -> AttachmentView {
let attachmentView = AttachmentView(attachment: attachment)
attachmentView.delegate = delegate
attachmentView.translatesAutoresizingMaskIntoConstraints = false
return attachmentView
}
private func createAttachmentsStack(axis: NSLayoutConstraint.Axis, arrangedSubviews: [UIView]) -> UIStackView {
let stack = UIStackView(arrangedSubviews: arrangedSubviews)
stack.axis = axis
stack.spacing = 8
stack.translatesAutoresizingMaskIntoConstraints = false
return stack
}
}

View File

@ -22,7 +22,7 @@ class ConversationMainStatusTableViewCell: UITableViewCell, PreferencesAdaptive
@IBOutlet weak var contentLabel: StatusContentLabel!
@IBOutlet weak var avatarImageView: UIImageView!
@IBOutlet weak var timestampLabel: UILabel!
@IBOutlet weak var attachmentsView: UIView!
@IBOutlet weak var attachmentsView: AttachmentsContainerView!
@IBOutlet weak var favoriteButton: UIButton!
@IBOutlet weak var reblogButton: UIButton!
@ -49,12 +49,10 @@ class ConversationMainStatusTableViewCell: UITableViewCell, PreferencesAdaptive
override func awakeFromNib() {
displayNameLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(accountPressed)))
displayNameLabel.isUserInteractionEnabled = true
usernameLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(accountPressed)))
usernameLabel.isUserInteractionEnabled = true
avatarImageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(accountPressed)))
avatarImageView.isUserInteractionEnabled = true
avatarImageView.layer.masksToBounds = true
attachmentsView.delegate = self
attachmentsView.layer.cornerRadius = 5
attachmentsView.layer.masksToBounds = true
}
@ -93,33 +91,8 @@ class ConversationMainStatusTableViewCell: UITableViewCell, PreferencesAdaptive
}
updateTimestamp()
let attachments = status.attachments.filter({ $0.kind == .image })
if attachments.count > 0 {
attachmentsView.isHidden = false
let width = attachmentsView.bounds.width
let height: CGFloat = 200
switch attachments.count {
case 1:
addAttachmentView(frame: CGRect(x: 0, y: 0, width: width, height: height), attachment: attachments[0])
case 2:
addAttachmentView(frame: CGRect(x: 0, y: 0, width: width / 2 - 4, height: height), attachment: attachments[0])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: 0, width: width / 2 - 4, height: height), attachment: attachments[1])
case 3:
addAttachmentView(frame: CGRect(x: 0, y: 0, width: width / 2 - 4, height: height), attachment: attachments[0])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: 0, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[1])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: height / 2 + 4, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[2])
case 4:
addAttachmentView(frame: CGRect(x: 0, y: 0, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[0])
addAttachmentView(frame: CGRect(x: 0, y: height / 2 + 4, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[1])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: 0, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[2])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: height / 2 + 4, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[3])
default:
fatalError("Too many attachments")
}
} else {
attachmentsView.isHidden = true
}
attachmentsView.updateUI(status: status)
let realStatus = status.reblog ?? status
favorited = realStatus.favourited ?? false
reblogged = realStatus.reblogged ?? false
@ -149,13 +122,7 @@ class ConversationMainStatusTableViewCell: UITableViewCell, PreferencesAdaptive
updateTimestampWorkItem = nil
}
}
func addAttachmentView(frame: CGRect, attachment: Attachment) {
let attachmentView = AttachmentView(frame: frame, attachment: attachment)
attachmentView.delegate = self
attachmentsView.addSubview(attachmentView)
}
override func prepareForReuse() {
if let url = avatarURL {
ImageCache.avatars.cancel(url)

View File

@ -20,20 +20,20 @@
<view contentMode="scaleToFill" verticalHuggingPriority="249" translatesAutoresizingMaskIntoConstraints="NO" id="Cnd-Fj-B7l">
<rect key="frame" x="0.0" y="0.0" width="343" height="158"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="mB9-HO-1vf">
<imageView contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="mB9-HO-1vf">
<rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
<constraints>
<constraint firstAttribute="height" constant="50" id="XPF-UL-68q"/>
<constraint firstAttribute="width" constant="50" id="Yxp-Vr-dfl"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" verticalHuggingPriority="251" text="Display name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="lZY-2e-17d">
<label opaque="NO" contentMode="left" verticalHuggingPriority="251" text="Display name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="lZY-2e-17d">
<rect key="frame" x="58" y="0.0" width="252.5" height="29"/>
<fontDescription key="fontDescription" type="system" weight="semibold" pointSize="24"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="@username" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="SWg-Ka-QyP">
<label opaque="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="@username" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="SWg-Ka-QyP">
<rect key="frame" x="58" y="29" width="285" height="20.5"/>
<fontDescription key="fontDescription" type="system" weight="light" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="secondaryLabelColor"/>
@ -71,7 +71,7 @@
<constraint firstItem="SWg-Ka-QyP" firstAttribute="top" secondItem="lZY-2e-17d" secondAttribute="bottom" id="lvX-1b-8cN"/>
</constraints>
</view>
<view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="IF9-9U-Gk0">
<view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="IF9-9U-Gk0" customClass="AttachmentsContainerView" customModule="Tusker" customModuleProvider="target">
<rect key="frame" x="0.0" y="162" width="343" height="0.0"/>
<color key="backgroundColor" cocoaTouchSystemColor="secondarySystemBackgroundColor"/>
<constraints>

View File

@ -26,7 +26,7 @@ class StatusTableViewCell: UITableViewCell, PreferencesAdaptive {
@IBOutlet weak var avatarImageView: UIImageView!
@IBOutlet weak var reblogLabel: UILabel!
@IBOutlet weak var timestampLabel: UILabel!
@IBOutlet weak var attachmentsView: UIView!
@IBOutlet weak var attachmentsView: AttachmentsContainerView!
@IBOutlet weak var favoriteButton: UIButton!
@IBOutlet weak var reblogButton: UIButton!
@ -52,14 +52,11 @@ class StatusTableViewCell: UITableViewCell, PreferencesAdaptive {
override func awakeFromNib() {
displayNameLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(accountPressed)))
displayNameLabel.isUserInteractionEnabled = true
usernameLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(accountPressed)))
usernameLabel.isUserInteractionEnabled = true
reblogLabel.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(reblogLabelPressed)))
reblogLabel.isUserInteractionEnabled = true
avatarImageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(accountPressed)))
avatarImageView.isUserInteractionEnabled = true
avatarImageView.layer.masksToBounds = true
attachmentsView.delegate = self
attachmentsView.layer.cornerRadius = 5
attachmentsView.layer.masksToBounds = true
}
@ -106,34 +103,8 @@ class StatusTableViewCell: UITableViewCell, PreferencesAdaptive {
}
updateTimestamp()
let attachments = status.attachments.filter({ $0.kind == .image })
if attachments.count > 0 {
attachmentsView.isHidden = false
let width = attachmentsView.bounds.width
let height: CGFloat = 200
switch attachments.count {
case 1:
addAttachmentView(frame: CGRect(x: 0, y: 0, width: width, height: height), attachment: attachments[0])
case 2:
addAttachmentView(frame: CGRect(x: 0, y: 0, width: width / 2 - 4, height: height), attachment: attachments[0])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: 0, width: width / 2 - 4, height: height), attachment: attachments[1])
case 3:
addAttachmentView(frame: CGRect(x: 0, y: 0, width: width / 2 - 4, height: height), attachment: attachments[0])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: 0, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[1])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: height / 2 + 4, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[2])
case 4:
addAttachmentView(frame: CGRect(x: 0, y: 0, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[0])
addAttachmentView(frame: CGRect(x: 0, y: height / 2 + 4, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[1])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: 0, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[2])
addAttachmentView(frame: CGRect(x: width / 2 + 4, y: height / 2 + 4, width: width / 2 - 4, height: height / 2 - 4), attachment: attachments[3])
default:
fatalError("Too many attachments")
}
} else {
attachmentsView.isHidden = true
}
attachmentsView.updateUI(status: status)
let realStatus = status.reblog ?? status
favorited = realStatus.favourited ?? false
reblogged = realStatus.reblogged ?? false
@ -164,12 +135,6 @@ class StatusTableViewCell: UITableViewCell, PreferencesAdaptive {
}
}
func addAttachmentView(frame: CGRect, attachment: Attachment) {
let attachmentView = AttachmentView(frame: frame, attachment: attachment)
attachmentView.delegate = self
attachmentsView.addSubview(attachmentView)
}
override func prepareForReuse() {
if let url = avatarURL {
ImageCache.avatars.cancel(url)

View File

@ -17,7 +17,7 @@
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="top" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="yNh-ac-v6c">
<rect key="frame" x="16" y="8" width="343" height="134"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Reblogged by Person" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="lDH-50-AJZ">
<label opaque="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Reblogged by Person" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="lDH-50-AJZ">
<rect key="frame" x="0.0" y="0.0" width="163.5" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" cocoaTouchSystemColor="secondaryLabelColor"/>
@ -26,7 +26,7 @@
<view contentMode="scaleToFill" verticalHuggingPriority="249" translatesAutoresizingMaskIntoConstraints="NO" id="ve3-Y1-NQH">
<rect key="frame" x="0.0" y="28.5" width="343" height="75.5"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="QMP-j2-HLn">
<imageView contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="QMP-j2-HLn">
<rect key="frame" x="0.0" y="0.0" width="50" height="50"/>
<gestureRecognizers/>
<constraints>
@ -78,7 +78,7 @@
<constraint firstItem="QMP-j2-HLn" firstAttribute="leading" secondItem="ve3-Y1-NQH" secondAttribute="leading" id="zeW-tQ-uJl"/>
</constraints>
</view>
<view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="nbq-yr-2mA">
<view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="nbq-yr-2mA" customClass="AttachmentsContainerView" customModule="Tusker" customModuleProvider="target">
<rect key="frame" x="0.0" y="108" width="343" height="0.0"/>
<color key="backgroundColor" cocoaTouchSystemColor="secondarySystemBackgroundColor"/>
<constraints>