Search icon
Arrow left icon
All Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletters
Free Learning
Arrow right icon
SwiftUI Cookbook - Third Edition

You're reading from  SwiftUI Cookbook - Third Edition

Product type Book
Published in Dec 2023
Publisher Packt
ISBN-13 9781805121732
Pages 798 pages
Edition 3rd Edition
Languages
Concepts
Author (1):
Juan C. Catalan Juan C. Catalan
Profile icon Juan C. Catalan

Table of Contents (20) Chapters

Preface 1. Using the Basic SwiftUI Views and Controls 2. Displaying Scrollable Content with Lists and Scroll Views 3. Exploring Advanced Components 4. Viewing while Building with SwiftUI Preview in Xcode 15 5. Creating New Components and Grouping Views with Container Views 6. Presenting Views Modally 7. Navigation Containers 8. Drawing with SwiftUI 9. Animating with SwiftUI 10. Driving SwiftUI with Data 11. Driving SwiftUI with Combine 12. SwiftUI Concurrency with async await 13. Handling Authentication and Firebase with SwiftUI 14. Persistence in SwiftUI with Core Data and SwiftData 15. Data Visualization with Swift Charts 16. Creating Multiplatform Apps with SwiftUI 17. SwiftUI Tips and Tricks 18. Other Books You May Enjoy
19. Index

Implementing a stretchable header in SwiftUI

A stretchable header is a well-known effect where, on top of a scroll view, there is an image that scales up when the user slides down the entries.

An example can be found on the artist page of the Spotify app. But in general, it is so common that you expect it when a page has a big image as a banner on top of a list of items.

In this recipe, we’ll implement a skeleton of the artist page on the Spotify app, and we’ll see that this effect is easy to implement in SwiftUI too.

Getting ready

Let’s create a SwiftUI app called StretchableHeader and add the two images: avatar.jpg and header.jpg, which you can find in the GitHub repo at https://github.com/PacktPublishing/SwiftUI-Cookbook-3rd-Edition/tree/main/Resources/Chapter09/recipe11:

Figure 9.17: Importing the images

How to do it…

We are going to implement two components, one for each row and the other for the header. The former...

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $15.99/month. Cancel anytime}