Создаем дефолтные аватары пользователей в SwiftUI

Мы часто сталкиваемся с необходимостью отображения аватаров пользователей в наших приложениях. Однако работа с аватарами по умолчанию для пользователей, не имеющих фотографий профиля, может быть утомительной и повторяющейся. В этой статье мы рассмотрим простое и эффективное решение этой проблемы с помощью SwiftUI и расширений Swift.

К концу этой статьи у вас будет чистый и персонализированный генератор дефолтных аватаров, который добавит нотку уникальности пользовательскому интерфейсу вашего приложения.

1. Настройка модели пользователя

Начнем с определения модели User, представляющей полное имя пользователя. Чтобы не запутаться, мы создадим примерный список пользователей как расширение модели. Таким образом, мы сможем быстро протестировать наш генератор аватаров по умолчанию на реальных пользовательских данных.

import Foundation

struct User: Identifiable {
    let id = UUID()
    let fullName: String
}

extension User {
    static let users = [
        User(fullName: "Abel Thomas"),
        User(fullName: "King Farley"),
        User(fullName: "Amiah Hurley"),
        User(fullName: "Thomas Lloyd"),
    ]
}

xxxxxxxxxx

import Foundation

​

struct User: Identifiable {

    let id = UUID()

    let fullName: String

}

​

extension User {

    static let users = [

        User(fullName: "Abel Thomas"),

        User(fullName: "King Farley"),

        User(fullName: "Amiah Hurley"),

        User(fullName: "Thomas Lloyd"),

    ]

}

2. Создание расширения для строк

Чтобы упростить процесс доступа к отдельным символам в строке, мы добавим в наш проект новую папку с именем «Extensions». В этой папке мы создадим расширение String, которое обеспечит легкий доступ к каждому символу по его индексу.

import Foundation

extension String {
    subscript(idx: Int) -> String {
        String(self[index(startIndex, offsetBy: idx)])
    }
}

xxxxxxxxxx

import Foundation

​

extension String {

    subscript(idx: Int) -> String {

        String(self[index(startIndex, offsetBy: idx)])

    }

}

С помощью этого расширения String мы можем легко извлекать символы из любой строки, что будет полезно при создании персонализированных аватаров.

3. Кастомный View дефолтного аватара

Теперь наступает самое интересное — давайте создадим пользовательское представление DefaultAvatar, которое будет генерировать персонализированные аватары для каждого пользователя. Мы воспользуемся расширением String, которое мы создали ранее, чтобы извлечь первые инициалы имени и фамилии пользователя.

import SwiftUI

struct DefaultAvatar: View {
    var user: User
    
    var body: some View {
        HStack {
            let name = String(user.fullName[user.fullName.startIndex]) + String(user.fullName.split(separator: " ")[1][user.fullName.split(separator: " ")[1].startIndex])
            
            ZStack {
                Circle().frame(width: 50, height: 50)
                Text(name).foregroundStyle(Color(UIColor.white))
            }
            Spacer().frame(width: 12)
            Text(user.fullName)
        }
    }
}

xxxxxxxxxx

import SwiftUI

​

struct DefaultAvatar: View {

    var user: User

    var body: some View {

        HStack {

            let name = String(user.fullName[user.fullName.startIndex]) + String(user.fullName.split(separator: " ")[1][user.fullName.split(separator: " ")[1].startIndex])

            ZStack {

                Circle().frame(width: 50, height: 50)

                Text(name).foregroundStyle(Color(UIColor.white))

            }

            Spacer().frame(width: 12)

            Text(user.fullName)

        }

    }

}

В этом кастомном представлении DefaultAvatar мы создаем уникальное представление инициалов пользователя внутри круга. Персонализированный аватар обеспечивает быструю идентификацию пользователя и одновременно повышает визуальную привлекательность вашего приложения.

4. Реализация генератора аватаров

Наконец, мы интегрируем представление DefaultAvatar в наш ContentView. Используя список, мы отобразим список пользователей с их персональными аватарами по умолчанию, сгенерированными на основе их инициалов.

import SwiftUI

struct ContentView: View {
    @State var users = User.users
    
    var body: some View {
        List(users) { user in
            DefaultAvatar(user: user)
        }
    }
}

xxxxxxxxxx

import SwiftUI

​

struct ContentView: View {

    @State var users = User.users

    var body: some View {

        List(users) { user in

            DefaultAvatar(user: user)

        }

    }

}

В ContentView мы используем представление List для отображения списка пользователей, каждый из которых сопровождается своим персональным аватаром. При прокрутке списка пользователей аватары будут динамически изменяться, отражая инициалы каждого пользователя.

Вот и все. Удачного создания персонализированных аватаров для вашего приложения! 🚀🎨

Источник