Познакомьтесь со SwiftUI, создав базовую страницу профиля.

SwiftUI

SwiftUI — это новый фреймворк пользовательского интерфейса Apple, представленный в 2019 году. Его основная цель — предоставить разработчикам естественный способ создания пользовательских интерфейсов с предварительным просмотром в реальном времени без использования раскадровки.

Что вам нужно

Прежде чем приступить к работе, убедитесь, что у вас есть

• Xcode 11 или новее
• macOS Catalina для предварительного просмотра в реальном времени

Создайте проект SwiftUI так же, как обычный проект приложения для iOS, но убедитесь, что используется интерфейс SwiftUI , а не Storyboard :

1. Откройте Xcode
2. Создайте новый проект Xcode
3. Выберите приложение и нажмите «Далее».
4. Назовите проект, как вам нравится
5. Убедитесь, что интерфейс SwiftUI:

Теперь ваш проект выглядит примерно так:

Пустой экран справа — это страница предварительного просмотра в реальном времени. Чтобы начать предварительный просмотр вашего приложения в реальном времени, просто нажмите Resumeв правом верхнем углу и подождите секунду или две:

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

Давайте начнем кодировать

Откройте ContentView.swiftфайл. Это файл, в котором будет происходить кодирование пользовательского интерфейса.

structВ этом файле есть два , а именно, ContentViewи ContentView_Previews.

• Отвечает ContentViewза содержимое и расположение экрана. По сути, вы создаете пользовательский интерфейс своего приложения внутри свойства ContentView, bodyиспользуя подходящие элементы пользовательского интерфейса.
• Как следует из названия, ContentView_Previews отвечает за создание предварительного просмотра в реальном времени. Он просто создает представление, содержащее экземпляр ContentViewдля его отображения.

Давайте создадим страницу профиля с изображением профиля, именем и некоторой дополнительной информацией.

1. Перетащите изображение профиля в Assets.xcassetsпапку (эта папка находится слева в навигаторе проекта )
2. Настройте свой , заменив текст Hello worldContentView по умолчанию изображением вашего профиля:

struct ContentView: View {
    var body: some View {
        Image("profile_pic") // YOUR PICTURE NAME HERE
            .resizable()
            .aspectRatio(contentMode: .fit)
            .clipShape(Circle()) // Make the picture circular
    }
}

• Вертикальный стек для вертикального позиционирования,VStack
• Горизонтальный стек для горизонтального позиционирования,HStack
• Перекрывающийся стек для размещения элементов друг над другом,ZStack

struct ContentView: View {
    var body: some View {
        VStack{
            Image("profile_pic")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .clipShape(Circle())
            Text("Artturi Jalli")
                .foregroundColor(.black)
                .font(.title)
            Text("iOS Engineer")
                .foregroundColor(.gray)
                .font(.subheadline)
        }
    }
}

Теперь ваша основная страница профиля готова, и она должна выглядеть примерно так.

Вот и все!

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

Не забудьте подписаться на меня на Medium , чтобы ничего не пропустить. Также давайте дружить на Linkedin .

использованная литература