การออกแบบภาพที่ดีเป็นสิ่งสำคัญสำหรับแอปที่ประสบความสำเร็จ และรูปแบบสีเป็นองค์ประกอบหลักของการออกแบบ คลังชุดสีคือคลัง Jetpack ที่ดึงสีที่โดดเด่นจากรูปภาพเพื่อสร้างแอปที่ดึงดูดสายตา
คุณสามารถใช้คลังจานสีเพื่อออกแบบธีมเลย์เอาต์และใช้สีที่กำหนดเองกับองค์ประกอบภาพในแอปได้ เช่น คุณสามารถใช้จานสีเพื่อสร้างการ์ดชื่อเพลงที่ประสานสีกันโดยอิงจากปกอัลบั้ม หรือเพื่อปรับสีแถบเครื่องมือของแอปเมื่อภาพพื้นหลังมีการเปลี่ยนแปลง ออบเจ็กต์ Palette
จะช่วยให้คุณเข้าถึงสีในรูปภาพ Bitmap
ได้ ทั้งยังให้โปรไฟล์สีหลัก 6 รายการจากบิตแมปเพื่อใช้เป็นข้อมูลในการเลือกการออกแบบ
ตั้งค่าคลัง
หากต้องการใช้คลัง Palette ให้เพิ่มรายการต่อไปนี้ลงใน
build.gradle
Kotlin
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
สร้างอินสแตนซ์ 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 แต่ละโปรไฟล์จะกำหนดโดย 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>
จะถูกแทนที่ด้วยชื่อของโปรไฟล์สี 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); }