1 line
22 KiB
JSON
1 line
22 KiB
JSON
{"kind":"project","hierarchy":{"reference":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator","modules":[{"reference":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/SlothCreator-Essentials","projects":[{"sections":[{"reference":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/Creating-Custom-Sloths#Create-a-new-project-and-add-SlothCreator","kind":"task"},{"kind":"task","reference":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/Creating-Custom-Sloths#Add-a-customization-view"}],"reference":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/Creating-Custom-Sloths"}]}],"paths":[["doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator","doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/$volume","doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/SlothCreator-Essentials"]]},"schemaVersion":{"minor":3,"patch":0,"major":0},"identifier":{"url":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/Creating-Custom-Sloths","interfaceLanguage":"swift"},"variants":[{"paths":["\/tutorials\/slothcreator\/creating-custom-sloths"],"traits":[{"interfaceLanguage":"swift"}]}],"sections":[{"kind":"hero","title":"Creating Custom Sloths","content":[{"inlineContent":[{"type":"text","text":"This tutorial guides you through building "},{"inlineContent":[{"text":"Slothy","type":"text"}],"type":"emphasis"},{"type":"text","text":" — an app for creating and caring for custom sloths. You’ll start by building the sloth creation view."}],"type":"paragraph"}],"estimatedTimeInMinutes":30,"image":"creating-intro.png","chapter":"SlothCreator Essentials","backgroundImage":"creating-intro.png"},{"kind":"tasks","tasks":[{"anchor":"Create-a-new-project-and-add-SlothCreator","contentSection":[{"media":"01-creating-section1.png","content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Create and configure an Xcode project that uses SlothCreator."}]}],"kind":"contentAndMedia","mediaPosition":"trailing"}],"title":"Create a new project and add SlothCreator","stepsSection":[{"media":"placeholder-image.png","runtimePreview":null,"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Create a new project using the iOS App template."}]}],"caption":[],"code":null,"type":"step"},{"type":"step","content":[{"inlineContent":[{"text":"Enter “Slothy” as the Product Name.","type":"text"}],"type":"paragraph"}],"caption":[],"media":"placeholder-image.png","code":null,"runtimePreview":null},{"runtimePreview":null,"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Select “SwiftUI” from the Interface pop-up menu and “SwiftUI App” from the Life Cycle pop-up menu, then click Next. Choose a location to save the Slothy project on your Mac."}]}],"code":null,"caption":[],"type":"step","media":"placeholder-image.png"},{"caption":[],"content":[{"inlineContent":[{"type":"text","text":"Add "},{"type":"codeVoice","code":"SlothCreator"},{"text":" as a dependency to the project.","type":"text"}],"type":"paragraph"}],"type":"step","code":null,"runtimePreview":null,"media":"placeholder-image.png"}]},{"contentSection":[{"mediaPosition":"trailing","kind":"contentAndMedia","content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Add the ability for users to customize sloths and select their powers."}]}],"media":"01-creating-section2.png"}],"title":"Add a customization view","stepsSection":[{"caption":[],"content":[{"inlineContent":[{"text":"Create a new SwiftUI View file named ","type":"text"},{"code":"CustomizedSlothView.swift","type":"codeVoice"},{"text":".","type":"text"}],"type":"paragraph"}],"media":null,"code":"01-creating-code-02-01.swift","runtimePreview":"preview-01-creating-code-02-01.png","type":"step"},{"runtimePreview":"preview-01-creating-code-02-01.png","caption":[],"content":[{"inlineContent":[{"type":"text","text":"Import the "},{"type":"codeVoice","code":"SlothCreator"},{"text":" package.","type":"text"}],"type":"paragraph"}],"type":"step","media":null,"code":"01-creating-code-02-02.swift"},{"runtimePreview":"preview-01-creating-code-02-01.png","type":"step","code":"01-creating-code-02-03.swift","content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Create a "},{"identifier":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/documentation\/SlothCreator\/Sloth","type":"reference","isActive":true},{"text":" state variable called ","type":"text"},{"type":"codeVoice","code":"sloth"},{"text":".","type":"text"}]}],"caption":[],"media":null},{"runtimePreview":"preview-01-creating-code-02-04.png","media":null,"type":"step","content":[{"type":"paragraph","inlineContent":[{"text":"Delete the template ","type":"text"},{"code":"Text","type":"codeVoice"},{"type":"text","text":" view, then add a new "},{"type":"codeVoice","code":"VStack"},{"text":" with trailing padding.","type":"text"}]}],"code":"01-creating-code-02-04.swift","caption":[{"inlineContent":[{"text":"This adds space around and between any views inside.","type":"text"}],"type":"paragraph"}]},{"runtimePreview":"preview-01-creating-code-02-04.png","code":"01-creating-code-02-05.swift","type":"step","caption":[],"content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Add a "},{"type":"codeVoice","code":"SlothView"},{"text":". Specify the ","type":"text"},{"type":"codeVoice","code":"sloth"},{"type":"text","text":" state variable for the view’s "},{"code":"sloth","type":"codeVoice"},{"text":" binding.","type":"text"}]}],"media":null},{"type":"step","code":"01-creating-code-02-06.swift","caption":[],"runtimePreview":"preview-01-creating-code-02-04.png","content":[{"inlineContent":[{"text":"Add a ","type":"text"},{"type":"codeVoice","code":"PowerPicker"},{"type":"text","text":". Specify the "},{"type":"codeVoice","code":"sloth"},{"text":"‘s ","type":"text"},{"code":"power","type":"codeVoice"},{"type":"text","text":" for the picker view’s "},{"type":"codeVoice","code":"power"},{"text":" binding.","type":"text"}],"type":"paragraph"}],"media":null},{"type":"paragraph","inlineContent":[{"text":"The following steps display your customized sloth view in the SwiftUI preview.","type":"text"}]},{"content":[{"inlineContent":[{"text":"Add the ","type":"text"},{"type":"codeVoice","code":"sloth"},{"text":" parameter to initialize the ","type":"text"},{"code":"CustomizedSlothView","type":"codeVoice"},{"type":"text","text":" in the preview provider, and pass a new "},{"code":"Sloth","type":"codeVoice"},{"type":"text","text":" instance for the value."}],"type":"paragraph"}],"caption":[],"type":"step","code":"01-creating-code-02-07.swift","runtimePreview":"preview-01-creating-code-02-07.png","media":null},{"caption":[],"type":"step","code":"01-creating-code-02-08.swift","runtimePreview":"preview-01-creating-code-02-08.png","content":[{"type":"paragraph","inlineContent":[{"type":"text","text":"Set the preview provider sloth’s "},{"type":"codeVoice","code":"name"},{"text":" to ","type":"text"},{"type":"codeVoice","code":"\"Super Sloth\""},{"type":"text","text":", "},{"code":"color","type":"codeVoice"},{"type":"text","text":" to "},{"code":".blue","type":"codeVoice"},{"type":"text","text":", and "},{"code":"power","type":"codeVoice"},{"text":" to ","type":"text"},{"type":"codeVoice","code":".ice"},{"text":".","type":"text"}]}],"media":null}],"anchor":"Add-a-customization-view"}]}],"metadata":{"category":"SlothCreator","title":"Creating Custom Sloths","role":"project","categoryPathComponent":"SlothCreator"},"references":{"01-creating-code-02-05.swift":{"content":["\/*","See the LICENSE.txt file for this sample’s licensing information.","","Abstract:","A view to customize a sloth.","*\/","","import SwiftUI","import SlothCreator","","struct CustomizedSlothView: View {"," @State var sloth: Sloth"," "," var body: some View {"," VStack {"," SlothView(sloth: $sloth)"," }.padding()"," }","}","","struct ContentView_Previews: PreviewProvider {"," static var previews: some View {"," CustomizedSlothView()"," }","}"],"syntax":"swift","highlights":[{"line":16}],"fileType":"swift","fileName":"CustomizedSlothView.swift","identifier":"01-creating-code-02-05.swift","type":"file"},"01-creating-section2.png":{"identifier":"01-creating-section2.png","variants":[{"traits":["2x","light"],"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/01-creating-section2@2x.png"},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/01-creating-section2~dark@2x.png","traits":["2x","dark"]}],"alt":"An outline of a sloth surrounded by four power type icons. The power type icons are arranged in the following order, clockwise from the top: fire, wind, lightning, and ice.","type":"image"},"01-creating-code-02-07.swift":{"fileName":"CustomizedSlothView.swift","fileType":"swift","syntax":"swift","highlights":[{"line":24},{"line":25},{"line":26}],"content":["\/*","See the LICENSE.txt file for this sample’s licensing information.","","Abstract:","A view to customize a sloth.","*\/","","import SwiftUI","import SlothCreator","","struct CustomizedSlothView: View {"," @State var sloth: Sloth"," "," var body: some View {"," VStack {"," SlothView(sloth: $sloth)"," PowerPicker(power: $sloth.power)"," }.padding()"," }","}","","struct ContentView_Previews: PreviewProvider {"," static var previews: some View {"," CustomizedSlothView("," sloth: Sloth()"," )"," }","}"],"identifier":"01-creating-code-02-07.swift","type":"file"},"doc://slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator/documentation/SlothCreator/Sloth":{"title":"Sloth","navigatorTitle":[{"text":"Sloth","kind":"identifier"}],"type":"topic","url":"\/documentation\/slothcreator\/sloth","role":"symbol","kind":"symbol","identifier":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/documentation\/SlothCreator\/Sloth","fragments":[{"text":"struct","kind":"keyword"},{"text":" ","kind":"text"},{"kind":"identifier","text":"Sloth"}],"abstract":[{"type":"text","text":"A model representing a sloth."}]},"doc://slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator/tutorials/SlothCreator/SlothCreator-Essentials":{"title":"SlothCreator Essentials","kind":"article","abstract":[],"identifier":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/SlothCreator-Essentials","type":"topic","role":"article","url":"\/tutorials\/slothcreator\/slothcreator-essentials"},"01-creating-code-02-08.swift":{"syntax":"swift","type":"file","fileName":"CustomizedSlothView.swift","content":["\/*","See the LICENSE.txt file for this sample’s licensing information.","","Abstract:","A view to customize a sloth.","*\/","","import SwiftUI","import SlothCreator","","struct CustomizedSlothView: View {"," @State var sloth: Sloth"," "," var body: some View {"," VStack {"," SlothView(sloth: $sloth)"," PowerPicker(power: $sloth.power)"," }.padding()"," }","}","","struct ContentView_Previews: PreviewProvider {"," static var previews: some View {"," CustomizedSlothView("," sloth: Sloth("," name: \"Super Sloth\","," color: .blue,"," power: .ice"," )"," )"," }","}"],"highlights":[{"line":25},{"line":26},{"line":27},{"line":28},{"line":29}],"fileType":"swift","identifier":"01-creating-code-02-08.swift"},"doc://slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator/tutorials/SlothCreator/Creating-Custom-Sloths#Add-a-customization-view":{"role":"pseudoSymbol","type":"section","url":"\/tutorials\/slothcreator\/creating-custom-sloths#Add-a-customization-view","title":"Add a customization view","abstract":[{"type":"text","text":"This tutorial guides you through building "},{"inlineContent":[{"type":"text","text":"Slothy"}],"type":"emphasis"},{"type":"text","text":" — an app for creating and caring for custom sloths. You’ll start by building the sloth creation view."}],"kind":"section","identifier":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/Creating-Custom-Sloths#Add-a-customization-view"},"preview-01-creating-code-02-01.png":{"identifier":"preview-01-creating-code-02-01.png","variants":[{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-01.png","traits":["1x","light"]},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-01@2x.png","traits":["2x","light"]},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-01~dark@2x.png","traits":["2x","dark"]}],"alt":"A screenshot from the Xcode preview as it would appear on iPhone, with the text, Hello, World!, centered in the middle of the display.","type":"image"},"01-creating-code-02-01.swift":{"fileType":"swift","type":"file","identifier":"01-creating-code-02-01.swift","highlights":[],"fileName":"CustomizedSlothView.swift","syntax":"swift","content":["\/*","See the LICENSE.txt file for this sample’s licensing information.","","Abstract:","A view to customize a sloth.","*\/","","import SwiftUI","","struct CustomizedSlothView: View {"," "," var body: some View {"," Text(\"Hello, World!\")"," }","}","","struct ContentView_Previews: PreviewProvider {"," static var previews: some View {"," CustomizedSlothView()"," }","}"]},"preview-01-creating-code-02-04.png":{"identifier":"preview-01-creating-code-02-04.png","variants":[{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-04.png","traits":["1x","light"]},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-04@2x.png","traits":["2x","light"]},{"traits":["2x","dark"],"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-04~dark@2x.png"}],"type":"image","alt":"A screenshot of a blank preview canvas."},"doc://slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator/tutorials/SlothCreator/Creating-Custom-Sloths#Create-a-new-project-and-add-SlothCreator":{"title":"Create a new project and add SlothCreator","type":"section","abstract":[{"type":"text","text":"This tutorial guides you through building "},{"type":"emphasis","inlineContent":[{"text":"Slothy","type":"text"}]},{"type":"text","text":" — an app for creating and caring for custom sloths. You’ll start by building the sloth creation view."}],"url":"\/tutorials\/slothcreator\/creating-custom-sloths#Create-a-new-project-and-add-SlothCreator","identifier":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/Creating-Custom-Sloths#Create-a-new-project-and-add-SlothCreator","role":"pseudoSymbol","kind":"section"},"01-creating-code-02-02.swift":{"highlights":[{"line":9}],"identifier":"01-creating-code-02-02.swift","type":"file","fileName":"CustomizedSlothView.swift","content":["\/*","See the LICENSE.txt file for this sample’s licensing information.","","Abstract:","A view to customize a sloth.","*\/","","import SwiftUI","import SlothCreator","","struct CustomizedSlothView: View {"," "," var body: some View {"," Text(\"Hello, World!\")"," }","}","","struct ContentView_Previews: PreviewProvider {"," static var previews: some View {"," CustomizedSlothView()"," }","}"],"fileType":"swift","syntax":"swift"},"01-creating-section1.png":{"type":"image","variants":[{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/01-creating-section1@2x.png","traits":["2x","light"]},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/01-creating-section1~dark@2x.png","traits":["2x","dark"]}],"alt":"An arrow pointing from the SlothCreator framework icon to the Xcode app project icon.","identifier":"01-creating-section1.png"},"doc://slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator/tutorials/SlothCreator":{"title":"Meet SlothCreator","type":"topic","identifier":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator","abstract":[{"text":"Create, catalog, and care for sloths using SlothCreator. Get started with SlothCreator by building the demo app ","type":"text"},{"type":"emphasis","inlineContent":[{"type":"text","text":"Slothy"}]},{"type":"text","text":"."}],"url":"\/tutorials\/slothcreator","role":"overview","kind":"overview"},"preview-01-creating-code-02-07.png":{"type":"image","variants":[{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-07.png","traits":["1x","light"]},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-07@2x.png","traits":["2x","light"]},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-07~dark@2x.png","traits":["2x","dark"]}],"alt":"A portrait of a generic sloth displayed in the center of the canvas.","identifier":"preview-01-creating-code-02-07.png"},"01-creating-code-02-03.swift":{"content":["\/*","See the LICENSE.txt file for this sample’s licensing information.","","Abstract:","A view to customize a sloth.","*\/","","import SwiftUI","import SlothCreator","","struct CustomizedSlothView: View {"," @State var sloth: Sloth"," "," var body: some View {"," Text(\"Hello, World!\")"," }","}","","struct ContentView_Previews: PreviewProvider {"," static var previews: some View {"," CustomizedSlothView()"," }","}"],"type":"file","identifier":"01-creating-code-02-03.swift","syntax":"swift","fileType":"swift","fileName":"CustomizedSlothView.swift","highlights":[{"line":12}]},"doc://slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator/tutorials/SlothCreator/Creating-Custom-Sloths":{"title":"Creating Custom Sloths","estimatedTime":"30min","type":"topic","abstract":[{"text":"This tutorial guides you through building ","type":"text"},{"type":"emphasis","inlineContent":[{"type":"text","text":"Slothy"}]},{"type":"text","text":" — an app for creating and caring for custom sloths. You’ll start by building the sloth creation view."}],"url":"\/tutorials\/slothcreator\/creating-custom-sloths","identifier":"doc:\/\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/tutorials\/SlothCreator\/Creating-Custom-Sloths","role":"project","kind":"project"},"01-creating-code-02-06.swift":{"content":["\/*","See the LICENSE.txt file for this sample’s licensing information.","","Abstract:","A view to customize a sloth.","*\/","","import SwiftUI","import SlothCreator","","struct CustomizedSlothView: View {"," @State var sloth: Sloth"," "," var body: some View {"," VStack {"," SlothView(sloth: $sloth)"," PowerPicker(power: $sloth.power)"," }.padding()"," }","}","","struct ContentView_Previews: PreviewProvider {"," static var previews: some View {"," CustomizedSlothView()"," }","}"],"type":"file","identifier":"01-creating-code-02-06.swift","syntax":"swift","fileType":"swift","fileName":"CustomizedSlothView.swift","highlights":[{"line":17}]},"preview-01-creating-code-02-08.png":{"type":"image","variants":[{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-08.png","traits":["1x","light"]},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-08@2x.png","traits":["2x","light"]},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/preview-01-creating-code-02-08~dark@2x.png","traits":["2x","dark"]}],"alt":"A portrait of an ice sloth on top, followed by four power icons below. The power icons, clockwise from top left, include: ice, fire, wind, and lightning. The ice icon is selected.","identifier":"preview-01-creating-code-02-08.png"},"01-creating-code-02-04.swift":{"content":["\/*","See the LICENSE.txt file for this sample’s licensing information.","","Abstract:","A view to customize a sloth.","*\/","","import SwiftUI","import SlothCreator","","struct CustomizedSlothView: View {"," @State var sloth: Sloth"," "," var body: some View {"," VStack {"," }.padding()"," }","}","","struct ContentView_Previews: PreviewProvider {"," static var previews: some View {"," CustomizedSlothView()"," }","}"],"type":"file","identifier":"01-creating-code-02-04.swift","syntax":"swift","fileType":"swift","fileName":"CustomizedSlothView.swift","highlights":[{"line":15},{"line":16}]},"placeholder-image.png":{"type":"image","variants":[{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/placeholder-image@2x.png","traits":["2x","light"]},{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/placeholder-image~dark@2x.png","traits":["2x","dark"]}],"alt":"A screenshot shows the SlothCreator package in Xcode's navigator.","identifier":"placeholder-image.png"},"creating-intro.png":{"identifier":"creating-intro.png","variants":[{"url":"\/images\/slothcreatorbuildingdoccdocumentationinxcode-3.SlothCreator\/creating-intro@2x.png","traits":["2x","light"]}],"type":"image","alt":"A wireframe of an app interface that has an outline of a sloth and four buttons below the sloth. The buttons display the following symbols, from left to right: ice, fire, wind, and lightning."}}} |