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

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

คุณสามารถใช้ไลบรารีชุดสีเพื่อออกแบบธีมเค้าโครงและใช้สีที่กำหนดเองกับองค์ประกอบภาพในแอป เช่น คุณสามารถใช้จานสีเพื่อสร้างการ์ดชื่อที่ประสานงานกันของเพลงตามปกอัลบั้ม หรือปรับสีแถบเครื่องมือของแอปเมื่อภาพพื้นหลังมีการเปลี่ยนแปลง ออบเจ็กต์ 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

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

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

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

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.
    }
}

Java

// 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 ทำงานช้า อย่าสร้างพาเล็ตในชุดข้อความหลัก

ปรับแต่งชุดสี

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

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

addFilter()

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

maximumColorCount()

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

setRegion()

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

addTarget()

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

ดึงข้อมูลโปรไฟล์สี

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

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

ไลบรารีจานสีจะพยายามดึงข้อมูลโปรไฟล์สี 6 รายการต่อไปนี้

• แสงสด
• ฉูดฉาด
• สดใสแบบเข้ม
• ปิดเสียงเบา
• ปิดเสียง
• ปิดเสียงแบบมืด

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

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

รูปที่ 1 รูปภาพตัวอย่างและโปรไฟล์สีที่ดึงออกมาซึ่งมีจำนวนสีสูงสุดเริ่มต้น (16) สำหรับชุดสี

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

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

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

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

Kotlin

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

Java

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

Java

// 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 ตัวอย่างรูปภาพที่มีแถบเครื่องมือสีสันสดใสและสีข้อความชื่อที่เกี่ยวข้อง