[SWIFTUI] Ma version de la calculatrice

Ce WE, je me suis fait les dents sur une version SwiftUI de l’exercice de la calculatrice de Maxime.

Cela m’a permis de mieux comprendre comment aligner des objets graphiques, d’utiliser des classes Swift en interaction avec une interface SwiftUI et de tester quelques trucs.

Les nombres sont affichés avec une police de grande dimension. S’il y a trop de chiffres (genre 8732658.98), l’application diminue la taille de la police pour que le nombre soit toujours visible.

Pour donner un aspect original à l’application, j’ai utilisé une police de caractère iOS de style manuscrite (Noteworthy-Bold). Et ajouté un ZStack pour mettre en arrière-plan une texture simulant un bloc-note.

Les calculs et l’affichage sont réalisés avec des nombres à virgules. La saisie au clavier des nombres flottants ne fonctionne pas encore (seulement les nombres entiers sont pris en compte), mais c’est l’affaire de quelques minutes normalement.

6 « J'aime »

Cool! Bien joué @Draken! C’est une bonne idée d’avoir refait cette app car elle contient pas mal de concepts de mise en page pour prendre en main SwiftUI.
Je suis impatient de voir ce qu’Apple nous réserve en Juin pour SwiftUI justement, ça sera l’occasion de s’y remettre.

Salut!

J’adore le choix graphique de ton app ! Très beau rendu :slight_smile:

Nicolas.

Moi aussi, j’ai hâte …

Merci, j’aime particulièrement les applications avec un style épuré. Au début, je voulais utiliser des touches de calculatrices dessinées à la main (iPad Pro + stylet), pour un effet visuel « feuille de papier prenant vie ».

Mais le résultat n’était pas terrible, visuellement parlant !

1 « J'aime »

Hello ! Je m’intéresse aux calculettes justement ! :slight_smile:
C’est chouette le coté « fond papier ». Pour ta texture, tu as utilisé 1 image de juste 1 petit carré répétée x fois ?
Est-ce que, si l’écran est plus grand, il y a + de carrés de la même taille ou est-ce que les carrés deviennent + grands ?

De ce qu’on voit de la capture d’écran de @Draken, on note un morceau d’un mot en bas de l’écran : ‹ iStock ›, qui est une librairie d’images libres.
Donc je penche pour l’utilisation d’une image (vectorielle peut-être?) qui s’adapte en fonction de l’écran.
Les paris sont lancés :sweat_smile:

1 « J'aime »

Et la réponse est :

papier3

C’est une image bitmap, venant d’une banque de ressources graphiques gratuites. Je l’ai grossièrement découpé pour en faire une « texture jointive », de manière à ce que les bords droit/gauche et haut/bas puissent s’assembler sans bavure, pour créer des feuilles de n’importe quelle taille.

J’ai paramètré l’image View de fond en mode papier peint, pour qu’elle utilise la texture de papier à sa convenance.

EDIT : J’aurais pu utiliser une texture plus petite, mais j’avais celle-ci sous la main, en provenance d’une expérimentation graphique précédente.

EDIT 2 :

    var fondEcran : some View {
        Image("papier3")
            .resizable( resizingMode: .tile)
            .edgesIgnoringSafeArea(.all)
        }
2 « J'aime »

Merci ! Oui, parce qu’en théorie, il aurait suffi de quelque chose comme ça :
Capture d’écran 2021-07-01 à 17.01.16
:wink:

J’aurais plutôt utilisé ça :

papier6464

Mais je préfère utiliser des textures plus grandes, pour avoir des effets de reliefs et de lumière à la surface du matériau.

1 « J'aime »