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

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

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

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

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

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

สร้างอินสแตนซ์ชุดสี

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

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

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

ปรับแต่งจานสี

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

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

addFilter()

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

maximumColorCount()

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

setRegion()

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

addTarget()

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

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

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

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

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

• สว่างเล็กน้อย
• ฉูดฉาด
• สีเข้ม
• หม่นเล็กน้อย
• ปิดเสียง
• หม่นแบบมืด

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

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

วันที่

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

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

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

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

วันที่