Android中使用Palette让你的页面UI优雅起来

文章目录

1. 什么是Palette

Palette 翻译过来是调色板的意思，在android开发中，它的作用是自动分析一张图片中的色调，并且提取出合适的颜色，来帮我们进行动态配色。

所谓的动态配色，是说根据页面中不同图片的色调，自动为其他部分的View设置背景色，以达到视觉上的协调，美观。

比如，根据页面中图片的色调，改变ToolBar的背景色，状态栏的颜色；根据卡片图片的色调，改变图片上文字的背景色等场景。

2. 引入Palette

在 moudle级别的 build.gradle 中添加 palette 的依赖

// java 工程
implementation 'androidx.palette:palette:1.0.0'// kotlin 工程
implementation 'androidx.palette:palette-ktx:1.0.0'

3. 使用 Palette

首先是获取 palette 对象。根据Bitmap，我们可以得到 palette 对象，又两种获取方式：同步和异步。

3.1 同步方式

这里以 kotlin 语言举例：

val bitmap = BitmapFactory.decodeResource(resources, R.drawable.test1)val paletteBuilder = Palette.from(bitmap)val palette = paletteBuilder.generate()

3.2 异步方式

val bitmap = BitmapFactory.decodeResource(resources, R.drawable.test1)val paletteBuilder = Palette.from(bitmap)
paletteBuilder.generate(object: PaletteAsyncListener {overridefunonGenerated(palette: Palette?){// 得到了 palette}})

3.3 获取色调值

获取了 Palette 对象后，就可以调用它的各种方法，获取各种我们需要的色调值了。

Palette.from(it).generate(object: PaletteAsyncListener{overridefunonGenerated(palette: Palette?){
          palette ?:return// 获取到柔和的深色的颜色, Color.GREEN是获取不到时的默认颜色val darkMutedColor = palette.getDarkMutedColor(Color.GREEN)// 获取到柔和的明亮的颜色val lightMutedColor = palette.getLightMutedColor(Color.GREEN)// 获取到活跃的深色的颜色val darkVibrantColor = palette.getDarkVibrantColor(Color.GREEN)// 获取到活跃的明亮的颜色val lightVibrantColor = palette.getLightVibrantColor(Color.GREEN)// 获取图片中一个最柔和的颜色val mutedColor = palette.getMutedColor(Color.GREEN)// 获取图片中最活跃的颜色，也可以说整个图片出现最多的颜色val vibrantColor = palette.getVibrantColor(Color.GREEN)// 获取某种特性颜色的样品val lightVibrantSwatch = palette.vibrantSwatch
          // 谷歌推荐的：图片的整体的颜色rgb的混合值---主色调val rgb = lightVibrantSwatch?.rgb
          // 谷歌推荐：图片中间的文字颜色val bodyTextColor = lightVibrantSwatch?.bodyTextColor
          // 谷歌推荐：作为标题的颜色（有一定的和图片的对比度的颜色值）val titleTextColor = lightVibrantSwatch?.titleTextColor
          // 颜色向量val hsl = lightVibrantSwatch?.hsl
          // 分析该颜色在图片中所占的像素多少值val population = lightVibrantSwatch?.population
      }})

4. 举例

用 palette 做一个优雅的卡片列表。

4.1 布局文件 activity_palette_list.xml ⬇️

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".palette.PaletteListActivity"><androidx.recyclerview.widget.RecyclerViewandroid:id="@+id/rcv_palette"android:layout_width="match_parent"android:layout_height="match_parent"/></androidx.constraintlayout.widget.ConstraintLayout>

4.2 Activity：PaletteListActivity⬇️

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.recyclerview.widget.GridLayoutManager
import com.example.mytest.R
import com.example.mytest.databinding.ActivityPaletteListBinding

class PaletteListActivity :AppCompatActivity(){overridefunonCreate(savedInstanceState: Bundle?){super.onCreate(savedInstanceState)val binding = ActivityPaletteListBinding.inflate(layoutInflater)setContentView(binding.root)val dataList = mutableListOf<PaletteBean>(PaletteBean(R.drawable.test1,"标题1"),PaletteBean(R.drawable.test2,"hello2"),PaletteBean(R.drawable.test3,"hello3"),PaletteBean(R.drawable.test4,"hello4"),PaletteBean(R.drawable.test1,"标题1"),PaletteBean(R.drawable.test2,"hello2"),PaletteBean(R.drawable.test3,"hello3"),PaletteBean(R.drawable.test4,"hello4"),PaletteBean(R.drawable.test1,"标题1"),PaletteBean(R.drawable.test2,"hello2"),PaletteBean(R.drawable.test3,"hello3"),PaletteBean(R.drawable.test4,"hello4"),)
        binding.rcvPalette.apply{
            adapter =PaletteListAdapter(dataList)
            layoutManager =GridLayoutManager(this@PaletteListActivity,2)}}}

4.3 列表Adapter：PaletteListAdapter ⬇️

import android.graphics.Color
import android.view.LayoutInflater
import android.view.ViewGroup
import androidx.core.graphics.drawable.toBitmapOrNull
import androidx.palette.graphics.Palette
import androidx.recyclerview.widget.RecyclerView
import com.example.mytest.databinding.ListItemPaletteBinding
import kotlin.math.roundToInt

classPaletteListAdapter(privateval dataList: MutableList<PaletteBean>=mutableListOf()):
    RecyclerView.Adapter<PaletteListAdapter.MyViewHolder>(){funupdate(lDataList: List<PaletteBean>){
        dataList.clear()
        dataList.addAll(lDataList)notifyDataSetChanged()}classMyViewHolder(val binding: ListItemPaletteBinding):
        RecyclerView.ViewHolder(binding.root){funbind(data: PaletteBean?){data?:return
            binding.ivCover.setImageResource(data.imgId)
            binding.tvContent.text =data.title

            val bitmap = binding.ivCover.drawable.toBitmapOrNull()
            bitmap?.let{
                Palette.from(it).generate{ palette ->val titleColor = palette?.vibrantSwatch?.titleTextColor
                    val bg =getTranslucentColor(0.5f, palette?.vibrantSwatch?.rgb!!)
                    binding.tvContent.setTextColor(titleColor!!)
                    binding.tvContent.setBackgroundColor(bg)}}}/**
         * 获取指定透明度的颜色值
         */privatefungetTranslucentColor(percent: Float, rgb: Int): Int {val blue = Color.blue(rgb)val green = Color.green(rgb)val red = Color.red(rgb)var alpha = Color.alpha(rgb)
            alpha =(alpha * percent).roundToInt()return Color.argb(alpha, red, green, blue)}}overridefunonCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {val binding =
            ListItemPaletteBinding.inflate(LayoutInflater.from(parent.context), parent,false)returnMyViewHolder(binding)}overridefungetItemCount(): Int {return dataList?.size ?:0}overridefunonBindViewHolder(holder: MyViewHolder, position: Int){
        holder.bind(dataList?.get(position))}}

4.4 列表item布局：list_item_palette.xml ⬇️

<?xml version="1.0" encoding="utf-8"?><androidx.cardview.widget.CardViewxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:layout_width="match_parent"android:layout_height="150dp"app:cardCornerRadius="4dp"app:cardElevation="1dp"app:cardPreventCornerOverlap="false"app:cardUseCompatPadding="true"><androidx.constraintlayout.widget.ConstraintLayoutandroid:layout_width="match_parent"android:layout_height="150dp"><ImageViewandroid:id="@+id/iv_cover"android:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@drawable/test1"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintStart_toStartOf="parent"app:layout_constraintTop_toTopOf="parent"/><TextViewandroid:id="@+id/tv_content"android:layout_width="match_parent"android:layout_height="50dp"android:gravity="center"android:text="你好啊"app:layout_constraintBottom_toBottomOf="parent"app:layout_constraintEnd_toEndOf="parent"app:layout_constraintStart_toStartOf="parent"/></androidx.constraintlayout.widget.ConstraintLayout></androidx.cardview.widget.CardView>

4.5 效果

怎么样？这样卡片底部的蒙层就合图片的主色调一致，文字颜色也是相对和谐的，整体看起来就优雅多了吧。

如果这篇文章对你有用的话，欢迎支持哦～感谢！