update: images
72
README.md
@ -11,7 +11,7 @@ The result will be a Kotlin Multiplatform project targeting Android and iOS.
|
||||
|
||||
## Set up an environment
|
||||
|
||||
> **Important**. You will need a Mac with macOS to write and run iOS-specific code on simulated or real devices.
|
||||
> **Important**. You need a Mac with macOS to write and run iOS-specific code on simulated or real devices.
|
||||
> This is an Apple requirement.
|
||||
|
||||
To work with this template, you need the following:
|
||||
@ -24,7 +24,7 @@ To work with this template, you need the following:
|
||||
|
||||
### Check your environment
|
||||
|
||||
Before you start, use the [KDoctor](https://github.com/Kotlin/kdoctor) tool to ensure you have all the tools and that your development environment is configured correctly.
|
||||
When you install all the tools, use the [KDoctor](https://github.com/Kotlin/kdoctor) tool to ensure that your development environment is configured correctly:
|
||||
|
||||
1. Install KDoctor with [Homebrew](https://brew.sh/):
|
||||
|
||||
@ -56,8 +56,7 @@ Otherwise, KDoctor will highlight which parts of your setup still need configura
|
||||
|
||||
## Examine the project structure
|
||||
|
||||
1. Open the project in Android Studio.
|
||||
2. Switch the project view from **Android** to **Project** to see all the files and targets belonging to the project.
|
||||
Open the project in Android Studio and switch the view from **Android** to **Project** to see all the files and targets belonging to the project:
|
||||
|
||||
<img src="readme_images/open_project_view.png" height="300px">
|
||||
|
||||
@ -68,7 +67,7 @@ Your Compose Multiplatform project includes three modules:
|
||||
This is a Kotlin module that contains the logic common for both Android and iOS applications, the code you share between platforms.
|
||||
|
||||
This `shared` module is also where you write your Compose Multiplatform code.
|
||||
You can find the shared root `@Composable` function for your app in `shared/src/commonMain/kotlin/App.kt`.
|
||||
In `shared/src/commonMain/kotlin/App.kt`, you can find the shared root `@Composable` function for your app.
|
||||
|
||||
It uses Gradle as the build system. You can add dependencies and change settings in `shared/build.gradle.kts`.
|
||||
The shared module builds into an Android library and an iOS framework.
|
||||
@ -91,9 +90,10 @@ To run your application on an Android emulator:
|
||||
|
||||
1. Create an [Android virtual device](https://developer.android.com/studio/run/managing-avds#createavd).
|
||||
2. In the list of run configurations, select `androidApp`.
|
||||
3. Choose your virtual device and click **Run**.
|
||||
3. Choose your virtual device and click **Run**:
|
||||
|
||||
<img src="readme_images/run_on_android.png" height="60px">
|
||||
|
||||
<img src="readme_images/android_app_running.png" height="200px">
|
||||
|
||||
<details>
|
||||
@ -105,44 +105,47 @@ To install an Android application on a real device Android device or an emulator
|
||||
|
||||
### On iOS
|
||||
|
||||
#### Running on an iOS simulator
|
||||
#### Running on a simulator
|
||||
|
||||
Once you have configured your environment correctly,
|
||||
you can select which iOS simulator to run your application in Android Studio by modifying the `iosApp` run configuration.
|
||||
To run your application on an iOS simulator in Android Studio, modify the `iosApp` run configuration:
|
||||
|
||||
In the list of run configurations, select **Edit Configurations** and navigate to **iOS Application** | **iosApp**.
|
||||
In the **Execution target** list, select your target device.
|
||||
1. In the list of run configurations, select **Edit Configurations**:
|
||||
|
||||
<img src="readme_images/edit_run_config.png" height="200px">
|
||||
|
||||
2. Navigate to **iOS Application** | **iosApp**.
|
||||
3. In the **Execution target** list, select your target device. Click **OK**:
|
||||
|
||||
<img src="readme_images/target_device.png">
|
||||
|
||||
Press the **Run** button to run your Compose Multiplatform app on the iOS simulator.
|
||||
4. The `iosApp` run configuration is now available. Click **Run** next to your virtual device:
|
||||
|
||||
<img src="readme_images/hello_world_ios.png" height="200px">
|
||||
|
||||
#### Running on a real iOS device
|
||||
#### Running on a real device
|
||||
|
||||
You can run your Compose Multiplatform application on a real device. To do that, you'll need the following:
|
||||
You can run your Compose Multiplatform application on a real iOS device.
|
||||
To do that, you'll need the following:
|
||||
|
||||
* `TEAM_ID` associated with your [Apple ID](https://support.apple.com/en-us/HT204316)
|
||||
* The iOS device registered in Xcode
|
||||
|
||||
Before you continue, we suggest creating a simple "Hello, world!" project in Xcode to ensure you can successfully run apps on your device.
|
||||
You can follow the instructions below or watch this [this Standford CS193P lecture recording](https://youtu.be/bqu6BquVi2M?start=716&end=1399).
|
||||
|
||||
<details>
|
||||
|
||||
<summary>How to create and run a simple project in Xcode</summary>
|
||||
|
||||
1. On the Xcode welcome screen, select **Create a new project in Xcode**.
|
||||
2. On the **iOS** tab, choose the **App** template. Click **Next**.
|
||||
3. Specify the product name and keep other settings default. Click **Next**.
|
||||
4. Select where to store the project on your computer and click **Create**. You'll see an app that displays "Hello, world!" on the device screen.
|
||||
5. At the top of your Xcode screen, click on a device name near the **Run** button.
|
||||
6. Plug in your device to the computer. You'll see this device in the list of run options.
|
||||
7. Choose your device and click **Run**.
|
||||
|
||||
</details>
|
||||
> Before you continue, we suggest creating a simple "Hello, world!" project in Xcode to ensure you can successfully run apps on your device.
|
||||
> You can follow the instructions below or watch this [this Standford CS193P lecture recording](https://youtu.be/bqu6BquVi2M?start=716&end=1399).
|
||||
>
|
||||
> <details>
|
||||
>
|
||||
> <summary>How to create and run a simple project in Xcode</summary>
|
||||
>
|
||||
> 1. On the Xcode welcome screen, select **Create a new project in Xcode**.
|
||||
> 2. On the **iOS** tab, choose the **App** template. Click **Next**.
|
||||
> 3. Specify the product name and keep other settings default. Click **Next**.
|
||||
> 4. Select where to store the project on your computer and click **Create**. You'll see an app that displays "Hello, world!" on the device screen.
|
||||
> 5. At the top of your Xcode screen, click on a device name near the **Run** button.
|
||||
> 6. Plug in your device to the computer. You'll see this device in the list of run options.
|
||||
> 7. Choose your device and click **Run**.
|
||||
>
|
||||
> </details>
|
||||
|
||||
##### Finding your Team ID
|
||||
|
||||
@ -170,7 +173,7 @@ If KDoctor doesn't work for you, try this alternative method:
|
||||
|
||||
</details>
|
||||
|
||||
To run the application, set the `TEAM_ID` associated with your Apple ID:
|
||||
To run the application, set the `TEAM_ID`:
|
||||
|
||||
1. In the template, navigate to the `iosApp/Configuration/Config.xcconfig` file.
|
||||
2. Set your `TEAM_ID`.
|
||||
@ -178,8 +181,9 @@ To run the application, set the `TEAM_ID` associated with your Apple ID:
|
||||
|
||||
## Make your first changes
|
||||
|
||||
In Android Studio, navigate to the `shared/src/commonMain/kotlin/App.kt` file.
|
||||
1. In Android Studio, navigate to the `shared/src/commonMain/kotlin/App.kt` file.
|
||||
It's the common entry point for your Compose Multiplatform app.
|
||||
|
||||
Here, you see the code responsible for rendering the "Hello, World!" button and the animated Compose Multiplatform logo:
|
||||
|
||||
```kotlin
|
||||
@ -207,7 +211,7 @@ internal fun App() {
|
||||
}
|
||||
```
|
||||
|
||||
Update the shared code by adding a text field that will update the name displayed on the button:
|
||||
2. Update the shared code by adding a text field that will update the name displayed on the button:
|
||||
|
||||
```diff
|
||||
@OptIn(ExperimentalResourceApi::class)
|
||||
@ -235,7 +239,7 @@ internal fun App() {
|
||||
}
|
||||
```
|
||||
|
||||
You'll see this change reflected on both the Android and iOS apps:
|
||||
3. Re-run both `androidApp` and `iosApp` configurations. You'll see this change reflected on both the Android and iOS apps:
|
||||
|
||||
<img src="readme_images/text_field_added.png" height="200px">
|
||||
|
||||
|
Before Width: | Height: | Size: 292 KiB After Width: | Height: | Size: 290 KiB |
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 77 KiB |
Before Width: | Height: | Size: 383 KiB After Width: | Height: | Size: 188 KiB |
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 32 KiB |
Before Width: | Height: | Size: 589 KiB After Width: | Height: | Size: 289 KiB |
Before Width: | Height: | Size: 93 KiB After Width: | Height: | Size: 91 KiB |