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

2024-05-16 07:36
文章标签 android 使用 ui 优雅 页面 起来 palette

本文主要是介绍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>

4.5 效果

请添加图片描述

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

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

这篇关于Android中使用Palette让你的页面UI优雅起来的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/994278。

相关文章

使用Python实现IP地址和端口状态检测与监控

使用Python实现IP地址和端口状态检测与监控

《使用Python实现IP地址和端口状态检测与监控》在网络运维和服务器管理中,IP地址和端口的可用性监控是保障业务连续性的基础需求,本文将带你用Python从零打造一个高可用IP监控系统,感兴趣的小伙... 目录概述：为什么需要IP监控系统使用步骤说明1. 环境准备2. 系统部署3. 核心功能配置系统效果展
阅读更多...
使用Java将各种数据写入Excel表格的操作示例

使用Java将各种数据写入Excel表格的操作示例

《使用Java将各种数据写入Excel表格的操作示例》在数据处理与管理领域,Excel凭借其强大的功能和广泛的应用,成为了数据存储与展示的重要工具,在Java开发过程中,常常需要将不同类型的数据,本文... 目录前言安装免费Java库1. 写入文本、或数值到 Excel单元格2. 写入数组到 Excel表格
阅读更多...
redis中使用lua脚本的原理与基本使用详解

redis中使用lua脚本的原理与基本使用详解

《redis中使用lua脚本的原理与基本使用详解》在Redis中使用Lua脚本可以实现原子性操作、减少网络开销以及提高执行效率,下面小编就来和大家详细介绍一下在redis中使用lua脚本的原理... 目录Redis 执行 Lua 脚本的原理基本使用方法使用EVAL命令执行 Lua 脚本使用EVALSHA命令
阅读更多...
Java并发编程之如何优雅关闭钩子Shutdown Hook

Java并发编程之如何优雅关闭钩子Shutdown Hook

《Java并发编程之如何优雅关闭钩子ShutdownHook》这篇文章主要为大家详细介绍了Java如何实现优雅关闭钩子ShutdownHook,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起... 目录关闭钩子简介关闭钩子应用场景数据库连接实战演示使用关闭钩子的注意事项开源框架中的关闭钩子机制1.
阅读更多...
Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

《Java中的@SneakyThrows注解使用方法(简化异常处理的利与弊)》为了简化异常处理,Lombok提供了一个强大的注解@SneakyThrows,本文将详细介绍@SneakyThro... 目录1. @SneakyThrows 简介 1.1 什么是 Lombok？2. @SneakyThrows
阅读更多...
使用Python和Pyecharts创建交互式地图

使用Python和Pyecharts创建交互式地图

《使用Python和Pyecharts创建交互式地图》在数据可视化领域,创建交互式地图是一种强大的方式,可以使受众能够以引人入胜且信息丰富的方式探索地理数据,下面我们看看如何使用Python和Pyec... 目录简介Pyecharts 简介创建上海地图代码说明运行结果总结简介在数据可视化领域，创建交互式地
阅读更多...
Java Stream流使用案例深入详解

Java Stream流使用案例深入详解

《JavaStream流使用案例深入详解》：本文主要介绍JavaStream流使用案例详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录前言1. Lambda1.1 语法1.2 没参数只有一条语句或者多条语句1.3 一个参数只有一条语句或者多
阅读更多...
Java Spring 中 @PostConstruct 注解使用原理及常见场景

Java Spring 中 @PostConstruct 注解使用原理及常见场景

《JavaSpring中@PostConstruct注解使用原理及常见场景》在JavaSpring中,@PostConstruct注解是一个非常实用的功能,它允许开发者在Spring容器完全初... 目录一、@PostConstruct 注解概述二、@PostConstruct 注解的基本使用2.1 基本代
阅读更多...
C#使用StackExchange.Redis实现分布式锁的两种方式介绍

C#使用StackExchange.Redis实现分布式锁的两种方式介绍

《C#使用StackExchange.Redis实现分布式锁的两种方式介绍》分布式锁在集群的架构中发挥着重要的作用,：本文主要介绍C#使用StackExchange.Redis实现分布式锁的... 目录自定义分布式锁获取锁释放锁自动续期StackExchange.Redis分布式锁获取锁释放锁自动续期分布式
阅读更多...
springboot使用Scheduling实现动态增删启停定时任务教程

springboot使用Scheduling实现动态增删启停定时任务教程

《springboot使用Scheduling实现动态增删启停定时任务教程》：本文主要介绍springboot使用Scheduling实现动态增删启停定时任务教程,具有很好的参考价值,希望对大家有... 目录1、配置定时任务需要的线程池2、创建ScheduledFuture的包装类3、注册定时任务，增加、删
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2