chapter 5 understand scroll view and building a carousel UI

chapter 5 understand scroll view and building a carousel UI

memorize.aimemorize.ai (lvl 286)
Section 1

Preview this deck

preparing the image file

Front

Star 0%
Star 0%
Star 0%
Star 0%
Star 0%

0.0

0 reviews

5
0
4
0
3
0
2
0
1
0

Active users

1

All-time users

1

Favorites

0

Last updated

1 year ago

Date created

Mar 14, 2020

Cards (8)

Section 1

(8 cards)

preparing the image file

Front

prepare the image files and import them in the asset catalog.

Back

make the card view more flexible

Front

Back

creating a Carousel UI with horizontal ScrollView

Front

Back

introducing scroll view

Front

Back

implementing the card view

Front

card view: - upper part is the image - lower part is the text description start with the image struct CardView: View { var body: some View { Image("swiftui-button") .resizable() .aspectRatio(contentMode: .fit) } } implement the text description VStack (alignment: .leading) { Text("SwiftUI") .font(.headline) .foregroundColor(.secondary) Text("Drawing a Border with Rounded Corners") .font(.title) .fontWeight(.black) .foregroundColor(.primary) .lineLimit(3) Text("Written by Vinh Phan".uppecased()) .font(.caption) .foregroundColor(.secondary) } Spacer()

Back

creating a Card-like UI

Front

creat a New File name CardView , put it in preview content

Back

hiding the scroll indicator

Front

Back

adjusting the layout priority

Front

Back