ScrollView Little Bit Modern UI

This section I will show usecase UI style scroll vertical then have some scroll up then content offset is moving ,You maybe see in normal social app or e-commerce app.

Hello JARNBOY(This my penname haha) is back again.

In this blog I read knowledge then I try create Demo project for understand.

Start Demo Project

OK I want practice about SwiftUI handle offset when scroll then I try create demo project UI like App Message Detail Screen on normal social app or e-commerce app

Link Githup Demo Project: https://github.com/JARNBOY/ModernPracticeScrollView

What’s I try to understand from practice this?

• Understand GeometryReader in real coding
• Animation by Offset
• Try use .scrollTo(…Your remark ID Widget…)
• Understand readable about handle value when scroll then need to see value current offset

Understand GeometryReader in real coding

GeometryReader: parent proposes a size for the child, the child uses that to determine its own size, and parent uses that to position the child appropriately.

https://www.hackingwithswift.com/books/ios-swiftui/understanding-frames-and-coordinates-inside-geometryreader

If short description GeometryReader for me.It’s use when read current size or position of child like Demo project (I show sample below Image)

You will see I try use Geometry for handle some value position of VStack for handle play animate scale expand view

Animation by Offset

Almost we can play animate every thing in your State data flow by use syntax like

withAnimation{ Your property or content animate}

And you can play animate with Offset or Opacity in me Demo project try use value from GeometryProxy to set value style progress for move position offset

Try use .scrollTo(…Your remark ID Widget…)

I try use .scrollTo for see ability scroll when call it. First we need call ScrollViewReader for get ScrollViewProxy to use .scrollTo

Then set .id on your view you want

OK my action when click Tab I will call scrollTo

Then result just like this:

Understand readable about handle value when scroll then need to see value current offset

I do follow this web blog because it’s readable for me to coding handle current offset

Observing the content offset of a SwiftUI ScrollView | Swift by Sundell

Actually we use PositionObservingView is enough for get current offset

But in Web blog show we can observe value back if you want case base UI is ScrollView like this

Then I try implement use it’s nearly around like this

Conclusion

I hope you enjoy my Demo project for understand some Basic SwiftUI for create modern UI

Thanks for read

Papon Supamongkonchai
iOS Developer

Reference

Tutorial create Expand nav UI

Handle current offset scroll

Observing the content offset of a SwiftUI ScrollView | Swift by Sundell