compose-samples

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

compose-samples

★ 23,380 Open GitHub ↗

공식 Jetpack Compose 예제입니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Jetpack Compose Samples
![Jetpack Compose Samples](readme/samples_montage.gif)
이 저장소는 Android에서 Compose를 배우는 데 도움이 되는 개별 Android Studio 프로젝트 모음을 포함하고 있습니다. 각 샘플은 다양한 사용 사례, 복잡도 수준 및 API를 보여줍니다.
자세한 내용은 [문서 읽기](https://developer.android.com/jetpack/compose)를 참고하세요.
💻 요구 사항
------------
이 샘플 앱을 사용해 보려면 [Android Studio](https://developer.android.com/studio)를 사용해야 합니다.
이 저장소를 복제(clone)하거나 [여기](https://developer.android.com/jetpack/compose/setup#sample)의 단계에 따라 Android Studio에서 프로젝트를 가져올 수 있습니다.
🧬 샘플
------------
| Project | |
|:-----|---------|
|   
![JetNews](readme/jetnews.png)   
  
 일반적인 Material 앱과 실제 아키텍처에서 Compose를 사용하는 방법을 보여주는 샘플 블로그 게시물 뷰어입니다.   
  
 • 중간 난이도  
• 다양한 UI  
• 라이트 및 다크 테마  
• 리소스 로딩  
• UI 테스트   
  
 \*\*[> Browse](JetNews/)\*\*  
  
 | ![Jetnews sample demo](readme/screenshots/JetNews.png) |
| | |
|   
![Jetchat](readme/jetchat.png)   
  
UI 상태 패턴과 텍스트 입력에 초점을 맞춘 샘플 채팅 앱입니다.  
  
• 낮은 난이도  
• Material Design 3 테마 및 Material You 동적 색상  
• 리소스 로딩  
• 뒤로 가기 버튼 처리  
• 아키텍처 구성 요소 통합: Navigation, Fragments, LiveData, ViewModel  
• 애니메이션  
• UI 테스트  
  
\*\*[> Browse](Jetchat/)\*\*   
  
 | ![Jetchat sample demo](readme/screenshots/Jetchat.png)|
| | |
|   
![Jetsnack](readme/jetsnack.png)   
  
Jetsnack은 Compose로 제작된 샘플 간식 주문 앱입니다.  
  
• 중간 난이도  
• 커스텀 디자인 시스템  
• 커스텀 레이아웃  
• 애니메이션  
  
\*\*[> Browse](Jetsnack/)\*\*   
  
 | ![Jetsnack sample demo](readme/screenshots/Jetsnack.png)|
| | |
|   
![Jetcaster](readme/jetcaster.png)   
  
모든 기능을 갖춘 Redux 스타일의 아키텍처를 특징으로 하며 동적 테마를 보여주는 샘플 팟캐스트 앱입니다.  
  
• 고급 샘플  
• 팟캐스트 아트워크를 사용한 동적 테마 적용  
• 이미지 가져오기  
• [`WindowInsets`](https://developer.android.com/reference/kotlin/android/view/WindowInsets) 지원  
• 코루틴(Coroutines)  
• Room을 사용한 로컬 저장소  
  
\*\*[> Browse](Jetcaster/)\*\*   
  
 | ![Jetcaster sample demo](readme/screenshots/Jetcaster.png)|
| | |
|   
![Reply](readme/reply.png)   
  
모바일, 태블릿, 폴더블 기기를 위한 반응형 디자인에 중점을 둔 이메일 클라이언트 앱인 Reply Material 스터디의 Compose 구현 버전입니다. 또한 최신 Material Design 3 테마,동적 색상 및 내비게이션 구성 요소를 보여줍니다.  
  
• 중간 난이도  
• 휴대폰, 태블릿, 데스크톱을 위한 반응형 UI  
• 폴더블 지원  
• Material 3 테마 및 구성 요소  
• 동적 색상 및 라이트/다크 테마 지원  
  
\*\*[> Browse](Reply/)\*\*   
  
 | ![Reply sample demo](readme/screenshots/Reply.png)|
| | |
|   
![JetLagged](readme/jetlagged_heading.png)   
  
Compose에서 커스텀 레이아웃과 그래픽을 만드는 방법을 보여주는 샘플 수면 추적 앱입니다.  
  
• 커스텀 레이아웃  
• Path를 이용한 그래프  
  
\*\*[> Browse](JetLagged/)\*\*   
  
 | ![JetLagged sample demo](JetLagged/screenshots/JetLagged_Full.png)|
🧬 추가 샘플
------------
| Project | |
|:-----|---------|
|   
![Now in Android](readme/nia.png)   
  
Android의 최신 뉴스와 개발 소식을 파악하기 위한 앱입니다.  
  
• [Jetpack Compose](https://developer.android.com/jetpack/compose) 우선 앱.  
• 권장되는 Android [아키텍처 가이드라인](https://developer.android.com/topic/architecture) 구현  
• 실제 앱의 맥락에서 [Jetpack 라이브러리](https://developer.android.com/jetpack)를 총체적으로 통합  
  
[![](https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png)](https://play.google.com/store/apps/details?id=com.google.samples.apps.nowinandroid)  
\*\*[> Browse](https://github.com/android/nowinandroid)\*\*   
  
 | ![Now In Android Github Repository](read

me/screenshots/NiA.png)|
| | |
|   
![Material Catalog](readme/material_catalog.png)   
  
Jetpack Compose에서 사용할 수 있는 Material Design 컴포넌트와 기능 카탈로그입니다. 실제 기기에서 어떻게 구현되는지, 그리고 어떻게 보이고 작동하는지 확인해 보세요.  
  
• AOSP에 포함됨—항상 최신 상태 유지  
• API 레퍼런스 문서와 동일한 샘플 사용  
• 런타임에 Material Theming 값을 변경할 수 있는 테마 선택기  
• 가이드라인, 문서, 소스 코드 및 이슈 트래커 링크 제공  
  
[![](https://play.google.com/intl/en_us/badges/static/images/badges/en_badge_web_generic.png)](https://play.google.com/store/apps/details?id=androidx.compose.material.catalog)  
\*\*[> AOSP에서 찾아보기](https://cs.android.com/androidx/platform/frameworks/support/+/androidx-main:compose/integration-tests/material-catalog)\*\*   
  
 | ![Material Catalog sample demo](readme/screenshots/Material_Catalog.png)|
## 주요 기능
다음과 같은 기능을 가진 샘플을 찾고 계시나요?
### 커스텀 레이아웃
\* [Jetnews: 관심사 화면](https://github.com/android/compose-samples/blob/ee198110d8a7575da281de9bd0f84e91970468ca/JetNews/app/src/main/java/com/example/jetnews/ui/interests/InterestsScreen.kt#L428)
\* [Jetchat: AnimatedFabContent](https://github.com/android/compose-samples/blob/ee198110d8a7575da281de9bd0f84e91970468ca/Jetchat/app/src/main/java/com/example/compose/jetchat/components/AnimatingFabContent.kt#L101)
\* [Jetsnack: Grid](https://github.com/android/compose-samples/blob/73d7f25815e6936e0e815ce975905a6f10744c36/Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Grid.kt#L27)
\* [Jetsnack: CollapsingImageLayout](https://github.com/android/compose-samples/blob/main/Jetsnack/app/src/main/java/com/example/jetsnack/ui/snackdetail/SnackDetail.kt)
### 테마 지정
\* [Jetchat: Material3](https://github.com/android/compose-samples/blob/main/Jetchat/app/src/main/java/com/example/compose/jetchat/theme/Themes.kt#L91)
\* [Jetcaster: 커버 아트 기반 커스텀 테마](https://github.com/android/compose-samples/blob/main/Jetcaster/app/src/main/java/com/example/jetcaster/util/DynamicTheming.kt)
\* [Jetsnack: 커스텀 디자인 시스템](https://github.com/android/compose-samples/blob/main/Jetsnack/app/src/main/java/com/example/jetsnack/ui/theme/Theme.kt)
### 애니메이션
\* [Jetsurvey: AnimatedContent](https://github.com/android/compose-samples/pull/842)
\* [Jetcaster: 애니메이션 적용 테마 색상](https://github.com/android/compose-samples/blob/69e9d862b5ffb321064364d7883e859db6daeccd/Jetcaster/app/src/main/java/com/example/jetcaster/util/DynamicTheming.kt)
\* [Jetsnack: 하단 바 애니메이션](https://github.com/android/compose-samples/blob/main/Jetsnack/app/src/main/java/com/example/jetsnack/ui/home/Home.kt)
### 텍스트
\* [Jetchat: 다운로드 가능한 폰트](https://github.com/android/compose-samples/pull/787)
### 대형 화면
\* [Jetcaster - Supporting Pane](https://github.com/android/compose-samples/blob/3dbbf0912b57dacefcfb79191a2d7d6b053dadb8/Jetcaster/app/src/main/java/com/example/jetcaster/ui/home/Home.kt#L282)
\* [Jetnews - 창 크기 클래스](https://github.com/android/compose-samples/blob/69e9d862b5ffb321064364d7883e859db6daeccd/JetNews/app/src/main/java/com/example/jetnews/ui/MainActivity.kt#L36)
### TV
\* [Jetcaster - TV](https://github.com/android/compose-samples/tree/3dbbf0912b57dacefcfb79191a2d7d6b053dadb8/Jetcaster/tv-app)
### Wear
\* [Jetcaster - Wear](https://github.com/android/compose-samples/tree/3dbbf0912b57dacefcfb79191a2d7d6b053dadb8/Jetcaster/wear)
## 포맷팅
모든 샘플을 자동으로 포맷팅하려면: `./scripts/format.sh` 실행
단일 샘플에서 오류를 검사하려면: 샘플 폴더로 이동하여 `./gradlew spotlessCheck` 실행
단일 샘플을 포맷팅하려면: 샘플 폴더로 이동하여 `./gradlew spotlessApply` 실행
## 업데이트
의존성을 최신 안정 버전으로 업데이트하려면 다음을 실행하세요:
```
./scripts/updateDeps.sh
```
기타 다른 버전 업데이트는 개별적으로 진행해야 합니다.
## 사용되지 않는 샘플 프로젝트
시간이 지남에 따라 일부 샘플은 다소 오래되어 저장소를 관리하기 쉽게 유지하기 위해 제거됩니다.

이동할 수 있습니다. 궁금하신 경우 기록에서 여전히 찾아볼 수 있지만, 초보자라면 가장 최신 리소스를 계속 이용하는 것이 더 좋습니다.
| 프로젝트 | 제거됨 | 커밋 |
| ------------------------------------------------ | -----------|-------------------------------------------------------------------- |
| [Crane](../../tree/v2024.05.00/Crane) | 2024-08-02 | [ee8e272](../../commit/ee8e27289f4bc36304ee9f04397f49c35f402a65) |
| [Owl](../../tree/v2024.05.00/Owl) | 2024-08-02 | [ee8e272](../../commit/ee8e27289f4bc36304ee9f04397f49c35f402a65) |
| [Jetsurvey](../../tree/v2024.05.00/Jetsurvey) | 2024-08-02 | [ee8e272](../../commit/ee8e27289f4bc36304ee9f04397f49c35f402a65) |
| [Rally](../../tree/v2024.05.00/Rally) | 2024-08-02 | [ee8e272](../../commit/ee8e27289f4bc36304ee9f04397f49c35f402a65) |
## License
```
Copyright 2024 The Android Open Source Project
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
```

compose-samples

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README