Palette API로 색상 선택

좋은 시각적 디자인은 성공적인 앱에 필수적이며 색 구성표는 디자인의 기본 구성요소입니다. Palette 라이브러리는 이미지에서 눈에 띄는 색상을 추출하여 시각적으로 매력적인 앱을 만드는 Jetpack 라이브러리입니다.

Palette 라이브러리를 사용하여 레이아웃 테마를 디자인하고 앱의 시각적 요소에 맞춤 색상을 적용할 수 있습니다. 예를 들어, 팔레트를 사용하여 앨범 표지를 기반으로 노래의 색상으로 조율된 제목 카드를 만들거나 배경 이미지가 변경될 때 앱의 툴바 색상을 조정할 수 있습니다. Palette 객체를 사용하면 Bitmap 이미지의 색상에 액세스할 수 있으며 비트맵의 6가지 기본 색상 프로필을 제공하여 디자인 선택을 알릴 수 있습니다.

라이브러리 설정

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

android {
    compileSdkVersion(33)
    ...
}

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

android {
    compileSdkVersion 33
    ...
}

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

팔레트 만들기

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

팔레트를 만들려면 먼저 Bitmap에서 Palette.Builder를 인스턴스화합니다. 팔레트를 생성하기 전에 Palette.Builder를 사용하여 팔레트를 맞춤설정할 수 있습니다. 이 섹션에서는 비트맵 이미지에서 팔레트를 생성하고 맞춤설정하는 방법을 설명합니다.

팔레트 인스턴스 생성

먼저 Bitmap에서 Palette.Builder를 만들려면 from(Bitmap bitmap) 메서드를 사용하여 Palette 인스턴스를 생성합니다.

빌더는 동기식 또는 비동기식으로 팔레트를 생성할 수 있습니다. 호출되는 메서드와 동일한 스레드에 팔레트를 만들려면 동기 팔레트 생성을 사용하세요. 팔레트를 다른 스레드에서 비동기식으로 생성하는 경우 팔레트를 만든 직후에 onGenerated() 메서드를 사용하여 팔레트에 액세스할 수 있습니다.

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

// 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.
    }
  });
}

이미지 또는 객체의 정렬된 목록을 위해 팔레트를 지속적으로 생성해야 하는 경우 UI 성능이 느려지지 않도록 Palette 인스턴스를 캐싱하는 것이 좋습니다. 기본 스레드에는 팔레트를 만들지 마세요.

팔레트 맞춤설정

Palette.Builder를 사용하면 결과 팔레트의 색상 수, 빌더가 팔레트를 생성하는 데 사용하는 이미지 영역, 팔레트에 포함되는 색상을 선택하여 팔레트를 맞춤설정할 수 있습니다. 예를 들어 검은색을 필터링하거나 빌더가 이미지의 상단 절반만 사용하여 팔레트를 생성하도록 할 수 있습니다.

Palette.Builder 클래스의 다음 메서드를 사용하여 팔레트의 크기와 색상을 세밀하게 조정하세요.

addFilter()

이 메서드는 결과 팔레트에 허용되는 색상을 나타내는 필터를 추가합니다. 자체 Palette.Filter를 전달하고 isAllowed() 메서드를 수정하여 팔레트에서 필터링될 색상을 결정합니다.

maximumColorCount()

이 메서드는 팔레트의 최대 색상 수를 설정합니다. 기본값은 16이며 최적값은 소스 이미지에 따라 다릅니다. 풍경 사진에서는 최적값이 8~16이고 얼굴이 있는 사진에서는 보통 24~32값이 있습니다. Palette.Builder가 더 많은 색상으로 팔레트를 생성하는 데 더 오래 걸립니다.

setRegion()

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

addTarget()

이 메서드를 사용하면 빌더에 Target 색상 프로필을 추가하여 자체 색상을 일치시킬 수 있습니다. 기본 Target가 충분하지 않은 경우 고급 개발자는 Target.Builder를 사용하여 자체 Target를 만들 수 있습니다.

색상 프로필 추출

Palette 라이브러리는 Material Design 표준을 기반으로 이미지에서 흔히 사용되는 색상 프로필을 추출합니다. 각 프로필은 Target로 정의되고 비트맵 이미지에서 추출된 색상은 채도, 휘도, 채우기 (색상으로 표시되는 비트맵의 픽셀 수)를 기준으로 각 프로필과 비교하여 점수를 매깁니다. 각 프로필에서 최고 점수를 받은 색상이 지정된 이미지의 색상 프로필을 정의합니다.

기본적으로 Palette 객체는 지정된 이미지의 16가지 기본 색상을 포함합니다. 팔레트를 생성할 때 Palette.Builder를 사용하여 색상 수를 맞춤설정할 수 있습니다. 더 많은 색상을 추출하면 각 색상 프로필에 더 많은 일치 항목이 제공되지만 Palette.Builder이 팔레트를 생성할 때 더 오래 걸릴 수도 있습니다.

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

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

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

그림 1은 사진과 get<Profile>Color() 메서드에서 가져온 상응하는 색상 프로필을 보여줍니다.

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

Palette 클래스는 각 색상 프로필의 Palette.Swatch 객체도 생성합니다. Palette.Swatch 객체에는 해당 프로필의 관련 색상과 픽셀 단위의 색상 수가 포함됩니다.

견본에는 HSL 값 및 픽셀 수와 같은 색상 프로필에 관한 자세한 정보에 액세스할 수 있는 추가 메서드가 있습니다. 견본을 사용하면 getBodyTextColor() 및 getTitleTextColor() 메서드로 더 포괄적인 색 구성표와 앱 테마를 만들 수 있습니다. 이러한 메서드는 견본 색상보다 사용하기에 적합한 색상을 반환합니다.

Palette의 각 get<Profile>Swatch() 메서드는 특정 프로필과 연결된 견본을 반환합니다. 여기서 <Profile>은 6가지 색상 프로필 중 하나의 이름으로 대체됩니다. 팔레트의 get<Profile>Swatch() 메서드는 기본 값 매개변수가 필요하지 않지만 이미지에 특정 프로필이 없는 경우 null를 반환합니다. 따라서 사용하기 전에 견본이 null이 아닌지 확인하세요. 예를 들어 다음 코드는 생생함 견본이 null이 아닌 경우 팔레트에서 제목 텍스트 색상을 가져옵니다.

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는 결과 이미지와 툴바를 보여줍니다.

// 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);
}