Add accessibility layout to timeline

This commit is contained in:
Maurice Parker
2019-04-29 17:19:08 -05:00
parent bf45cb89e9
commit ac93b91df9
7 changed files with 285 additions and 154 deletions

View File

@@ -0,0 +1,94 @@
//
// MasterTimelineAccessibilityCellLayout.swift
// NetNewsWire-iOS
//
// Created by Maurice Parker on 4/29/19.
// Copyright © 2019 Ranchero Software. All rights reserved.
//
import UIKit
import RSCore
struct MasterTimelineAccessibilityCellLayout: MasterTimelineCellLayout {
let height: CGFloat
let unreadIndicatorRect: CGRect
let starRect: CGRect
let avatarImageRect: CGRect
let titleRect: CGRect
let summaryRect: CGRect
let feedNameRect: CGRect
let dateRect: CGRect
let separatorInsets: UIEdgeInsets
init(width: CGFloat, insets: UIEdgeInsets, cellData: MasterTimelineCellData) {
var currentPoint = CGPoint.zero
currentPoint.x = MasterTimelineDefaultCellLayout.cellPadding.left + insets.left + MasterTimelineDefaultCellLayout.unreadCircleMarginLeft
currentPoint.y = MasterTimelineDefaultCellLayout.cellPadding.top
// Unread Indicator and Star
self.unreadIndicatorRect = MasterTimelineAccessibilityCellLayout.rectForUnreadIndicator(currentPoint)
self.starRect = MasterTimelineAccessibilityCellLayout.rectForStar(currentPoint)
// Start the point at the beginning position of the main block
currentPoint.x += MasterTimelineDefaultCellLayout.unreadCircleDimension + MasterTimelineDefaultCellLayout.unreadCircleMarginRight
// Separator Insets
self.separatorInsets = UIEdgeInsets(top: 0, left: currentPoint.x, bottom: 0, right: 0)
// Avatar
if cellData.showAvatar {
self.avatarImageRect = MasterTimelineAccessibilityCellLayout.rectForAvatar(currentPoint)
currentPoint.y = self.avatarImageRect.maxY
} else {
self.avatarImageRect = CGRect.zero
}
let textAreaWidth = width - (currentPoint.x + MasterTimelineDefaultCellLayout.chevronWidth + MasterTimelineDefaultCellLayout.cellPadding.right + insets.right)
// Title Text Block
let (titleRect, numberOfLinesForTitle) = MasterTimelineAccessibilityCellLayout.rectForTitle(cellData, currentPoint, textAreaWidth)
self.titleRect = titleRect
// Summary Text Block
if self.titleRect != CGRect.zero {
currentPoint.y = self.titleRect.maxY + MasterTimelineDefaultCellLayout.titleBottomMargin
}
self.summaryRect = MasterTimelineAccessibilityCellLayout.rectForSummary(cellData, currentPoint, textAreaWidth, numberOfLinesForTitle)
currentPoint.y = [self.titleRect, self.summaryRect].maxY()
if cellData.showFeedName {
self.feedNameRect = MasterTimelineAccessibilityCellLayout.rectForFeedName(cellData, currentPoint, textAreaWidth)
currentPoint.y = self.feedNameRect.maxY
} else {
self.feedNameRect = CGRect.zero
}
// Feed Name and Pub Date
self.dateRect = MasterTimelineAccessibilityCellLayout.rectForDate(cellData, currentPoint, textAreaWidth)
self.height = self.dateRect.maxY + MasterTimelineDefaultCellLayout.cellPadding.bottom
}
}
// MARK: - Calculate Rects
private extension MasterTimelineAccessibilityCellLayout {
static func rectForDate(_ cellData: MasterTimelineCellData, _ point: CGPoint, _ textAreaWidth: CGFloat) -> CGRect {
var r = CGRect.zero
let size = SingleLineUILabelSizer.size(for: cellData.dateString, font: MasterTimelineDefaultCellLayout.dateFont)
r.size = size
r.origin = point
return r
}
}

View File

@@ -1,145 +1,50 @@
//
// MasterTimelineCellLayout.swift
// NetNewsWire
// NetNewsWire-iOS
//
// Created by Brent Simmons on 2/6/16.
// Copyright © 2016 Ranchero Software, LLC. All rights reserved.
// Created by Maurice Parker on 4/29/19.
// Copyright © 2019 Ranchero Software. All rights reserved.
//
import UIKit
import RSCore
struct MasterTimelineCellLayout {
static let cellPadding = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
protocol MasterTimelineCellLayout {
static let unreadCircleMarginLeft = CGFloat(integerLiteral: 8)
static let unreadCircleDimension = CGFloat(integerLiteral: 8)
static let unreadCircleMarginRight = CGFloat(integerLiteral: 8)
static let starDimension = CGFloat(integerLiteral: 13)
static let avatarSize = CGSize(width: 48.0, height: 48.0)
static let avatarMarginRight = CGFloat(integerLiteral: 8)
static let avatarCornerRadius = CGFloat(integerLiteral: 4)
static let titleColor = AppAssets.timelineTextPrimaryColor
static var titleFont: UIFont {
return UIFont.preferredFont(forTextStyle: .headline)
}
static let titleBottomMargin = CGFloat(integerLiteral: 1)
static let feedColor = AppAssets.timelineTextSecondaryColor
static var feedNameFont: UIFont {
return UIFont.preferredFont(forTextStyle: .footnote)
}
static let feedRightMargin = CGFloat(integerLiteral: 8)
static let dateColor = AppAssets.timelineTextSecondaryColor
static var dateFont: UIFont {
return UIFont.preferredFont(forTextStyle: .footnote)
}
static let dateMarginBottom = CGFloat(integerLiteral: 1)
static let summaryColor = AppAssets.timelineTextPrimaryColor
static var summaryFont: UIFont {
return UIFont.preferredFont(forTextStyle: .body)
}
static let chevronWidth = CGFloat(integerLiteral: 28)
let width: CGFloat
let insets: UIEdgeInsets
let height: CGFloat
let unreadIndicatorRect: CGRect
let starRect: CGRect
let avatarImageRect: CGRect
let titleRect: CGRect
let summaryRect: CGRect
let feedNameRect: CGRect
let dateRect: CGRect
let separatorInsets: UIEdgeInsets
init(width: CGFloat, insets: UIEdgeInsets, cellData: MasterTimelineCellData, showAvatar: Bool) {
self.width = width
self.insets = insets
var currentPoint = CGPoint.zero
currentPoint.x = MasterTimelineCellLayout.cellPadding.left + insets.left + MasterTimelineCellLayout.unreadCircleMarginLeft
currentPoint.y = MasterTimelineCellLayout.cellPadding.top
// Unread Indicator and Star
self.unreadIndicatorRect = MasterTimelineCellLayout.rectForUnreadIndicator(currentPoint)
self.starRect = MasterTimelineCellLayout.rectForStar(currentPoint)
// Start the point at the beginning position of the main block
currentPoint.x += MasterTimelineCellLayout.unreadCircleDimension + MasterTimelineCellLayout.unreadCircleMarginRight
// Separator Insets
self.separatorInsets = UIEdgeInsets(top: 0, left: currentPoint.x, bottom: 0, right: 0)
// Avatar
if showAvatar {
self.avatarImageRect = MasterTimelineCellLayout.rectForAvatar(currentPoint)
currentPoint.x = self.avatarImageRect.maxX + MasterTimelineCellLayout.avatarMarginRight
} else {
self.avatarImageRect = CGRect.zero
}
let textAreaWidth = width - (currentPoint.x + MasterTimelineCellLayout.chevronWidth + MasterTimelineCellLayout.cellPadding.right + insets.right)
// Title Text Block
let (titleRect, numberOfLinesForTitle) = MasterTimelineCellLayout.rectForTitle(cellData, currentPoint, textAreaWidth)
self.titleRect = titleRect
// Summary Text Block
if self.titleRect != CGRect.zero {
currentPoint.y = self.titleRect.maxY + MasterTimelineCellLayout.titleBottomMargin
}
self.summaryRect = MasterTimelineCellLayout.rectForSummary(cellData, currentPoint, textAreaWidth, numberOfLinesForTitle)
currentPoint.y = [self.titleRect, self.summaryRect].maxY()
// Feed Name and Pub Date
self.dateRect = MasterTimelineCellLayout.rectForDate(cellData, currentPoint, textAreaWidth)
let feedNameWidth = textAreaWidth - (MasterTimelineCellLayout.feedRightMargin + self.dateRect.size.width)
self.feedNameRect = MasterTimelineCellLayout.rectForFeedName(cellData, currentPoint, feedNameWidth)
self.height = [self.avatarImageRect, self.feedNameRect].maxY() + MasterTimelineCellLayout.cellPadding.bottom
}
var height: CGFloat {get}
var unreadIndicatorRect: CGRect {get}
var starRect: CGRect {get}
var avatarImageRect: CGRect {get}
var titleRect: CGRect {get}
var summaryRect: CGRect {get}
var feedNameRect: CGRect {get}
var dateRect: CGRect {get}
var separatorInsets: UIEdgeInsets {get}
}
// MARK: - Calculate Rects
private extension MasterTimelineCellLayout {
extension MasterTimelineCellLayout {
static func rectForUnreadIndicator(_ point: CGPoint) -> CGRect {
var r = CGRect.zero
r.size = CGSize(width: MasterTimelineCellLayout.unreadCircleDimension, height: MasterTimelineCellLayout.unreadCircleDimension)
r.size = CGSize(width: MasterTimelineDefaultCellLayout.unreadCircleDimension, height: MasterTimelineDefaultCellLayout.unreadCircleDimension)
r.origin.x = point.x
r.origin.y = point.y + 9
return r
}
static func rectForStar(_ point: CGPoint) -> CGRect {
var r = CGRect.zero
r.size.width = MasterTimelineCellLayout.starDimension
r.size.height = MasterTimelineCellLayout.starDimension
r.origin.x = floor(point.x - ((MasterTimelineCellLayout.starDimension - MasterTimelineCellLayout.unreadCircleDimension) / 2.0))
r.size.width = MasterTimelineDefaultCellLayout.starDimension
r.size.height = MasterTimelineDefaultCellLayout.starDimension
r.origin.x = floor(point.x - ((MasterTimelineDefaultCellLayout.starDimension - MasterTimelineDefaultCellLayout.unreadCircleDimension) / 2.0))
r.origin.y = point.y + 5
return r
}
static func rectForAvatar(_ point: CGPoint) -> CGRect {
var r = CGRect.zero
r.size = MasterTimelineCellLayout.avatarSize
r.size = MasterTimelineDefaultCellLayout.avatarSize
r.origin = point
return r
}
@@ -153,7 +58,7 @@ private extension MasterTimelineCellLayout {
r.origin = point
let sizeInfo = MultilineUILabelSizer.size(for: cellData.title, font: MasterTimelineCellLayout.titleFont, numberOfLines: cellData.numberOfLines, width: Int(textAreaWidth))
let sizeInfo = MultilineUILabelSizer.size(for: cellData.title, font: MasterTimelineDefaultCellLayout.titleFont, numberOfLines: cellData.numberOfLines, width: Int(textAreaWidth))
r.size.width = textAreaWidth
r.size.height = sizeInfo.size.height
@@ -164,7 +69,7 @@ private extension MasterTimelineCellLayout {
return (r, sizeInfo.numberOfLinesUsed)
}
static func rectForSummary(_ cellData: MasterTimelineCellData, _ point: CGPoint, _ textAreaWidth: CGFloat, _ linesUsed: Int) -> CGRect {
let linesLeft = cellData.numberOfLines - linesUsed
@@ -176,7 +81,7 @@ private extension MasterTimelineCellLayout {
r.origin = point
let sizeInfo = MultilineUILabelSizer.size(for: cellData.summary, font: MasterTimelineCellLayout.summaryFont, numberOfLines: linesLeft, width: Int(textAreaWidth))
let sizeInfo = MultilineUILabelSizer.size(for: cellData.summary, font: MasterTimelineDefaultCellLayout.summaryFont, numberOfLines: linesLeft, width: Int(textAreaWidth))
r.size.width = textAreaWidth
r.size.height = sizeInfo.size.height
@@ -187,26 +92,13 @@ private extension MasterTimelineCellLayout {
return r
}
static func rectForDate(_ cellData: MasterTimelineCellData, _ point: CGPoint, _ textAreaWidth: CGFloat) -> CGRect {
var r = CGRect.zero
let size = SingleLineUILabelSizer.size(for: cellData.dateString, font: MasterTimelineCellLayout.dateFont)
r.size = size
r.origin.x = (point.x + textAreaWidth) - size.width
r.origin.y = point.y
return r
}
static func rectForFeedName(_ cellData: MasterTimelineCellData, _ point: CGPoint, _ textAreaWidth: CGFloat) -> CGRect {
var r = CGRect.zero
r.origin = point
let size = SingleLineUILabelSizer.size(for: cellData.feedName, font: MasterTimelineCellLayout.feedNameFont)
let size = SingleLineUILabelSizer.size(for: cellData.feedName, font: MasterTimelineDefaultCellLayout.feedNameFont)
r.size = size
if r.size.width > textAreaWidth {

View File

@@ -0,0 +1,128 @@
//
// MasterTimelineDefaultCellLayout.swift
// NetNewsWire
//
// Created by Brent Simmons on 2/6/16.
// Copyright © 2016 Ranchero Software, LLC. All rights reserved.
//
import UIKit
import RSCore
struct MasterTimelineDefaultCellLayout: MasterTimelineCellLayout {
static let cellPadding = UIEdgeInsets(top: 8, left: 16, bottom: 8, right: 16)
static let unreadCircleMarginLeft = CGFloat(integerLiteral: 8)
static let unreadCircleDimension = CGFloat(integerLiteral: 8)
static let unreadCircleMarginRight = CGFloat(integerLiteral: 8)
static let starDimension = CGFloat(integerLiteral: 13)
static let avatarSize = CGSize(width: 48.0, height: 48.0)
static let avatarMarginRight = CGFloat(integerLiteral: 8)
static let avatarCornerRadius = CGFloat(integerLiteral: 4)
static let titleColor = AppAssets.timelineTextPrimaryColor
static var titleFont: UIFont {
return UIFont.preferredFont(forTextStyle: .headline)
}
static let titleBottomMargin = CGFloat(integerLiteral: 1)
static let feedColor = AppAssets.timelineTextSecondaryColor
static var feedNameFont: UIFont {
return UIFont.preferredFont(forTextStyle: .footnote)
}
static let feedRightMargin = CGFloat(integerLiteral: 8)
static let dateColor = AppAssets.timelineTextSecondaryColor
static var dateFont: UIFont {
return UIFont.preferredFont(forTextStyle: .footnote)
}
static let dateMarginBottom = CGFloat(integerLiteral: 1)
static let summaryColor = AppAssets.timelineTextPrimaryColor
static var summaryFont: UIFont {
return UIFont.preferredFont(forTextStyle: .body)
}
static let chevronWidth = CGFloat(integerLiteral: 28)
let height: CGFloat
let unreadIndicatorRect: CGRect
let starRect: CGRect
let avatarImageRect: CGRect
let titleRect: CGRect
let summaryRect: CGRect
let feedNameRect: CGRect
let dateRect: CGRect
let separatorInsets: UIEdgeInsets
init(width: CGFloat, insets: UIEdgeInsets, cellData: MasterTimelineCellData) {
var currentPoint = CGPoint.zero
currentPoint.x = MasterTimelineDefaultCellLayout.cellPadding.left + insets.left + MasterTimelineDefaultCellLayout.unreadCircleMarginLeft
currentPoint.y = MasterTimelineDefaultCellLayout.cellPadding.top
// Unread Indicator and Star
self.unreadIndicatorRect = MasterTimelineDefaultCellLayout.rectForUnreadIndicator(currentPoint)
self.starRect = MasterTimelineDefaultCellLayout.rectForStar(currentPoint)
// Start the point at the beginning position of the main block
currentPoint.x += MasterTimelineDefaultCellLayout.unreadCircleDimension + MasterTimelineDefaultCellLayout.unreadCircleMarginRight
// Separator Insets
self.separatorInsets = UIEdgeInsets(top: 0, left: currentPoint.x, bottom: 0, right: 0)
// Avatar
if cellData.showAvatar {
self.avatarImageRect = MasterTimelineDefaultCellLayout.rectForAvatar(currentPoint)
currentPoint.x = self.avatarImageRect.maxX + MasterTimelineDefaultCellLayout.avatarMarginRight
} else {
self.avatarImageRect = CGRect.zero
}
let textAreaWidth = width - (currentPoint.x + MasterTimelineDefaultCellLayout.chevronWidth + MasterTimelineDefaultCellLayout.cellPadding.right + insets.right)
// Title Text Block
let (titleRect, numberOfLinesForTitle) = MasterTimelineDefaultCellLayout.rectForTitle(cellData, currentPoint, textAreaWidth)
self.titleRect = titleRect
// Summary Text Block
if self.titleRect != CGRect.zero {
currentPoint.y = self.titleRect.maxY + MasterTimelineDefaultCellLayout.titleBottomMargin
}
self.summaryRect = MasterTimelineDefaultCellLayout.rectForSummary(cellData, currentPoint, textAreaWidth, numberOfLinesForTitle)
currentPoint.y = [self.titleRect, self.summaryRect].maxY()
// Feed Name and Pub Date
self.dateRect = MasterTimelineDefaultCellLayout.rectForDate(cellData, currentPoint, textAreaWidth)
let feedNameWidth = textAreaWidth - (MasterTimelineDefaultCellLayout.feedRightMargin + self.dateRect.size.width)
self.feedNameRect = MasterTimelineDefaultCellLayout.rectForFeedName(cellData, currentPoint, feedNameWidth)
self.height = [self.avatarImageRect, self.feedNameRect].maxY() + MasterTimelineDefaultCellLayout.cellPadding.bottom
}
}
// MARK: - Calculate Rects
extension MasterTimelineDefaultCellLayout {
static func rectForDate(_ cellData: MasterTimelineCellData, _ point: CGPoint, _ textAreaWidth: CGFloat) -> CGRect {
var r = CGRect.zero
let size = SingleLineUILabelSizer.size(for: cellData.dateString, font: MasterTimelineDefaultCellLayout.dateFont)
r.size = size
r.origin.x = (point.x + textAreaWidth) - size.width
r.origin.y = point.y
return r
}
}

View File

@@ -132,24 +132,28 @@ private extension MasterTimelineTableViewCell {
}
func updatedLayout() -> MasterTimelineCellLayout {
return MasterTimelineCellLayout(width: bounds.width, insets: safeAreaInsets, cellData: cellData, showAvatar: avatarImageView.image != nil)
if UIApplication.shared.preferredContentSizeCategory.isAccessibilityCategory {
return MasterTimelineAccessibilityCellLayout(width: bounds.width, insets: safeAreaInsets, cellData: cellData)
} else {
return MasterTimelineDefaultCellLayout(width: bounds.width, insets: safeAreaInsets, cellData: cellData)
}
}
func updateTitleView() {
titleView.font = MasterTimelineCellLayout.titleFont
titleView.textColor = MasterTimelineCellLayout.titleColor
titleView.font = MasterTimelineDefaultCellLayout.titleFont
titleView.textColor = MasterTimelineDefaultCellLayout.titleColor
updateTextFieldText(titleView, cellData?.title)
}
func updateSummaryView() {
summaryView.font = MasterTimelineCellLayout.summaryFont
summaryView.textColor = MasterTimelineCellLayout.summaryColor
summaryView.font = MasterTimelineDefaultCellLayout.summaryFont
summaryView.textColor = MasterTimelineDefaultCellLayout.summaryColor
updateTextFieldText(summaryView, cellData?.summary)
}
func updateDateView() {
dateView.font = MasterTimelineCellLayout.dateFont
dateView.textColor = MasterTimelineCellLayout.dateColor
dateView.font = MasterTimelineDefaultCellLayout.dateFont
dateView.textColor = MasterTimelineDefaultCellLayout.dateColor
updateTextFieldText(dateView, cellData.dateString)
}
@@ -165,8 +169,8 @@ private extension MasterTimelineTableViewCell {
if cellData.showFeedName {
showView(feedNameView)
feedNameView.font = MasterTimelineCellLayout.feedNameFont
feedNameView.textColor = MasterTimelineCellLayout.feedColor
feedNameView.font = MasterTimelineDefaultCellLayout.feedNameFont
feedNameView.textColor = MasterTimelineDefaultCellLayout.feedColor
updateTextFieldText(feedNameView, cellData.feedName)
} else {
hideView(feedNameView)
@@ -189,7 +193,7 @@ private extension MasterTimelineTableViewCell {
}
showView(avatarImageView)
avatarImageView.layer.cornerRadius = MasterTimelineCellLayout.avatarCornerRadius
avatarImageView.layer.cornerRadius = MasterTimelineDefaultCellLayout.avatarCornerRadius
avatarImageView.clipsToBounds = true
if avatarImageView.image !== cellData.avatar {

View File

@@ -21,7 +21,7 @@ class MasterUnreadIndicatorView: UIView {
}
static let bezierPath: UIBezierPath = {
let r = CGRect(x: 0.0, y: 0.0, width: MasterTimelineCellLayout.unreadCircleDimension, height: MasterTimelineCellLayout.unreadCircleDimension)
let r = CGRect(x: 0.0, y: 0.0, width: MasterTimelineDefaultCellLayout.unreadCircleDimension, height: MasterTimelineDefaultCellLayout.unreadCircleDimension)
return UIBezierPath(ovalIn: r)
}()

View File

@@ -334,9 +334,14 @@ class MasterTimelineViewController: ProgressTableViewController, UndoableCommand
let prototypeArticle = Article(accountID: prototypeID, articleID: prototypeID, feedID: prototypeID, uniqueID: prototypeID, title: longTitle, contentHTML: nil, contentText: nil, url: nil, externalURL: nil, summary: nil, imageURL: nil, bannerImageURL: nil, datePublished: nil, dateModified: nil, authors: nil, attachments: nil, status: status)
let prototypeCellData = MasterTimelineCellData(article: prototypeArticle, showFeedName: true, feedName: "Prototype Feed Name", avatar: nil, showAvatar: false, featuredImage: nil, numberOfLines: numberOfTextLines)
let layout = MasterTimelineCellLayout(width: tableView.bounds.width, insets: tableView.safeAreaInsets, cellData: prototypeCellData, showAvatar: false)
tableView.estimatedRowHeight = layout.height
if UIApplication.shared.preferredContentSizeCategory.isAccessibilityCategory {
let layout = MasterTimelineAccessibilityCellLayout(width: tableView.bounds.width, insets: tableView.safeAreaInsets, cellData: prototypeCellData)
tableView.estimatedRowHeight = layout.height
} else {
let layout = MasterTimelineDefaultCellLayout(width: tableView.bounds.width, insets: tableView.safeAreaInsets, cellData: prototypeCellData)
tableView.estimatedRowHeight = layout.height
}
}