Commit 33f021c4 authored by Aral Balkan's avatar Aral Balkan

Implement text sizing

parent 2e0c46c2
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14313.18" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
<device id="retina5_5" orientation="portrait">
<device id="ipad9_7" orientation="landscape">
<adaptation id="fullscreen"/>
</device>
<dependencies>
......@@ -14,16 +14,16 @@
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModule="AutoLayout" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="414" height="736"/>
<rect key="frame" x="0.0" y="0.0" width="1024" height="768"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="cUA-A3-7ag" userLabel="Top Margin">
<rect key="frame" x="16" y="19.999999999999996" width="382" height="36.666666666666657"/>
<rect key="frame" x="16" y="20" width="992" height="38.5"/>
<color key="backgroundColor" red="0.54029709100000001" green="0.54598444700000004" blue="0.54598444700000004" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
<viewLayoutGuide key="safeArea" id="ho7-yh-GuY"/>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="4IP-2x-4dT" userLabel="Status Badge Left Margin">
<rect key="frame" x="15.999999999999993" y="56.666666666666671" width="119.33333333333331" height="146.33333333333331"/>
<rect key="frame" x="16" y="58.5" width="310" height="155"/>
<color key="backgroundColor" red="0.54029709100000001" green="0.54598444700000004" blue="0.54598444700000004" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="242.66666666666663" id="nCR-eJ-yK1">
......@@ -43,10 +43,10 @@
</variation>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="1c7-hR-87O" userLabel="Status Badge">
<rect key="frame" x="135.33333333333331" y="56.666666666666671" width="143.33333333333331" height="146.33333333333331"/>
<rect key="frame" x="326" y="58.5" width="372" height="155"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="Enabled" translatesAutoresizingMaskIntoConstraints="NO" id="e5t-G8-1L2" customClass="LDAlignmentImageView">
<rect key="frame" x="0.0" y="0.0" width="143.33333333333334" height="146.33333333333334"/>
<rect key="frame" x="0.0" y="0.0" width="372" height="155"/>
</imageView>
</subviews>
<color key="backgroundColor" red="0.54029709100000001" green="0.54598444700000004" blue="0.54598444700000004" alpha="0.75429137323943662" colorSpace="custom" customColorSpace="sRGB"/>
......@@ -59,7 +59,7 @@
<viewLayoutGuide key="safeArea" id="9aK-DD-cV1"/>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="P7i-RA-bJJ" userLabel="Status Badge Right Margin">
<rect key="frame" x="278.66666666666669" y="56.666666666666671" width="119.33333333333331" height="146.33333333333331"/>
<rect key="frame" x="698" y="58.5" width="310" height="155"/>
<color key="backgroundColor" red="0.54029709100000001" green="0.54598444700000004" blue="0.54598444700000004" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="242.33333333333337" id="Imv-cs-8U2">
......@@ -79,7 +79,7 @@
</variation>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="97y-ZH-spg" userLabel="Bottom Margin">
<rect key="frame" x="16" y="203" width="382" height="36.666666666666657"/>
<rect key="frame" x="16" y="213.5" width="992" height="39"/>
<color key="backgroundColor" red="0.54029709100000001" green="0.54598444700000004" blue="0.54598444700000004" alpha="0.5" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="12.333333333333343" id="vGG-al-dxa">
......@@ -99,10 +99,10 @@
</variation>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Q2i-Mp-9LN" userLabel="Status Text">
<rect key="frame" x="16" y="239.66666666666666" width="382" height="329.33333333333337"/>
<rect key="frame" x="264" y="252.5" width="496" height="348.5"/>
<subviews>
<textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" editable="NO" usesAttributedText="YES" translatesAutoresizingMaskIntoConstraints="NO" id="PB8-0H-gLc">
<rect key="frame" x="0.0" y="0.0" width="382" height="329.33333333333331"/>
<rect key="frame" x="0.0" y="0.0" width="496" height="348.5"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<attributedString key="attributedText">
<fragment content="Status Text">
......@@ -125,7 +125,7 @@
<viewLayoutGuide key="safeArea" id="gOH-cY-A90"/>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Da0-nj-Gxr" userLabel="Base">
<rect key="frame" x="16" y="20" width="382" height="549"/>
<rect key="frame" x="16" y="20" width="992" height="581"/>
<color key="backgroundColor" red="0.57965375782876882" green="0.79642258872084581" blue="1" alpha="0.48630061619718312" colorSpace="custom" customColorSpace="displayP3"/>
</view>
</subviews>
......
......@@ -10,6 +10,18 @@ import UIKit
import BonMot
import Delay
enum BetterFontSize:Hashable {
case smallest
case small
case medium
case large
}
struct BetterFontSet {
var title: UIFont!
var body: UIFont!
}
class ViewController: UIViewController {
@IBOutlet weak var statusTextView: UITextView!
......@@ -24,14 +36,38 @@ class ViewController: UIViewController {
@IBOutlet weak var layoutElementStatusBadge: UIView!
@IBOutlet weak var layoutElementStatusText: UIView!
// Hard code the blocker state for the spike.
let blockerEnabled = true
// Enable layout guides to debug layout and responsiveness.
let showLayoutGuides = false
let betterFonts: [BetterFontSize:BetterFontSet] = [
.smallest: BetterFontSet(
title: UIFont.systemFont(ofSize: 28.0, weight: .semibold), // AX1
body: UIFont.systemFont(ofSize: 14.0, weight: .regular) // xSmall
),
.small: BetterFontSet(
title: UIFont.systemFont(ofSize: 33.0, weight: .semibold), // AX2
body: UIFont.systemFont(ofSize: 16.0, weight: .regular) // Medium
),
.medium: BetterFontSet(
title: UIFont.systemFont(ofSize: 40.0, weight: .semibold), // AX3
body: UIFont.systemFont(ofSize: 19.0, weight: .regular) // xLarge
),
.large: BetterFontSet(
title: UIFont.systemFont(ofSize: 47.0, weight: .semibold), // AX4
body: UIFont.systemFont(ofSize: 21.0, weight: .regular) // xxLarge
)
]
override func viewDidLoad() {
super.viewDidLoad()
UIApplication.shared.enableAdaptiveContentSizeMonitor()
// Enable layout guides to debug layout and responsiveness.
let showLayoutGuides = true
if (!showLayoutGuides) {
// Hide the layout guides and reset the background colours on the layout elements.
......@@ -46,39 +82,68 @@ class ViewController: UIViewController {
statusImageView.imageContentMode = LDImageContentModeScaleAspectFit
updateStatusImageHorizontalAlignmentBasedOnTraitCollection(self.traitCollection)
updateText(true)
// Create the status text for the first time.
updateText()
}
func updateText(_ state:Bool) {
func updateText() {
print("===========")
print("Update text")
print("===========")
let viewSize = view!.bounds.size
var relevantDimensionValue:CGFloat = 0.0
if traitCollection.verticalSizeClass == .compact {
// On compact layouts, use the height of the view to determine which font set to use.
print("Relevant dimension is height.")
relevantDimensionValue = viewSize.height
} else {
// On all other layouts, use the width of the view to determine which font set to use.
print("Relevant dimension is width.")
relevantDimensionValue = viewSize.width
}
let headlineFontSize:CGFloat = 33.0
let bodyFontSize:CGFloat = 16.0
var fontSize:BetterFontSize = .smallest
switch relevantDimensionValue {
case 0...374: fontSize = .smallest
case 375...413: fontSize = .small
case 414...824: fontSize = .medium
case 835...1023: fontSize = .medium
default: fontSize = .large
}
let headingStyle = StringStyle(
print("Font size: \(fontSize)")
print("===========")
guard let fontSet = betterFonts[fontSize] else { fatalError("Could get get font set for \(fontSize)")}
let titleStyle = StringStyle(
.adapt(.body),
.font(.systemFont(ofSize: headlineFontSize, weight: .bold)),
.font(fontSet.title),
.color(.black),
// .lineHeightMultiple(0.7),
.paragraphSpacingAfter(8.0)
.paragraphSpacingAfter(fontSet.title.lineHeight/16.0)
)
let bodyStyle = StringStyle(
.adapt(.body),
.font(.systemFont(ofSize: bodyFontSize)),
.font(fontSet.body),
// .lineHeightMultiple(1),
.color(.gray)
)
let linkStyle = bodyStyle.byAdding(.paragraphSpacingBefore(8.0))
let linkStyle = bodyStyle.byAdding(.paragraphSpacingBefore(fontSet.body.lineHeight/4.0))
var statusAttributedString:NSMutableAttributedString
// var statusImage:UIImage!
if state
if blockerEnabled
{
statusAttributedString = NSAttributedString.composed(of: [
"You’re protected.\n".styled(with: headingStyle),
"You’re protected.\n".styled(with: titleStyle),
"The rules were last updated on 6 Sep, 2018. We last checked for updates 20 seconds ago.\n".styled(with: bodyStyle),
"Check again now.".styled(with: linkStyle)
]).mutableCopy() as! NSMutableAttributedString
......@@ -88,7 +153,7 @@ class ViewController: UIViewController {
else
{
statusAttributedString = NSAttributedString.composed(of: [
"You’re unprotected.\n".styled(with: headingStyle),
"You’re unprotected.\n".styled(with: titleStyle),
"Please enable the Better blocker from Safari Settings.\n".styled(with: bodyStyle),
"Launch Safari settings.".styled(with: linkStyle)
]).mutableCopy() as! NSMutableAttributedString
......@@ -101,7 +166,6 @@ class ViewController: UIViewController {
// The link’s text attributes have to be overwritten manually.
self.statusTextView.linkTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.darkGray, NSAttributedString.Key.underlineStyle: NSUnderlineStyle.single.rawValue, NSAttributedString.Key.underlineColor: UIColor.darkGray]
}
func updateStatusImageHorizontalAlignmentBasedOnTraitCollection(_ traitCollection: UITraitCollection) {
......@@ -126,8 +190,18 @@ class ViewController: UIViewController {
// Scroll the status text to the top in the next stack frame in case the text overflows the visible
// area so that the top of the message is always visible. (This can happen when the text size is set
// to a large setting via Dynamic Type (Accessibility).
print("About to transition to size: \(size).")
_ = delay(0) { self.statusTextView.setContentOffset(.zero, animated: false) }
print("Will transition to size: \(size).")
// Queue a call to scroll the text view to the top in the next stack frame.
_ = delay(0) {
// Update the text in case the size changes.
self.updateText()
self.statusTextView.setContentOffset(.zero, animated: false)
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment