Πώς να δημιουργήσετε προσαρμοσμένα σχήματα στο SwiftUI

0
Πώς να δημιουργήσετε προσαρμοσμένα σχήματα στο SwiftUI

Το SwiftUI απλοποιεί τη δημιουργία προσαρμοσμένων σχημάτων, επιτρέποντας στους σχεδιαστές και τους προγραμματιστές να φέρουν μια μοναδική αίσθηση στις εφαρμογές τους. Σε αυτήν την ανάρτηση ιστολογίου, θα σας καθοδηγήσω στη διαδικασία δημιουργίας ενός προσαρμοσμένου σχήματος στο SwiftUI, εξηγώντας κάθε απόσπασμα κώδικα στην πορεία.

Ένα προσαρμοσμένο σχήμα στο SwiftUI είναι ένα γραφικό στοιχείο που μπορείτε να σχεδιάσετε για να ταιριάζει στις συγκεκριμένες σχεδιαστικές σας ανάγκες. Το SwiftUI κάνει αυτή τη διαδικασία απλή παρέχοντας το Shape πρωτόκολλο.

Συμμορφωθείτε με το Πρωτόκολλο Shape

Για να ξεκινήσετε, θα δημιουργήσετε μια νέα δομή που συμμορφώνεται με το Shape πρωτόκολλο. Αυτό απαιτεί την εφαρμογή του path(in:) μέθοδο, όπου θα ορίσετε τις οδηγίες σχεδίασης για το σχήμα σας.

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        // Drawing code will go here.
        return path
    }
}

Εδώ, Triangle είναι το προσαρμοσμένο μας σχήμα. ο path(in:) μέθοδος μας δίνει α CGRect που ορίζει την περιοχή που θα γεμίσει το σχήμα. Δημιουργούμε α Path αντίκειται να ορίσετε τις οδηγίες σχεδίασης.

Σχεδιάστε το σχήμα

μεσα στην path(in:) μέθοδο, θα χρησιμοποιήσετε το Path struct για να ορίσετε τη γεωμετρία του σχήματος. Ας σχεδιάσουμε ένα απλό τρίγωνο.

func path(in rect: CGRect) -> Path {
    var path = Path()

    path.move(to: CGPoint(x: rect.midX, y: rect.minY))
    path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
    path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
    path.closeSubpath()

    return path
}

Σε αυτό το απόσπασμα, ξεκινάμε μετακινώντας προς το σημείο εκκίνησης του τριγώνου, το οποίο είναι το μέσο της άνω άκρης του ορθογωνίου (rect.midX, rect.minY). Στη συνέχεια προσθέτουμε γραμμές στην κάτω δεξιά και κάτω αριστερή γωνία του ορθογωνίου και κλείνουμε τη διαδρομή για να ολοκληρώσουμε το τρίγωνο.

Χρησιμοποιήστε το προσαρμοσμένο σχήμα σε μια προβολή

Με καθορισμένο το προσαρμοσμένο σχήμα, μπορείτε πλέον να το χρησιμοποιήσετε σε μια προβολή SwiftUI όπως κάθε άλλο σχήμα.

struct ContentView: View {
    var body: some View {
        Triangle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
    }
}

Εδώ, προσθέτουμε ένα Triangle στην προβολή περιεχομένου, γεμίστε την με μπλε χρώμα και ορίστε ένα πλαίσιο 100×100 πόντων. ο fill ο τροποποιητής χρωματίζει το εσωτερικό του τριγώνου και το frame ορίζει το μέγεθός του στην οθόνη.

προσαρμοσμένο σχήμα swiftui

Δώστε στυλ στο προσαρμοσμένο σχήμα

Τα προσαρμοσμένα σχήματα μπορούν να διαμορφωθούν χρησιμοποιώντας τους τροποποιητές του SwiftUI. Μπορείτε να εφαρμόσετε μια διαδρομή, να προσαρμόσετε το πλάτος της γραμμής και να προσθέσετε μια σκιά.

Triangle()
    .stroke(Color.red, lineWidth: 3)
    .shadow(radius: 5)
    .frame(width: 150, height: 150)

Αυτός ο κώδικας περιγράφει το Triangle με κόκκινο περίγραμμα πλάτους 3 πόντων και εφαρμόζει σκιά με ακτίνα 5 σημείων. ο stroke ο τροποποιητής δημιουργεί το περίγραμμα και shadow προσθέτει το εφέ σκιάς.

Παράδειγμα προσαρμοσμένου σχήματος swiftui

Ακολουθεί ο πλήρης κωδικός για αναφορά.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Triangle()
            .stroke(Color.red, lineWidth: 3)
            .shadow(radius: 5)
            .frame(width: 150, height: 150)
    
    }
}

struct Triangle: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()
        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.maxY))
            path.addLine(to: CGPoint(x: rect.minX, y: rect.maxY))
            path.closeSubpath()
        return path
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Ο σχεδιασμός προσαρμοσμένων σχημάτων στο SwiftUI μπορεί να φέρει ένα νέο επίπεδο εξατομίκευσης στη σχεδίαση της εφαρμογής σας. Με την κατανόηση του Shape πρωτόκολλο και το Path struct, και χρησιμοποιώντας τους ισχυρούς τροποποιητές και κινούμενα σχέδια του SwiftUI, μπορείτε να δημιουργήσετε δυναμικά, προσαρμοσμένα γραφικά που κάνουν την εφαρμογή σας να ξεχωρίζει.

Χρησιμοποιήστε αυτά τα προσαρμοσμένα σχήματα για να δημιουργήσετε εικονίδια, κουμπιά ή οποιοδήποτε άλλο γραφικό στοιχείο που χρειάζεται μια μοναδική πινελιά και απολαύστε την απρόσκοπτη ενσωμάτωση που προσφέρει το SwiftUI για τα προσαρμοσμένα σχέδιά σας.

Bir cevap yazın