Skip to content

Commit aeeacdb

Browse files
KevinnZouKevinnZou
committed
feat:Release Version 1.0.0
1 parent 3c8ff4d commit aeeacdb

File tree

8 files changed

+86
-315
lines changed

8 files changed

+86
-315
lines changed

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,3 +13,5 @@ iosApp/iosApp.xcworkspace/*
1313
iosApp/iosApp.xcodeproj/*
1414
!iosApp/iosApp.xcodeproj/project.pbxproj
1515
progressIndicator/progressIndicator.podspec
16+
/convention-plugins/
17+
keySec.gpg

‎README.md‎

Lines changed: 60 additions & 309 deletions
Original file line numberDiff line numberDiff line change
@@ -1,314 +1,65 @@
1-
[![official project](http://jb.gg/badges/official.svg)](https://confluence.jetbrains.com/display/ALL/JetBrains+on+GitHub)
2-
[![License](https://img.shields.io/badge/License-Apache_2.0-blue.svg)](https://opensource.org/licenses/Apache-2.0)
3-
# [Compose Multiplatform](https://github.com/JetBrains/compose-multiplatform) application
4-
5-
> **Note**
6-
> The iOS part of Compose Multiplatform is in Alpha. It may change incompatibly and require manual migration in the
7-
> future.
8-
> If you have any issues, please report them on [GitHub](https://github.com/JetBrains/compose-multiplatform/issues).
9-
10-
You can use this template to start developing your
11-
own [Compose Multiplatform](https://github.com/JetBrains/compose-multiplatform#readme) application targeting desktop,
12-
Android, and iOS.
13-
Follow our tutorial below to get your first Compose Multiplatform app up and running.
14-
The result will be a [Kotlin Multiplatform](https://kotlinlang.org/docs/multiplatform.html) project that uses the
15-
Compose Multiplatform UI framework.
16-
17-
<img src="readme_images/banner.png" height="350">
18-
19-
## Set up the environment
20-
21-
> **Warning**
22-
> You need a Mac with macOS to write and run iOS-specific code on simulated or real devices.
23-
> This is an Apple requirement.
24-
25-
To work with this template, you need the following:
26-
27-
* A machine running a recent version of macOS
28-
* [Xcode](https://apps.apple.com/us/app/xcode/id497799835)
29-
* [Android Studio](https://developer.android.com/studio)
30-
* The [Kotlin Multiplatform Mobile plugin](https://plugins.jetbrains.com/plugin/14936-kotlin-multiplatform-mobile)
31-
* The [CocoaPods dependency manager](https://kotlinlang.org/docs/native-cocoapods.html)
32-
33-
### Check your environment
34-
35-
Before you start, use the [KDoctor](https://github.com/Kotlin/kdoctor) tool to ensure that your development environment
36-
is configured correctly:
37-
38-
1. Install KDoctor with [Homebrew](https://brew.sh/):
39-
40-
```text
41-
brew install kdoctor
42-
```
43-
44-
2. Run KDoctor in your terminal:
45-
46-
```text
47-
kdoctor
48-
```
49-
50-
If everything is set up correctly, you'll see valid output:
51-
52-
```text
53-
Environment diagnose (to see all details, use -v option):
54-
[✓] Operation System
55-
[✓] Java
56-
[✓] Android Studio
57-
[✓] Xcode
58-
[✓] Cocoapods
59-
60-
Conclusion:
61-
✓ Your system is ready for Kotlin Multiplatform Mobile development!
62-
```
63-
64-
Otherwise, KDoctor will highlight which parts of your setup still need to be configured and will suggest a way to fix
65-
them.
66-
67-
## Examine the project structure
68-
69-
Open the project in Android Studio and switch the view from **Android** to **Project** to see all the files and targets
70-
belonging to the project:
71-
72-
<img src="readme_images/open_project_view.png" height="300px">
73-
74-
Your Compose Multiplatform project includes 4 modules:
75-
76-
### `shared`
77-
78-
This is a Kotlin module that contains the logic common for desktop, Android, and iOS applications, that is, the code you
79-
share between platforms.
80-
81-
This `shared` module is also where you'll write your Compose Multiplatform code.
82-
In `shared/src/commonMain/kotlin/App.kt`, you can find the shared root `@Composable` function for your app.
83-
84-
It uses Gradle as the build system. You can add dependencies and change settings in `shared/build.gradle.kts`.
85-
The `shared` module builds into a Java library, an Android library, and an iOS framework.
86-
87-
### `desktopApp`
88-
89-
This is a Kotlin module that builds into a desktop application. It uses Gradle as the build system. The `desktopApp`
90-
module depends on and uses the `shared` module as a regular library.
91-
92-
### `androidApp`
93-
94-
This is a Kotlin module that builds into an Android application. It uses Gradle as the build system.
95-
The `androidApp` module depends on and uses the `shared` module as a regular Android library.
96-
97-
### `iosApp`
98-
99-
This is an Xcode project that builds into an iOS application.
100-
It depends on and uses the `shared` module as a CocoaPods dependency.
101-
102-
## Run your application
103-
104-
### On desktop
105-
106-
To run your desktop application in Android Studio, select `desktopApp` in the list of run configurations and click **Run**:
107-
108-
<img src="readme_images/run_on_desktop.png" height="60px"><br />
109-
110-
<img src="readme_images/desktop_app_running.png" height="300px">
111-
112-
You can also run Gradle tasks in the terminal:
113-
114-
* `./gradlew run` to run application
115-
* `./gradlew package` to store native distribution into `build/compose/binaries`
116-
117-
### On Android
118-
119-
To run your application on an Android emulator:
120-
121-
1. Ensure you have an Android virtual device available.
122-
Otherwise, [create one](https://developer.android.com/studio/run/managing-avds#createavd).
123-
2. In the list of run configurations, select `androidApp`.
124-
3. Choose your virtual device and click **Run**:
125-
126-
<img src="readme_images/run_on_android.png" height="60px"><br />
127-
128-
<img src="readme_images/android_app_running.png" height="300px">
129-
130-
<details>
131-
<summary>Alternatively, use Gradle</summary>
132-
133-
To install an Android application on a real Android device or an emulator, run `./gradlew installDebug` in the terminal.
134-
135-
</details>
136-
137-
### On iOS
138-
139-
#### Running on a simulator
140-
141-
To run your application on an iOS simulator in Android Studio, modify the `iosApp` run configuration:
142-
143-
1. In the list of run configurations, select **Edit Configurations**:
144-
145-
<img src="readme_images/edit_run_config.png" height="200px">
146-
147-
2. Navigate to **iOS Application** | **iosApp**.
148-
3. In the **Execution target** list, select your target device. Click **OK**:
149-
150-
<img src="readme_images/target_device.png" height="400px">
151-
152-
4. The `iosApp` run configuration is now available. Click **Run** next to your virtual device:
153-
154-
<img src="readme_images/ios_app_running.png" height="300px">
155-
156-
#### Running on a real iOS device
157-
158-
You can run your Compose Multiplatform application on a real iOS device for free.
159-
To do so, you'll need the following:
160-
161-
* The `TEAM_ID` associated with your [Apple ID](https://support.apple.com/en-us/HT204316)
162-
* The iOS device registered in Xcode
163-
164-
> **Note**
165-
> Before you continue, we suggest creating a simple "Hello, world!" project in Xcode to ensure you can successfully run
166-
> apps on your device.
167-
> You can follow the instructions below or watch
168-
> this [Stanford CS193P lecture recording](https://youtu.be/bqu6BquVi2M?start=716&end=1399).
169-
170-
<details>
171-
<summary>How to create and run a simple project in Xcode</summary>
172-
173-
1. On the Xcode welcome screen, select **Create a new project in Xcode**.
174-
2. On the **iOS** tab, choose the **App** template. Click **Next**.
175-
3. Specify the product name and keep other settings default. Click **Next**.
176-
4. Select where to store the project on your computer and click **Create**. You'll see an app that displays "Hello,
177-
world!" on the device screen.
178-
5. At the top of your Xcode screen, click on the device name near the **Run** button.
179-
6. Plug your device into the computer. You'll see this device in the list of run options.
180-
7. Choose your device and click **Run**.
181-
182-
</details>
183-
184-
##### Finding your Team ID
185-
186-
In the terminal, run `kdoctor --team-ids` to find your Team ID.
187-
KDoctor will list all Team IDs currently configured on your system, for example:
188-
189-
```text
190-
3ABC246XYZ (Max Sample)
191-
ZABCW6SXYZ (SampleTech Inc.)
1+
# compose-progressIndicator-multiplatform
2+
This Library is a Multiplatform version of [compose-progressIndicator](https://github.com/KevinnZou/compose-progressIndicator) which
3+
is designed to improve the [LinearProgressIndicator](https://foso.github.io/Jetpack-Compose-Playground/material/linearprogressindicator/) provided by Jetpack Compose.
4+
Beside the base functionality provided by LinearProgressIndicator, This library supports the round corners for progressbar, thumb at the end of the bar, and the animations when progress changed.
5+
Developers can customize the size, position, and the color of the thumb.
6+
7+
<img src="media/simple-indicator.gif" width=300>
8+
9+
# Usage
10+
All functionalities mentioned above are implemented in one component: [SimpleProgressIndicatorWithAnim](https://github.com/KevinnZou/compose-progressIndicator-multiplatform/blob/main/progressIndicator/src/commonMain/kotlin/progressindicator/SimpleProgressIndicator.kt)
11+
```kotlin
12+
@Composable
13+
fun SimpleProgressIndicatorWithAnim(
14+
modifier: Modifier = Modifier,
15+
progress: Float = 0.7f,
16+
progressBarColor: Color = Color.Red,
17+
cornerRadius: Dp = 0.dp,
18+
trackColor: Color = Color(0XFFFBE8E8),
19+
thumbRadius: Dp = 0.dp,
20+
thumbColor: Color = Color.White,
21+
thumbOffset: Dp = thumbRadius,
22+
animationSpec: AnimationSpec<Float> = SimpleProgressIndicatorDefaults.SimpleProgressAnimationSpec,
23+
) {}
24+
```
25+
you can use it simply like that
26+
```kotlin
27+
SimpleProgressIndicatorWithAnim(
28+
modifier = Modifier
29+
.padding(15.dp)
30+
.fillMaxWidth()
31+
.height(4.dp),
32+
progress,
33+
cornerRadius = 35.dp,
34+
thumbRadius = 1.dp,
35+
thumbOffset = 1.5.dp
36+
)
37+
```
38+
If you do not want to have animation, then you can use [SimpleProgressIndicator](https://github.com/KevinnZou/compose-progressIndicator-multiplatform/blob/main/progressIndicator/src/commonMain/kotlin/progressindicator/SimpleProgressIndicator.kt)
39+
```kotlin
40+
@Composable
41+
fun SimpleProgressIndicator(
42+
modifier: Modifier = Modifier,
43+
progress: Float = 0.7f,
44+
progressBarColor: Color = Color.Red,
45+
cornerRadius: Dp = 0.dp,
46+
trackColor: Color = Color(0XFFFBE8E8),
47+
thumbRadius: Dp = 0.dp,
48+
thumbColor: Color = Color.White,
49+
thumbOffset: Dp = thumbRadius
50+
) {}
19251
```
19352

194-
<details>
195-
<summary>Alternative way to find your Team ID</summary>
196-
197-
If KDoctor doesn't work for you, try this alternative method:
198-
199-
1. In Android Studio, run the `iosApp` configuration with the selected real device. The build should fail.
200-
2. Go to Xcode and select **Open a project or file**.
201-
3. Navigate to the `iosApp/iosApp.xcworkspace` file of your project.
202-
4. In the left-hand menu, select `iosApp`.
203-
5. Navigate to **Signing & Capabilities**.
204-
6. In the **Team** list, select your team.
205-
206-
If you haven't set up your team yet, use the **Add account** option and follow the steps.
207-
208-
</details>
209-
210-
To run the application, set the `TEAM_ID`:
211-
212-
1. In the template, navigate to the `iosApp/Configuration/Config.xcconfig` file.
213-
2. Set your `TEAM_ID`.
214-
3. Re-open the project in Android Studio. It should show the registered iOS device in the `iosApp` run configuration.
215-
216-
## Make your first changes
217-
218-
You can now make some changes in the code and check that they are visible in both the iOS and Android applications at
219-
the same time:
220-
221-
1. In Android Studio, navigate to the `shared/src/commonMain/kotlin/App.kt` file.
222-
This is the common entry point for your Compose Multiplatform app.
223-
224-
Here, you see the code responsible for rendering the "Hello, World!" button and the animated Compose Multiplatform logo:
225-
226-
```kotlin
227-
@OptIn(ExperimentalResourceApi::class)
228-
@Composable
229-
internal fun App() {
230-
MaterialTheme {
231-
var greetingText by remember { mutableStateOf("Hello, World!") }
232-
var showImage by remember { mutableStateOf(false) }
233-
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
234-
Button(onClick = {
235-
greetingText = "Hello, ${getPlatformName()}"
236-
showImage = !showImage
237-
}) {
238-
Text(greetingText)
239-
}
240-
AnimatedVisibility(showImage) {
241-
Image(
242-
painterResource("compose-multiplatform.xml"),
243-
null
244-
)
245-
}
246-
}
247-
}
248-
}
249-
```
250-
251-
2. Update the shared code by adding a text field that will update the name displayed on the button:
252-
253-
```diff
254-
@OptIn(ExperimentalResourceApi::class)
255-
@Composable
256-
internal fun App() {
257-
MaterialTheme {
258-
var greetingText by remember { mutableStateOf("Hello, World!") }
259-
var showImage by remember { mutableStateOf(false) }
260-
Column(Modifier.fillMaxWidth(), horizontalAlignment = Alignment.CenterHorizontally) {
261-
Button(onClick = {
262-
greetingText = "Hello, ${getPlatformName()}"
263-
showImage = !showImage
264-
}) {
265-
Text(greetingText)
266-
}
267-
+ TextField(greetingText, onValueChange = { greetingText = it })
268-
AnimatedVisibility(showImage) {
269-
Image(
270-
painterResource("compose-multiplatform.xml"),
271-
null
272-
)
273-
}
274-
}
275-
}
276-
}
277-
```
278-
279-
3. Re-run the `desktopApp`, `androidApp`, and `iosApp` configurations. You'll see this change reflected in all three
280-
apps:
281-
282-
<img src="readme_images/text_field_added.png" height="350px">
283-
284-
## How to configure the iOS application
285-
286-
To get a better understanding of this template's setup and learn how to configure the basic properties of your iOS app without Xcode,
287-
open the `iosApp/Configuration/Config.xcconfig` file in Android Studio. The configuration file contains:
288-
289-
* `APP_NAME`, a target executable and an application bundle name.
290-
* `BUNDLE_ID`,
291-
which [uniquely identifies the app throughout the system](https://developer.apple.com/documentation/bundleresources/information_property_list/cfbundleidentifier#discussion).
292-
* `TEAM_ID`, [a unique identifier generated by Apple that's assigned to your team](https://developer.apple.com/help/account/manage-your-team/locate-your-team-id/#:~:text=A%20Team%20ID%20is%20a,developer%20in%20App%20Store%20Connect).
293-
294-
To configure the `APP_NAME` option, open `Config.xcconfig` in any text editor *before opening* the project in Android
295-
Studio, and then set the desired name.
296-
297-
If you need to change this option after you open the project in Android Studio, do the following:
298-
299-
1. Close the project in Android Studio.
300-
2. Run `./cleanup.sh` in your terminal.
301-
3. Change the setting.
302-
4. Open the project in Android Studio again.
303-
304-
To configure advanced settings, use Xcode. After opening the project in Android Studio,
305-
open the `iosApp/iosApp.xcworkspace` file in Xcode and make changes there.
53+
## Download
30654

307-
## Next steps
55+
[![Maven Central](https://img.shields.io/maven-central/v/io.github.kevinnzou/compose-progressIndicator-multiplatform.svg)](https://search.maven.org/artifact/io.github.kevinnzou/compose-progressIndicator-multiplatform)
30856

309-
We encourage you to explore Compose Multiplatform further and try out more projects:
57+
```groovy
58+
repositories {
59+
mavenCentral()
60+
}
31061
311-
* [Create an application targeting iOS and Android with Compose Multiplatform](https://github.com/JetBrains/compose-multiplatform-ios-android-template#readme)
312-
* [Create an application targeting Windows, macOS, and Linux with Compose Multiplatform for Desktop](https://github.com/JetBrains/compose-multiplatform-desktop-template#readme)
313-
* [Complete more Compose Multiplatform tutorials](https://github.com/JetBrains/compose-multiplatform/blob/master/tutorials/README.md)
314-
* [Explore some more advanced Compose Multiplatform example projects](https://github.com/JetBrains/compose-multiplatform/blob/master/examples/README.md)
62+
dependencies {
63+
implementation "io.github.kevinnzou:compose-progressIndicator-multiplatform:1.0.0"
64+
}
65+
```

0 commit comments

Comments
 (0)