Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Source code for the article 'Stretchy header in SwiftUI' (
// ContentView.swift
// StretchyHeader
// Created by Alexey Belousov on 01.08.2019.
// Copyright © 2019 JetRockets. All rights reserved.
import SwiftUI
let kImage = "example.image.from.assets"
let kTitle = "Stretchy header in SwiftUI"
let kPublishedAt = Date()
let kAuthor = "Author Name"
let kContent = """
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
private let kHeaderHeight: CGFloat = 300
struct ContentView: View {
private static let formatter: DateFormatter = {
let formatter = DateFormatter()
formatter.dateStyle = .short
formatter.timeStyle = .short
return formatter
var body: some View {
ScrollView {
VStack(alignment: .leading) {
GeometryReader { (geometry: GeometryProxy) in
if geometry.frame(in: .global).minY <= 0 {
.aspectRatio(contentMode: .fill)
.frame(width: geometry.size.width,
height: geometry.size.height)
} else {
.aspectRatio(contentMode: .fill)
.offset(y: -geometry.frame(in: .global).minY)
.frame(width: geometry.size.width,
height: geometry.size.height
+ geometry.frame(in: .global).minY)
}.frame(maxHeight: kHeaderHeight)
VStack(alignment: .leading, spacing: 8) {
HStack {
Text("\(kPublishedAt, formatter: Self.formatter)")
Text("Author: \(kAuthor)")
}.frame(idealHeight: .greatestFiniteMagnitude)
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment