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

文章目录

- 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() {@Overridepublic 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.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.ActivityPaletteListBindingclass 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.roundToIntclass 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 ?: returnbinding.ivCover.setImageResource(data.imgId)binding.tvContent.text = data.titleval bitmap = binding.ivCover.drawable.toBitmapOrNull()bitmap?.let {Palette.from(it).generate { palette ->val titleColor = palette?.vibrantSwatch?.titleTextColorval 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.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>