从 Android 中的图像中提取颜色配置文件

可以使用 AndroidX 的 Palette API 从 Android 上的图像中提取颜色配置文件；通常，颜色配置文件将用于基于图片生成颜色协调的小部件。例如，卡片可以包括根据图片的颜色配置文件着色的图像和标题文本。 Palette API 允许您获取以下颜色配置文件：

1. 轻的充满活力
2. 充满活力
3. 黑暗充满活力
4. 轻静音
5. 静音
6. 暗静音

了解核心

每个颜色配置文件都包含一个具有三种主要颜色的色板：

代码以了解更多代码

1. RGB ：色板的主要颜色。
2. titleTextColor ：用于出现在色板原色上方的“标题”文本的颜色。
3. bodyTextColor ：用于出现在色板原色上方的“正文”文本的颜色。

分步实施

该应用程序由一个按钮和一张图片组成。当您按下按钮时，图像会变为不同的图像。在下面找到六个不同的图像标题 这些图块的背景和文本颜色会随着图片的变化而变化，正如 Palette API 从图像中检索到的那样。

第 1 步：添加依赖项

dependencies {
    // AndroidX Pallete
    implementation 'androidx.palette:palette-ktx:1.0.0'
    // Picasso
    implementation 'com.squareup.picasso:picasso:2.7'
}

第 2 步：添加互联网权限，以便我们的应用程序可以使用互联网

    


...

第 3 步：设计布局

导航到app > res > layout > activity_main.xml并将以下代码添加到该文件中。下面是activity_main.xml文件的代码。

第 4 步：与 MainActivity.kt 文件

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

科特林

import android.graphics.Bitmap
import android.graphics.drawable.Drawable
import android.os.Bundle
import android.widget.Button
import android.widget.ImageView
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
import androidx.appcompat.widget.LinearLayoutCompat
import androidx.core.content.ContextCompat
import androidx.palette.graphics.Palette
import com.squareup.picasso.Picasso
      
class MainActivity : AppCompatActivity() {
    
        private lateinit var target: com.squareup.picasso.Target
        private lateinit var layoutLightVibrant: LinearLayoutCompat
        private lateinit var gfgVibrant: LinearLayoutCompat
        private lateinit var darkGfG: LinearLayoutCompat
        private lateinit var layoutLightMuted: LinearLayoutCompat
        private lateinit var gfgMuted: LinearLayoutCompat
        private lateinit var gfgMutedDark: LinearLayoutCompat
        private lateinit var gfgLightVibrant: TextView
        private lateinit var gfgText: TextView
        private lateinit var gfgTextVib: TextView
        private lateinit var gfgGfgTextMutedMore: TextView
        private lateinit var gfgTextMutedMore: TextView
        private lateinit var gfgTextMutedDark: TextView
      
        private val imageUrls = listOf(
            "http://placeimg.com/160/120/animals",
            "http://placeimg.com/160/120/arch",
            "http://placeimg.com/160/120/nature",
            "http://placeimg.com/160/120/people",
            "http://placeimg.com/160/120/tech",
            "http://placeimg.com/160/120/grayscale",
            "http://placeimg.com/160/120/sepia",
        )
      
        private var imageUrlIndex = 0
  
        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_main)
      
            setupLayout()
            setupImage()
      
  
            findViewById(R.id.button_change_image).setOnClickListener {
                imageUrlIndex++
                setupImage()
            }
        }
      
        // Initializes all widgets in the layout
        private fun setupLayout() {
            layoutLightVibrant = findViewById(R.id.layout_light_vibrant)
            gfgVibrant = findViewById(R.id.layout_vibrant)
            darkGfG = findViewById(R.id.layout_dark_vibrant)
            layoutLightMuted = findViewById(R.id.layout_light_muted)
            gfgMuted = findViewById(R.id.layout_muted)
            gfgMutedDark = findViewById(R.id.layout_dark_muted)
            gfgLightVibrant = findViewById(R.id.text_light_vibrant)
            gfgText = findViewById(R.id.text_vibrant)
            gfgTextVib = findViewById(R.id.text_dark_vibrant)
            gfgGfgTextMutedMore = findViewById(R.id.text_light_muted)
            gfgTextMutedMore = findViewById(R.id.text_muted)
            gfgTextMutedDark = findViewById(R.id.text_dark_muted)
        }
      
        // Fetch image from a URL, display them in 
          // an [ImageView], and extract its color profiles.
        private fun setupImage() {
            val url = imageUrls[imageUrlIndex % imageUrls.size]
            target = object : com.squareup.picasso.Target {
                override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
                    
                    // Set image to ImageView
                    findViewById(R.id.image_source).setImageBitmap(bitmap)
      
                    // Extract color profiles
                    bitmap?.let {
                        val palette = Palette.from(it).generate()
      
                        // Light Vibrant
                        setupColorProfile(
                            palette.lightVibrantSwatch,
                            layoutLightVibrant,
                            gfgLightVibrant,
                        )
                        // Vibrant
                        setupColorProfile(
                            palette.vibrantSwatch,
                            gfgVibrant,
                            gfgText,
                        )
                        // Dark Vibrant
                        setupColorProfile(
                            palette.darkVibrantSwatch,
                            darkGfG,
                            gfgTextVib,
                        )
                        // Light Muted
                        setupColorProfile(
                            palette.lightMutedSwatch,
                            layoutLightMuted,
                            gfgGfgTextMutedMore,
                        )
                        // Muted
                        setupColorProfile(
                            palette.mutedSwatch,
                            gfgMuted,
                            gfgTextMutedMore,
                        )
                        // Dark Muted
                        setupColorProfile(
                            palette.darkMutedSwatch,
                            gfgMutedDark,
                            gfgTextMutedDark,
                        )
                    }
                }
      
                override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
                    findViewById(R.id.image_source).setImageResource(R.color.purple_200)
                }
  
                override fun onBitmapFailed(e: Exception?, errorDrawable: Drawable?) {
                }
            }
            Picasso.get()
                .load(url)
                .into(target)
        }
      
        // Set colors of a color profile.
        private fun setupColorProfile(
            swatch: Palette.Swatch?,
            layoutCompat: LinearLayoutCompat,
            textView: TextView,
        ) {
            layoutCompat.setBackgroundColor(swatch?.rgb ?: ContextCompat.getColor(this, R.color.white))
            textView.setTextColor(swatch?.titleTextColor ?: ContextCompat.getColor(this, R.color.black))
        }
    }

输出：

想要一个更快节奏和更具竞争力的环境来学习 Android 的基础知识吗？

单击此处前往由我们的专家精心策划的指南，旨在让您立即做好行业准备！