Swift UI 100 knocks

100 knocks to learn SwiftUI (and related knowledge). I made it for people who don't know what to do next to the Swift UI tutorial. There are no 100 questions, so I will add them one by one. If you have a better example of the answer, please let me know in the comments. M (_ _) m

Easy (can be implemented with simple Swift UI syntax)

Resize and display the image (fit)

Please resize the image to 150✖︎200 size and display it. If the aspect ratios are different, display the margins in red.

画像をリサイズして表示(fit)

Answer

Resize and display the image (clip)

Please resize the image to 150✖︎200 size and display it. If the aspect ratio is different, cut off the protruding part and display it.

画像をリサイズして表示(clip)

Answer

reference [SwiftUI] How to use images

Cut the image into a circle and add a frame

150✖︎Resize the image to 150 size, cut it out in a circle, and display it with a black frame.

画像を丸く切り取り、枠を付ける

Answer

Arrange Views side by side at equal intervals

Arrange the images side by side at equal intervals.

等間隔でViewを等間隔で横に並べる)

Answer

Hide NavigationView

Hide NavigationView

画像をリサイズして表示(fit)

Answer

Pass the value at the time of screen transition

Please pass the value at the time of screen transition.

1.gif

Answer

Show Picker

Show Picker

1.gif

Answer

Switch screens using TabView

Use TabView to switch screens

1.gif

Answer

Change characters when Button is pressed

Please change the character when Button is pressed.

1.gif

Answer

reference Use scaledToFill (), scaledToFit (), aspectRatio (_: contentMode :), etc. in Swift UI properly

View alerts in SwiftUI

Display alerts in SwiftUI

1.gif

Answer

Do not change the color of the image or text in the Button

Please change the color of the text when the Button is pressed. Do not change the color of the image or text in the Button.

1.gif

Answer

Usually (can be implemented only with Swift UI)

Separate alerts and sheets with Swift UI

Please display the sheet when the numbers are entered. Display an alert when a non-number is entered.

1.gif

Answer

Push transition from Button (disable NavigationLink)

Please change the screen when the text in Button is pressed instead of the text in NavigationLink.

1.gif

Answer

Read more in Swift UI. .. .. Implement a View with buttons

Read more in Swift UI. .. .. Implement a View with buttons.

1.gif

Answer

Transition the screen when the application starts

Please change the screen when the application starts.

アプリ起動時に画面を遷移させる

Answer

Change the thickness and color of characters in Text

Please change the thickness and color of the characters in Text.

1.png

Answer

Shadow the View with FunctionBuilder

Use FunctionBuilder to add a shadow to the View.

1.png

Answer

Shadow the View with the View Modifier

Use the ViewModifier to add a shadow to the View.

1.png

Answer

Edit the list

Please edit the list.

1.gif

Answer

Arrange Views like UICollectionView

Arrange the views like UICollectionView.

1.gif

Answer

reference Q-Mobile/QGrid

Call the transition source method from the screen transition destination View

Call the transition source method from the screen transition destination View.

1.gif

Answer

Tap a cell in the list to display an alert

Tap a cell in the list to display an alert.

1.gif

Answer

Difficult (requires UIKit and other frameworks)

Create a common tutorial screen with UIPageViewController and SwiftUI

Implement a common wake-through screen like the one in the image.

1.gif

Answer

Show modals that can't be closed in Swift UI

Show modals that can't be closed in Swift UI.

1.gif

Answer

Show full screen modal

View full screen modal.

1.gif

Answer

Add a tappable link in the string

Add a tappable link in the string.

1.gif

Answer

Hit the API on Github to display the repository information in a list (Closure)

Hit the Github API (https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30) to display the repository information in the list. Use Closure.

1.gif

Answer

reference Infinite List Scroll with SwiftUI and Combine

Hit the API on Github to display the repository information in the list (Combine)

Hit the Github API (https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30) to display the repository information in the list. Please use Combine.

1.gif

Answer

reference Infinite List Scroll with SwiftUI and Combine

Hit the API on Github to display the repository information in a list. If you scroll to the bottom, please get an additional one.

Hit the Github API (https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30) to display the repository information in the list. If you scroll to the bottom, please get an additional one.

1.gif

Answer

reference Infinite List Scroll with SwiftUI and Combine

Hit the API on Github to display the repository information in a list. If you scroll to the bottom, please get an additional one. Also display the Indicator.

Hit the Github API (https://api.github.com/search/repositories?q=swift&sort=stars&page=1&per_page=30) to display the repository information in the list. If you scroll to the bottom, please get an additional one.

1.gif

Answer

reference Infinite List Scroll with SwiftUI and Combine

Recommended Posts

Swift UI 100 knocks
Swift UI TextView placeholder
Starting with Swift Swift UI
Progress made with Swift UI
Photo library in Swift UI
[Swift UI] Use Map view
Create Master Detail in Swift UI
[Swift 5] Implement UI for review function
Implementing side menus in Swift UI
Customize View with View Modifier in Swift UI
(For beginners) Swift UI view element collection
I tried using Realm with Swift UI
Shiritori map app made with Swift UI
[Swift] Closure
SKStoreReviewController implementation memo in Swift UI of iOS14
[Swift UI] How to disable ScrollsToTop of ScrollView
[Swift] Create an image selection UI with PhotoKit
Incorporate View created with Swift UI into ViewController