เลือกสีด้วย Palette API

การออกแบบภาพที่ดีเป็นสิ่งสำคัญสำหรับแอปที่ประสบความสำเร็จ และรูปแบบสีก็เป็นองค์ประกอบหลักของการออกแบบ ไลบรารี Palette เป็นไลบรารี Jetpack ที่ดึงสีเด่นๆ จากรูปภาพเพื่อสร้างแอปที่ดึงดูดสายตา

คุณสามารถใช้ไลบรารี Palette เพื่อออกแบบธีมเลย์เอาต์ และใช้สีแบบกำหนดเองกับองค์ประกอบภาพ ในแอปได้ เช่น คุณสามารถใช้ Palette เพื่อสร้างการ์ดไตเติ้ลเพลงที่มีสีเข้ากัน โดยอิงตามปกอัลบั้ม หรือปรับสีแถบเครื่องมือของแอป เมื่อภาพพื้นหลังเปลี่ยนไป ออบเจ็กต์ Palette ช่วยให้คุณเข้าถึงสีในรูปภาพ Bitmap พร้อมทั้งมีโปรไฟล์สีหลัก 6 รายการจากบิตแมปเพื่อช่วยในการตัดสินใจเลือกการออกแบบ

ตั้งค่าไลบรารี

หากต้องการใช้ไลบรารี Palette ให้เพิ่มโค้ดต่อไปนี้ลงใน build.gradle

android {
    compileSdkVersion(36)
    ...
}

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

android {
    compileSdkVersion 36
    ...
}

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

สร้าง Palette

ออบเจ็กต์ Palette ช่วยให้คุณเข้าถึงสีหลักในรูปภาพ รวมถึงสีที่เกี่ยวข้องสำหรับข้อความที่ซ้อนทับ ใช้ Palette เพื่อออกแบบสไตล์ของแอปและเปลี่ยนรูปแบบสีของแอปแบบไดนามิกโดยอิงตามรูปภาพต้นฉบับที่กำหนด

หากต้องการสร้าง Palette ให้สร้างอินสแตนซ์ Palette.Builder จาก Bitmap ก่อน จากนั้นคุณสามารถใช้ Palette.Builder เพื่อปรับแต่ง Palette ก่อนที่จะสร้าง ส่วนนี้จะอธิบายการสร้างและการปรับแต่ง Palette จากรูปภาพบิตแมป

สร้างอินสแตนซ์ Palette

สร้างอินสแตนซ์ Palette โดยใช้วิธี from(Bitmap bitmap) เพื่อสร้าง Palette.Builder จาก Bitmap ก่อน

เครื่องมือสร้างสามารถสร้าง Palette แบบซิงโครนัสหรืออะซิงโครนัสก็ได้ ใช้การสร้าง Palette แบบซิงโครนัสหากต้องการสร้าง Palette ในเธรดเดียวกับเมธอดที่เรียก หากสร้าง Palette แบบอะซิงโครนัสในเธรดอื่น ให้ใช้วิธี onGenerated() เพื่อเข้าถึง Palette ทันทีหลังจากสร้าง

ข้อมูลโค้ดต่อไปนี้แสดงตัวอย่างเมธอดสำหรับการสร้าง Palette ทั้ง 2 ประเภท

// 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 อย่างต่อเนื่องสำหรับรายการรูปภาพหรือ ออบเจ็กต์ที่จัดเรียงแล้ว ให้พิจารณา แคชอินสแตนซ์ Paletteเพื่อป้องกันไม่ให้ UI ทำงานช้า อย่าสร้าง Palette ใน เธรดหลัก

ปรับแต่ง Palette

Palette.Builder ช่วยให้คุณปรับแต่ง Palette ได้โดยเลือกจำนวนสีใน Palette ที่ได้ พื้นที่ของรูปภาพที่เครื่องมือสร้างใช้เพื่อสร้าง Palette และสีที่จะรวมไว้ใน Palette เช่น คุณสามารถกรองสีดำออกหรือตรวจสอบว่าเครื่องมือสร้างใช้เฉพาะครึ่งบนของรูปภาพเพื่อสร้าง Palette

ปรับขนาดและสีของ Palette อย่างละเอียดด้วยเมธอดต่อไปนี้จากคลาส Palette.Builder

addFilter()

เมธอดนี้จะเพิ่มตัวกรองที่ระบุสีที่อนุญาตใน Palette ที่ได้ ส่ง ของคุณเอง Palette.Filter และแก้ไขเมธอด isAllowed() เพื่อกำหนดสีที่จะ กรองออกจาก Palette

maximumColorCount()

เมธอดนี้จะกำหนดจำนวนสีสูงสุดใน Palette ค่าเริ่มต้น คือ 16 และค่าที่เหมาะสมจะขึ้นอยู่กับรูปภาพต้นฉบับ สำหรับ ภาพทิวทัศน์ ค่าที่เหมาะสมจะอยู่ในช่วง 8-16 ส่วนรูปภาพที่มีใบหน้ามักจะ มีค่า 24-32 Palette.Builder จะใช้เวลานานขึ้นในการ สร้าง Palette ที่มีสีมากขึ้น

setRegion()

เมธอดนี้จะระบุพื้นที่ของบิตแมปที่เครื่องมือสร้างใช้เมื่อ สร้าง Palette คุณจะใช้วิธีนี้ได้ก็ต่อเมื่อสร้าง Palette จากบิตแมปเท่านั้น และวิธีนี้จะไม่ส่งผลต่อรูปภาพต้นฉบับ

addTarget()

เมธอดนี้ช่วยให้คุณจับคู่สีได้เองโดยการเพิ่มโปรไฟล์สี Target ลงในเครื่องมือสร้าง หาก Target เริ่มต้นไม่เพียงพอ นักพัฒนาแอปขั้นสูงสามารถสร้าง Target ของตนเองได้โดยใช้ Target.Builder

แยกโปรไฟล์สี

ไลบรารี Palette จะแยกโปรไฟล์สีที่ใช้กันโดยทั่วไปจากรูปภาพโดยอิงตาม มาตรฐานของดีไซน์ Material แต่ละโปรไฟล์กำหนดโดย Target และระบบจะให้คะแนนสีที่แยกจากรูปภาพบิตแมปเทียบกับแต่ละโปรไฟล์โดยอิงตามความอิ่มตัว ความสว่าง และจำนวนพิกเซลในบิตแมปที่สีนั้นแสดง สำหรับแต่ละโปรไฟล์ สีที่มีคะแนนดีที่สุดจะกำหนดโปรไฟล์สีนั้นสำหรับรูปภาพที่กำหนด

โดยค่าเริ่มต้น ออบเจ็กต์ Palette จะมีสีหลัก 16 สีจากรูปภาพที่กำหนด เมื่อสร้าง Palette คุณสามารถ ปรับแต่งจำนวนสีได้โดยใช้ Palette.Builder การแยกสีเพิ่มเติมจะช่วยให้มีสีที่ตรงกันมากขึ้นสำหรับแต่ละโปรไฟล์สี แต่จะทำให้ Palette.Builder ใช้เวลานานขึ้นเมื่อสร้าง Palette

ไลบรารี Palette จะพยายามแยกโปรไฟล์สี 6 รายการต่อไปนี้

• สดใสอ่อน
• ฉูดฉาด
• สดใสเข้ม
• ทึมอ่อน
• ทึม
• ทึมเข้ม

เมธอด get<Profile>Color() แต่ละเมธอดใน Palette จะแสดงสีใน Palette ที่เชื่อมโยงกับโปรไฟล์นั้นๆ โดย <Profile> จะถูกแทนที่ด้วย ชื่อของโปรไฟล์สี 1 ใน 6 รายการ เช่น เมธอดสำหรับรับโปรไฟล์สีสดใสเข้มคือ getDarkVibrantColor() เนื่องจากรูปภาพบางรูปอาจไม่มีโปรไฟล์สีทั้งหมด ให้ระบุสีเริ่มต้นที่จะแสดง

รูปที่ 1 แสดงรูปภาพและโปรไฟล์สีที่เกี่ยวข้องจากเมธอด get<Profile>Color()

ใช้ตัวอย่างสีเพื่อสร้างรูปแบบสี

คลาส Palette ยังสร้าง Palette.Swatch ออบเจ็กต์สำหรับแต่ละโปรไฟล์สีด้วย ออบเจ็กต์ Palette.Swatch จะมีสีที่เชื่อมโยงสำหรับโปรไฟล์นั้นๆ รวมถึงจำนวนพิกเซลของสี

ตัวอย่างสีมีเมธอดเพิ่มเติมสำหรับเข้าถึงข้อมูลเพิ่มเติมเกี่ยวกับโปรไฟล์สี เช่น ค่า HSL และจำนวนพิกเซล คุณสามารถใช้ตัวอย่างสีเพื่อช่วยสร้างรูปแบบสีและธีมของแอปที่ครอบคลุมมากขึ้นโดยใช้เมธอด getBodyTextColor() และ getTitleTextColor() เมธอดเหล่านี้จะแสดงสีที่เหมาะสำหรับใช้กับสีของตัวอย่างสี

เมธอด get<Profile>Swatch() แต่ละเมธอดจาก Palette จะแสดงตัวอย่างสีที่เชื่อมโยงกับโปรไฟล์นั้นๆ โดย <Profile> จะถูกแทนที่ด้วยชื่อของโปรไฟล์สี 1 ใน 6 รายการ แม้ว่าเมธอด get<Profile>Swatch() ของ Palette จะไม่จำเป็นต้องใช้พารามิเตอร์ค่าเริ่มต้น แต่จะแสดง 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();
    // ...
}

หากต้องการเข้าถึงสีทั้งหมดใน Palette เมธอด getSwatches() จะแสดงรายการตัวอย่างสีทั้งหมดที่สร้างจากรูปภาพ รวมถึงโปรไฟล์สีมาตรฐาน 6 รายการ

ข้อมูลโค้ดต่อไปนี้ใช้วิธีจากข้อมูลโค้ดก่อนหน้าเพื่อสร้าง Palette แบบซิงโครนัส รับตัวอย่างสีสดใส และเปลี่ยนสีของแถบเครื่องมือให้ตรงกับรูปภาพบิตแมป รูปที่ 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);
}