Jetpack Compose를 사용한 재료 및 맞춤 테마

GitHub

프로젝트 정보

Jetpack Compose를 사용하여 Material 및 Custom 테마를 보여주는 샘플 프로젝트입니다. 목표는 디자인이다
재사용 가능한 기능 모듈은 여러 앱에서 사용할 수 있으며 각 앱은 테마를 제공합니다.
해당 기능 모듈에 필요한 것입니다.

이 프로젝트에는 다음과 같은 모듈이 있습니다.

:components - 재사용 가능한 UI 구성 요소를 포함합니다

.

:기능:등록 - 사용자 정의 가능한 등록 화면

:applications:facebook - 등록 화면에 자체 테마를 제공하는 모듈

:applications:linkedin - 등록 화면에 자체 테마를 제공하는 모듈

작동 방식:

등록 기능 모듈은 다음을 사용하여 모든 사용자 지정 테마 클래스를 노출합니다.CompositionLocal 기본값 사용. 예를 들어:

테마 클래스ExtendedColors는 LocalExtendedColors 구성 및

테마 클래스ExtendedTypography는 LocalExtendedTypography 구성을 사용하여 노출됩니다.

이러한 클래스는 등록 기능에서 UI를 사용자 지정하는 데 사용됩니다. 둘 다
응용 프로그램 모듈, 즉 linkedin 및 facebook은 이러한 사용자 정의 테마에 대한 인스턴스를 생성합니다.
클래스를 만들고 이러한 인스턴스를 등록에 제공합니다.
기능 모듈을 사용하여 CompositionLocalProvider .

예를 들어:

LinkedIn은 이름이 ExtendedTypography인 인스턴스를 생성합니다.LinkedInExtendedTypography 및 ExtendedColors라는 이름의 인스턴스LinkedInExtendedColors를 사용하여 등록 모듈에 제공합니다.

CompositionLocalProvider(
        LocalExtendedTypography provides LinkedInExtendedTypography,
        LocalExtendedColors provides LinkedInExtendedColors
) {
        RegistrationScreen()
}

이제 LocalExtendedTypography.current & LocalExtendedColors.current를 사용하여
액세스ExtendedTypography및 ExtendedColors 응용 프로그램 모듈에서 제공하는 객체.

메모:FacebookApp()에서 LinkedInApp() 또는 MainActivity를 사용하여 다음에서 제공하는 테마를 사용해 보십시오.
2개의 애플리케이션 모듈.

결과