Palette API로 색상 선택

좋은 시각적 디자인은 성공적인 앱의 필수 요소이며 색 구성표는 설계의 기본 구성 요소입니다. 이 Palette 라이브러리는 이미지에서 눈에 띄는 색상을 추출하여 시각적으로 눈길을 사로잡는 라이브러리 있습니다.

Palette 라이브러리를 사용하여 레이아웃을 디자인할 수 있음 테마를 설정하고 맞춤 색상을 시각적 요소를 제공합니다. 예를 들어, 팔레트를 사용하여 앨범 표지에 따라 노래의 색상을 조화롭게 조정하거나 앱의 툴바 색상을 변경할 수 있습니다. 이 Palette 객체를 사용하면 색상에 액세스할 수 있습니다. Bitmap 이미지 비트맵에서 6개의 기본 색상 프로필을 제공하여 디자인 선택

라이브러리 설정

Palette 라이브러리를 사용하려면 다음을 추가합니다. build.gradle:

Kotlin

android {
    compileSdkVersion(33)
    ...
}

dependencies {
    ...
    implementation("androidx.palette:palette:1.0.0")
}

Groovy

android {
    compileSdkVersion 33
    ...
}

dependencies {
    ...
    implementation 'androidx.palette:palette:1.0.0'
}

팔레트 만들기

Palette 객체를 사용하면 요소의 기본 색상에 액세스할 수 있습니다. 오버레이된 텍스트에 해당하는 색상을 지정할 수 있습니다. 팔레트를 사용하여 앱의 스타일을 디자인하고 앱의 색 구성표를 동적으로 작업을 수행합니다

팔레트를 만들려면 먼저 Palette.Builder (Bitmap에서 가져옴) 그런 다음 Palette.Builder를 사용하여 팔레트를 맞춤설정해야 합니다. 이 섹션에서는 팔레트를 설명합니다. 생성 및 사용자설정할 수 있습니다.

팔레트 인스턴스 생성

다음을 사용하여 Palette 인스턴스를 생성합니다. from(Bitmap bitmap) 메서드를 사용하여 먼저 Palette.Builder Bitmap입니다.

빌더는 동기식 또는 비동기식으로 팔레트를 생성할 수 있습니다. 사용 같은 열에 팔레트를 만들고 싶은 경우 스레드를 호출합니다. 팔레트를 비동기식으로 생성하면 가 있는 경우 onGenerated() 메서드를 사용하여 팔레트가 생성된 직후 팔레트에 액세스할 수 있습니다.

다음 코드 스니펫은 두 가지 유형의 팔레트에 대한 예시 메서드를 제공합니다. 생성:

Kotlin

// Generate palette synchronously and return it.
fun createPaletteSync(bitmap: Bitmap): Palette = Palette.from(bitmap).generate()

// Generate palette asynchronously and use it on a different thread using onGenerated().
fun createPaletteAsync(bitmap: Bitmap) {
    Palette.from(bitmap).generate { palette ->
        // Use generated instance.
    }
}

자바

// Generate palette synchronously and return it.
public Palette createPaletteSync(Bitmap bitmap) {
  Palette p = Palette.from(bitmap).generate();
  return p;
}

// Generate palette asynchronously and use it on a different thread using onGenerated().
public void createPaletteAsync(Bitmap bitmap) {
  Palette.from(bitmap).generate(new PaletteAsyncListener() {
    public void onGenerated(Palette p) {
      // Use generated instance.
    }
  });
}

이미지나 이미지가 정렬된 목록을 위해 팔레트를 계속 생성해야 하는 경우 객체의 현재 상태를 캐싱하는 방법은 Palette 인스턴스를 사용하여 UI 성능 저하를 방지하세요. GCP 콘솔에서 팔레트를 기본 스레드를 참고하세요.

팔레트 맞춤설정

Palette.Builder를 사용하면 결과 팔레트의 색상 수, 이미지의 영역 팔레트를 생성하는 데 사용하는 기본 색상과 있습니다. 예를 들어 검은색을 필터링하거나 이미지의 상단 절반만 사용하여 팔레트를 생성합니다.

아래의 방법을 사용하여 팔레트의 크기와 색상을 세밀하게 Palette.Builder 클래스:

addFilter()

이 메서드는 확인할 수 있습니다. 직접 전달 Palette.Filter 그리고 isAllowed() 메서드를 수정하여 어떤 색상이 볼 수 있습니다.

maximumColorCount()

이 메서드는 팔레트의 최대 색상 수를 설정합니다. 기본값 값은 16이며 최적의 값은 소스 이미지에 따라 다릅니다. 대상 최적값은 8~16이고, 얼굴이 있는 사진은 일반적으로 24~32 사이의 값을 갖습니다 Palette.Builder가 더 많은 색상으로 팔레트를 생성할 수 있습니다.

setRegion()

이 메서드는 빌더가 사용하는 비트맵 영역을 나타냅니다. 살펴보겠습니다. 이 메서드는 팔레트를 생성할 때만 사용할 수 있습니다. 원본 이미지에는 영향을 미치지 않습니다.

addTarget()

이 방법을 사용하면 Target 색상 프로필을 빌더에 추가합니다. 기본 Target가 다음과 같은 경우 개발자가 자신의 Target를 만들 수 있는 능력이 부족한 개발자 다음을 사용하여 Target.Builder입니다.

색상 프로필 추출

기준: 기술 표준에 따라 디자인에 따라, Palette 라이브러리는 흔히 사용되는 색상 프로필을 이미지 각 프로필은 Target로 정의되고 색상이 추출됨 채도에 따라 각 프로필에 대해 점수가 매겨지며, 휘도, 모집단( 색상)을 입력합니다. 각 프로필에서 최고 점수를 받은 색상이 해당 색상을 정의합니다. 프로필입니다.

기본적으로 Palette 객체에는 표시됩니다. 팔레트를 생성할 때 맞춤설정할 수 있습니다. Palette.Builder입니다. 더 많은 색상을 추출하면 잠재력이 커짐 각 색상 프로필과 일치하지만 Palette.Builder도 발생합니다. 더 오래 걸릴 수 있습니다.

Palette 라이브러리는 다음 6가지 색상 프로필을 추출하려고 시도합니다.

• 밝고 생생함
• 생생함
• 어둡고 생생함
• 밝고 수수함
• 수수함
• 어둡고 수수함

다음의 각 get<Profile>Color() 메서드는 Palette는 이와 연결된 팔레트의 색상을 반환합니다. 여기서 <Profile>가 다음으로 대체됩니다. 6가지 색상 프로필 중 하나의 이름입니다. 예를 들어 어둡고 선명한 색상 프로필 getDarkVibrantColor() 모든 이미지에 모든 색상 프로필이 포함되어 있는 것은 아니므로 반환합니다.

그림 1은 get<Profile>Color() 메서드를 사용하여 지도 가장자리에 패딩을 추가할 수 있습니다.

그림 1. 예시 이미지와 해당 이미지에서 추출된 색상 프로필은 팔레트의 기본 최대 색상 수 (16)입니다.

견본을 사용하여 색 구성표 만들기

또한 Palette 클래스는 Palette.Swatch 각 색상 프로필에 대한 객체입니다. Palette.Swatch 객체에는 해당 프로필의 관련 색상 및 픽셀

견본에는 색상 프로필(예: HSL 값, 픽셀 수) 견본을 사용하여 보다 포괄적인 색 구성표와 앱 테마를 만들 수 있도록 getBodyTextColor() 및 getTitleTextColor() 메서드를 참조하세요. 이러한 메서드는 견본보다 먼저 사용하기에 적절한 색상을 반환합니다. color[색상]

각 get<Profile>Swatch() 메서드 Palette는 특정 프로필과 연결된 견본을 반환합니다. 여기서 <Profile>는 6가지 색상 프로필을 확인할 수 있습니다. 팔레트의 get<Profile>Swatch() 메서드에는 기본값이 필요하지 않음 해당 프로필이 있으면 null을 반환합니다. 존재하지 않습니다. 따라서 작업을 실행하기 전에 견본이 null이 아닌지 사용할 수 있습니다. 예를 들어 다음 코드는 생생한 견본이 null이 아닌 경우 팔레트를 추가합니다.

Kotlin

val vibrant = myPalette.vibrantSwatch
// In Kotlin, check for null before accessing properties on the vibrant swatch.
val titleColor = vibrant?.titleTextColor

자바

Palette.Swatch vibrant = myPalette.getVibrantSwatch();
if(vibrant != null){
    int titleColor = vibrant.getTitleTextColor();
    // ...
}

팔레트의 모든 색상에 액세스하려면 getSwatches() 메서드는 이미지에서 생성된 모든 견본의 목록을 반환합니다. 여기에는 표준 6가지 색상 프로필을 제공합니다.

다음 코드 스니펫은 위 코드의 메서드를 사용합니다. 사용하여 팔레트를 동기식으로 생성하고, 생동감 있는 견본을 얻고, 비트맵 이미지와 일치하도록 툴바 색상을 설정합니다. 그림 2는 결과 이미지 및 툴바가 표시됩니다.

Kotlin

// Set the background and text colors of a toolbar given a bitmap image to
// match.
fun setToolbarColor(bitmap: Bitmap) {
    // Generate the palette and get the vibrant swatch.
    val vibrantSwatch = createPaletteSync(bitmap).vibrantSwatch

    // Set the toolbar background and text colors.
    // Fall back to default colors if the vibrant swatch isn't available.
    with(findViewById<Toolbar>(R.id.toolbar)) {
        setBackgroundColor(vibrantSwatch?.rgb ?:
                ContextCompat.getColor(context, R.color.default_title_background))
        setTitleTextColor(vibrantSwatch?.titleTextColor ?:
                ContextCompat.getColor(context, R.color.default_title_color))
    }
}

자바

// Set the background and text colors of a toolbar given a bitmap image to
// match.
public void setToolbarColor(Bitmap bitmap) {
    // Generate the palette and get the vibrant swatch.
    // See the createPaletteSync() method from the preceding code snippet.
    Palette p = createPaletteSync(bitmap);
    Palette.Swatch vibrantSwatch = p.getVibrantSwatch();

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

    // Load default colors.
    int backgroundColor = ContextCompat.getColor(getContext(),
        R.color.default_title_background);
    int textColor = ContextCompat.getColor(getContext(),
        R.color.default_title_color);

    // Check that the Vibrant swatch is available.
    if(vibrantSwatch != null){
        backgroundColor = vibrantSwatch.getRgb();
        textColor = vibrantSwatch.getTitleTextColor();
    }

    // Set the toolbar background and text colors.
    toolbar.setBackgroundColor(backgroundColor);
        toolbar.setTitleTextColor(textColor);
}

그림 2. 생동감 넘치는 색상의 툴바와 지정할 수 있습니다.