文章目录
- 1. 什么是Palette
- 2. 引入Palette
- 3. 使用 Palette
- 3.1 同步方式
- 3.2 异步方式
- 3.3 获取色调值
- 4. 举例
- 4.1 布局文件 activity_palette_list.xml ⬇️
- 4.2 Activity：PaletteListActivity⬇️
- 4.3 列表Adapter：PaletteListAdapter ⬇️
- 4.4 列表item布局：list_item_palette.xml ⬇️
- 4.5 效果
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，我们可以
3.1 同步方式
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 {
override fun onGenerated(palette: Palette?) {
// 得到了 palette
}
})
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.test);
// 同步
Palette.Builder builder = Palette.from(bitmap);
Palette palette=builder.generate();
// 异步
builder.generate(bitmap, new Palette.PaletteAsyncListener() {
@Override
public void onGenerated(Palette palette) {
}
}
3.3 获取色调值
获取了 Palette 对象后，就可以调用它的各种方法，获取各种我们需要的色调值了。
Palette.from(it).generate(object : PaletteAsyncListener{
override fun onGenerated(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.ConstraintLayout xmlns: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.RecyclerView
android: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() {
override fun onCreate(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
class PaletteListAdapter(private val dataList: MutableList<PaletteBean> = mutableListOf()) :
RecyclerView.Adapter<PaletteListAdapter.MyViewHolder>() {
fun update(lDataList: List<PaletteBean>) {
dataList.clear()
dataList.addAll(lDataList)
notifyDataSetChanged()
}
class MyViewHolder(val binding: ListItemPaletteBinding) :
RecyclerView.ViewHolder(binding.root) {
fun bind(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)
}
}
}
/**
* 获取指定透明度的颜色值
*/
private fun getTranslucentColor(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)
}
}
override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): MyViewHolder {
val binding =
ListItemPaletteBinding.inflate(LayoutInflater.from(parent.context), parent, false)
return MyViewHolder(binding)
}
override fun getItemCount(): Int {
return dataList?.size ?: 0
}
override fun onBindViewHolder(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.CardView xmlns: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.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="150dp">
<ImageView
android: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" />
<TextView
android: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 效果
怎么样？这样卡片底部的蒙层就合图片的主色调一致，文字颜色也是相对和谐的，整体看起来就优雅多了吧。
如果这篇文章对你有用的话，欢迎支持哦～感谢！
