![\"SwiftUI](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_swiftui_tutorial_app.png\"\/)
<\/p>\n
Along the way, you’ll get familiar with the basic AppCode workflow and useful features that help writing code easier and faster.<\/p>\n
Requirements: <\/p>\n
- \n
- AppCode 2019.3 or later<\/li>\n
- Xcode 11 or later<\/li>\n<\/ul>\n
Sample project: iOSConferences<\/a>
\n<\/p>\nStep 1. Create a project\ufeff<\/h2>\n
Projects created in AppCode are fully compatible with Xcode and use the same project model. After you create a project in AppCode, you can open and edit it in Xcode and vice versa, and all the data will be synchronized.<\/p>\n
Launch AppCode and click New Project<\/strong> on the Welcome<\/strong> screen:<\/p>\n
![\"Start](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_welcome_screen_new_project.png\"\/)
\nIf you have another project open in AppCode at the moment, select File | New Project<\/strong> from the main menu.<\/p>\nIn the dialog that opens, you see a list of Xcode project templates. Select iOS | Application | Single View App<\/strong> and click Next<\/strong>:<\/p>\n
![\"Create](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_create_project_page1.png\"\/)
<\/p>\nFill in the following fields:<\/p>\n
- \n
- Product Name<\/strong>: your project name which will be also the name of your application. Type iOSConferences.<\/li>\n
- Organization Name<\/strong>: your or your company’s name.<\/li>\n
- Organization Identifier<\/strong>: your company’s identifier in reverse-DNS format, for example,
com.mycompany<\/code>:<\/li>\n<\/ul>\n![\"Application](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_create_project_page1_names.png\"\/)
<\/p>\nYour project name and organization identifier together build a bundle identifier \u2014 an automatically generated string that will identify your application in the operating system.<\/p>\n
If you need to change the project or organization name, bundle identifier, or other project settings<\/a>, press\u2318;<\/code> or select File | Project Settings<\/strong> from the main menu.<\/p>\nYou can also change your project settings in Xcode. Just select File | Open Project in Xcode<\/strong> from the main menu and change the necessary settings there. The changes will appear in AppCode as soon as you apply them in Xcode.<\/div>\n
Select Swift<\/strong> in the list of languages and SwiftUI<\/strong> in the User Interface<\/strong> field. Make sure that all checkboxes in the dialog are cleared as using tests or Core Data is outside the scope of this tutorial. Click Finish<\/strong>:<\/p>\n
![\"Create](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_create_project_page2.png\"\/)
\nIn the Finder window that opens, select a directory where your project will be located.<\/p>\nA new Swift project will be created and immediately opened in AppCode. In the left part of the AppCode window, you see the Project<\/strong> tool window. From here, you can navigate to necessary files, add<\/a> and delete files and folders, exclude<\/a> files from indexing or from Xcode project, add files to different targets<\/a>, and so on.<\/p>\n
To show and hide the Project<\/strong> tool window, press
\u23181<\/code>. For more information, see Project tool window<\/a>:<\/p>\n![\"Full](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_empty_project.png\"\/)
<\/p>\nStep 2. Enable interactive preview\ufeff<\/h2>\n
To preview changes in SwiftUI layouts from AppCode, you can use the InjectionIII<\/a> application.<\/p>\n
Install and start InjectionIII\ufeff<\/h3>\n
Download InjectionIII from AppStore<\/a> or from GitHub<\/a> (version 1.8 or later). Place the InjectionIII application file to the Application folder and start the application. Its icon will appear in the status bar:<\/p>\n
![\"Injection](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_injectionIII.png\"\/)
<\/p>\nPrepare the project for working with InjectionIII\ufeff<\/h3>\n
In the
AppDelegate.swift<\/code> file, add the code for loading the InjectionIII bundle into theapplication(_:didFinishLaunchingWithOptions:)<\/code> method:<\/p>\nfunc application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {\r\n \/\/ Override point for customization after application launch.\r\n #if DEBUG\r\n var injectionBundlePath = "\/Applications\/InjectionIII.app\/Contents\/Resources"\r\n #if targetEnvironment(macCatalyst)\r\n injectionBundlePath = "\\(injectionBundlePath)\/macOSInjection.bundle"\r\n #elseif os(iOS)\r\n injectionBundlePath = "\\(injectionBundlePath)\/iOSInjection.bundle"\r\n #endif\r\n Bundle(path: injectionBundlePath)?.load()\r\n #endif\r\n return true\r\n}<\/pre>\nFor more details, refer to the InjectionIII documentation<\/a>.<\/p>\n
In the
ContentView.swift<\/code> file, go to theContentView_Previews<\/code> structure and add theinjected()<\/code> method inside the#if DEBUG<\/code> block. Also, changestruct<\/code> toclass<\/code> forContentView_Previews<\/code>:<\/p>\nclass ContentView_Previews: PreviewProvider {\r\n static var previews: some View {\r\n ContentView()\r\n }\r\n\r\n #if DEBUG\r\n @objc class func injected() {\r\n UIApplication.shared.windows.first?.rootViewController =\r\n UIHostingController(rootView: ContentView())\r\n }\r\n #endif\r\n}\r\n<\/pre>\nThe
injected()<\/code> method reloads the view on code injection when the application is running in debug mode. Instead of reloading the view, you can have a design-time preview generated on code injection \u2014 the same way as Xcode 11 does. In this case, use thepreviews<\/code> property of the current PreviewProvider<\/a>:<\/p>\n@objc class func injected() {\r\n UIApplication.shared.windows.first?.rootViewController =\r\n UIHostingController(rootView: ContentView_Previews.previews)\r\n}\r\n<\/pre>\nRun the application with preview\ufeff<\/h3>\n
Make sure that you have the Debug<\/strong> configuration selected for the current run\/debug configuration<\/a>. To do this, select Run | Edit Configurations<\/strong> from the main menu:<\/p>\n
![\"Run\/debug](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_run_config_debug.png\"\/)
<\/p>\nTo run the application, select a device or simulator on the toolbar and press
\u2303R<\/code>:<\/p>\n![\"Run\/debug](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_select_device_swiftui.png\"\/)
<\/p>\nTo run your application on a real device connected to your Mac, you need to configure<\/a> your project in Xcode first.<\/div>\nThen, press
\u2303R<\/code>. On the first run, you will be prompted to select the project directory in the Finder window that opens. <\/p>\nIn case you need to change the project directory later, for example, if you’ve changed your project location or want to use InjectionIII with another project, select Open Project<\/strong> from the InjectionIII<\/strong> menu and choose a new directory in Finder.<\/div>\nOnce InjectionIII is connected and the project directory is specified, you’ll see the following messages in the Run<\/strong> tool window:<\/p>\n
![\"Injection](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_injection_connected.png\"\/)
<\/p>\nTry to change some code in your view and see the changes on the simulator or device screen:<\/p>\n
![\"Try](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_swiftui_preview.png\"\/)
<\/p>\nChanges that you make in your code appear in the preview on saving the file. AppCode saves changes automatically<\/a> when you build and run an application, close files or projects, quit the IDE, and so on. Therefore, it may be useful to invoke autosave on a regular basis, let’s say, every second, so that you won’t need to trigger file saving manually. To do this, open the Preferences<\/strong> dialog\u2318,<\/code> and go to Appearance & Behavior | System Settings | Synchronization<\/strong>. Select the Save files automatically if application is idle for … sec<\/strong> checkbox and set the value to 1.<\/div>\nStep 3. Create a list\ufeff<\/h2>\n
In
iOSConferences\/ContentView.swift<\/code>, renameContentView<\/code> toConferenceList<\/code> using the Rename<\/a> refactoring: place the caret atContentView<\/code>, press\u21e7F6<\/code>, type the new name in the highlighted area, and press\u23ce<\/code>:<\/p>\n![\"Rename](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_rename_refactoring.png\"\/)
<\/p>\nThe file itself will be renamed as well. The same way, rename
ContentView_Previews<\/code> toConferenceList_Previews<\/code>.<\/p>\nRebuild the project to have the interactive preview working after renaming the file by pressing
\u2318F9<\/code>. Instead of theHello, World!<\/code> text, add a list of two text elements:<\/p>\n- \n
- Select the
Text("Hello, World!")<\/code> line by pressing\u2325\u2191<\/code> and add theList<\/code> element containingText("Conference1")<\/code> instead:![\"Extend](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_replace_code.png\"\/)
<\/li>\n- Add the second text element by duplicating
\u2318D<\/code> the first one:![\"Duplicate](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_duplicate_lines.png\"\/)
<\/li>\n- You may notice that the code misses a space between
List<\/code> and{<\/code>. Just press\u2325\u2318L<\/code> to reformat<\/a> the code on the whole page according to the guidelines specified in the Preferences | Editor | Code Style | Swift<\/strong>:![\"Reformat](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_reformat_code.png\"\/)
<\/li>\n<\/ul>\nAs a result, you will have the following code:<\/p>\n
struct ConferenceList: View {\r\n var body: some View {\r\n List {\r\n Text("Conference1")\r\n Text("Conference2")\r\n }\r\n }\r\n}\r\n<\/pre>\nThe application screen will look as follows:<\/p>\n
![\"Add](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_add_swiftui_list.png\"\/)
<\/p>\nAdd a title to the list. To do this, wrap the list with the
NavigationView<\/code> element and then call thenavigationBarTitle(_:)<\/code> method for the list:<\/p>\nstruct ConferenceList: View {\r\n var body: some View {\r\n NavigationView {\r\n List {\r\n Text("Conference1")\r\n Text("Conference2")\r\n }.navigationBarTitle("Conferences")\r\n }\r\n }\r\n}\r\n<\/pre>\nYou can create custom live templates<\/a> to quickly wrap your code with necessary constructs. See details in Create a surround live template<\/a>.<\/div>\n![\"Conferences](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_add_swiftui_list_title.png\"\/)
<\/p>\nInstead of two list items, let’s create one consisting of a title and subtitle. In the title, let’s display the conference name and in the subtitle \u2014 location. To do this, wrap the two
Text<\/code> elements in aVStack<\/code> container, change their values, and apply the corresponding font styles to them:<\/p>\nVStack {\r\n Text("Conference").font(.headline)\r\n Text("Location").font(.subheadline)\r\n}\r\n<\/pre>\n![\"Add](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_add_swiftui_list_one_element.png\"\/)
]<\/p>\nAlign both
Text<\/code> elements left using the alignment parameter for theVStack<\/code> container:<\/p>\nVStack(alignment: .leading) {\r\n \/\/ ...\r\n}<\/pre>\n![\"Add](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_add_swiftui_list_align.png\"\/)
<\/p>\nTo show documentation<\/a> for the symbol at caret, pressF1<\/code>.<\/div>\nStep 4. Load data from JSON\ufeff<\/h2>\n
Let’s make our list dynamic by loading data from the local conferencesData.json<\/a> file.<\/p>\n
Create a new group
Resources<\/code> where you will keep the JSON file:<\/p>\n- \n
- Right-click the
iOSConferences<\/code> group in the Project<\/strong> tool window and select New | Group<\/strong>.<\/li>\n- In the dialog that opens, type
Resources<\/code>.<\/li>\n- Make sure the Create folder<\/strong> checkbox is selected and click OK<\/strong>:
![\"Create](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_create_group.png\"\/)
\nIf you clear the Create folder<\/strong> checkbox, AppCode will create a group without adding the corresponding folder in the file system. See more in Create groups<\/a>.<\/div>\n<\/li>\n<\/ul>\n - In the dialog that opens, type
- Add the second text element by duplicating
- Organization Name<\/strong>: your or your company’s name.<\/li>\n
- Product Name<\/strong>: your project name which will be also the name of your application. Type iOSConferences.<\/li>\n
![\"Add](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_add_file.png\"\/)
<\/li>\n<\/ul>\n![\"Add](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_add_swift_file.png\"\/)
<\/li>\n<\/ul>\n![\"Add](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_add_swift_type.png\"\/)
<\/li>\n![\"Live](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_use_live_template.png\"\/)
<\/div>\n![\"List](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_dynamic_list.png\"\/)
<\/p>\n![\"Add](\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2020\/05\/objc-ac_create_swiftui_file.png\"\/)
<\/li>\n