การออกแบบภาพที่ดีเป็นสิ่งสำคัญสำหรับแอปที่ประสบความสำเร็จ และรูปแบบสีเป็น เป็นส่วนประกอบหลักของการออกแบบ ไลบรารีชุดสีคือ Jetpack ไลบรารีที่แยกสีที่โดดเด่นออกจากรูปภาพเพื่อสร้างดึงดูดสายตา แอป
คุณสามารถใช้ไลบรารีชุดสีเพื่อออกแบบเลย์เอาต์ได้
ธีมและใช้สีที่กำหนดเองกับ
องค์ประกอบที่มองเห็นได้ในแอป ตัวอย่างเช่น คุณสามารถใช้จานสีเพื่อสร้าง
การ์ดไตเติ้ลแบบเข้ากันกับสีของเพลงตามปกอัลบั้ม หรือเพื่อปรับ
สีแถบเครื่องมือของแอปเมื่อภาพพื้นหลังมีการเปลี่ยนแปลง
Palette
ให้คุณสามารถเข้าถึงสีใน
รูปภาพ Bitmap
รูป
พร้อมทั้งระบุโปรไฟล์สีหลัก 6 โปรไฟล์จากบิตแมป
ตัวเลือกการออกแบบ
ตั้งค่าไลบรารี
หากต้องการใช้ไลบรารีชุดสี ให้เพิ่มรายการต่อไปนี้ลงใน
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
โดยใช้
วันที่ 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
แยกโปรไฟล์สี
อิงตาม
มาตรฐานของวัสดุ
การออกแบบ ไลบรารีของชุดสีจะดึงข้อมูลโปรไฟล์สีที่ใช้กันโดยทั่วไปจาก
รูปภาพ แต่ละโปรไฟล์จะกำหนดโดย Target
และดึงสีมา
จากภาพบิตแมป จะถูกให้คะแนนกับแต่ละโปรไฟล์ตามความอิ่มตัว
ความสว่าง และจำนวนประชากร (จำนวนพิกเซลในบิตแมปที่แสดงโดย
สี) สำหรับแต่ละโปรไฟล์ สีที่มีคะแนนดีที่สุดจะเป็นตัวกำหนดสีนั้น
ของรูปภาพที่ระบุ
โดยค่าเริ่มต้น ออบเจ็กต์ Palette
จะมีสีหลัก 16 สีจาก
รูปภาพที่ระบุ เมื่อสร้างจานสี คุณสามารถ
ปรับแต่งจำนวนสีโดยใช้
Palette.Builder
การแตกสีมากขึ้นจะเพิ่มศักยภาพ
ตรงกับโปรไฟล์สีแต่ละรายการ แต่กลับทำให้Palette.Builder
ใช้เวลานานขึ้นเมื่อสร้างชุดสี
ไลบรารีชุดสีจะพยายามแยกโปรไฟล์สี 6 สีต่อไปนี้
- สว่างเล็กน้อย
- ฉูดฉาด
- สีเข้ม
- หม่นเล็กน้อย
- ปิดเสียง
- หม่นแบบมืด
แต่ละเมธอดของ get<Profile>Color()
ใน
Palette
แสดงผลสีในจานสีที่เชื่อมโยงกับค่านั้น
โปรไฟล์หนึ่ง ซึ่ง <Profile>
จะถูกแทนที่ด้วย
ชื่อของโปรไฟล์สี 1 ใน 6 โปรไฟล์ ตัวอย่างเช่น เมธอดในการรับแอตทริบิวต์
โปรไฟล์สีสีเข้มคือ
getDarkVibrantColor()
เนื่องจากบางภาพไม่ได้มีโปรไฟล์สีทั้งหมด โปรดเลือกสีเริ่มต้นเป็น
ผลตอบแทน
รูปที่ 1 แสดงรูปภาพและโปรไฟล์สีที่เกี่ยวข้องจาก
get<Profile>Color()
วิธี
![รูปภาพแสดงพระอาทิตย์ตกทางด้านซ้ายและชุดสีที่ดึงมาทางด้านขวา](https://developer.android.com/static/training/material/images/palette-library-color-profiles_2-1_2x.png?authuser=5&hl=th)
ใช้ตัวอย่างสีเพื่อสร้างรูปแบบสี
คลาส Palette
ยังสร้าง
วันที่ Palette.Swatch
สำหรับโปรไฟล์สีแต่ละสี Palette.Swatch
ออบเจ็กต์มี
สีที่เกี่ยวข้องของโปรไฟล์ดังกล่าว ตลอดจนจำนวนประชากรของสีใน
พิกเซล
ตัวอย่างมีวิธีการเพิ่มเติมในการเข้าถึงข้อมูลเพิ่มเติมเกี่ยวกับ
โปรไฟล์สี เช่น ค่า HSL และประชากรพิกเซล คุณสามารถใช้ตัวอย่างสีเพื่อ
ช่วยสร้างรูปแบบสีและธีมแอปที่ครอบคลุมมากขึ้นโดยใช้
getBodyTextColor()
และ
วันที่ getTitleTextColor()
วิธีการเหล่านี้จะแสดงสีที่เหมาะสำหรับการใช้บนตัวอย่างแผ่น
สี
แต่ละเมธอด get<Profile>Swatch()
จาก
Palette
จะแสดงตัวอย่างสีที่เชื่อมโยงกับโปรไฟล์นั้น
โดยแทนที่ <Profile>
ด้วยชื่อของหนึ่งใน
โปรไฟล์สีทั้ง 6 สี แม้ว่าจานสี
get<Profile>Swatch()
วิธีไม่ต้องใช้ค่าเริ่มต้น
ระบบจะแสดงผล 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); }
![รูปภาพแสดงพระอาทิตย์ตกและแถบเครื่องมือที่มี TitleTextColor อยู่ด้านใน](https://developer.android.com/static/training/material/images/palette-library-title-text-color_2-1_2x.png?authuser=5&hl=th)