Android Material Design 之 Palette
来源:互联网 发布:visual studio php 编辑:程序博客网 时间:2024/05/21 10:33
简介
Palette 即调色板。从图片中提取颜色,然后赋给相应的视图,使界面看起来更加协调好看。
简单使用
首先添加相应的依赖
implementation 'com.android.support:palette-v7:26.0.0'
Android Studio 3.0 开始新建项目默认使用 implementation 了,当然 compile 也能用。
我们给 Layout 文件添加一个 ImageView 和 6 个 View。ImageView 是用来放图片来提取颜色的,提取的颜色分别放到准备的 6 个 View 中。
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:background="@color/colorPrimary" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" tools:context="com.teletian.palette.MainActivity"> <ImageView android:id="@+id/image" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/naruto" /> <View android:id="@+id/color1" android:layout_width="match_parent" android:layout_height="10dp" android:layout_marginTop="5dp" /> <View android:id="@+id/color2" android:layout_width="match_parent" android:layout_height="10dp" android:layout_marginTop="5dp" /> <View android:id="@+id/color3" android:layout_width="match_parent" android:layout_height="10dp" android:layout_marginTop="5dp" /> <View android:id="@+id/color4" android:layout_width="match_parent" android:layout_height="10dp" android:layout_marginTop="5dp" /> <View android:id="@+id/color5" android:layout_width="match_parent" android:layout_height="10dp" android:layout_marginTop="5dp" /> <View android:id="@+id/color6" android:layout_width="match_parent" android:layout_height="10dp" android:layout_marginTop="5dp" /></LinearLayout>
接下来就是在 Activity 中提取,先上代码如下:
public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ImageView image = findViewById(R.id.image); Bitmap bitmap = ((BitmapDrawable)image.getDrawable()).getBitmap(); Palette.Builder builder = Palette.from(bitmap); builder.generate(new Palette.PaletteAsyncListener() { @Override public void onGenerated(Palette palette) { //充满活力的样本 Palette.Swatch swath1 = palette.getVibrantSwatch(); if (swath1 != null) { findViewById(R.id.color1).setBackgroundColor(swath1.getRgb()); } //充满活力的暗色样本 Palette.Swatch swath2 = palette.getDarkVibrantSwatch(); if (swath2 != null) { findViewById(R.id.color2).setBackgroundColor(swath2.getRgb()); } //充满活力的亮色样本 Palette.Swatch swath3 = palette.getLightVibrantSwatch(); if (swath3 != null) { findViewById(R.id.color3).setBackgroundColor(swath3.getRgb()); } //柔和的样本 Palette.Swatch swath4 = palette.getMutedSwatch(); if (swath4 != null) { findViewById(R.id.color4).setBackgroundColor(swath4.getRgb()); } //柔和的暗色样本 Palette.Swatch swath5 = palette.getDarkMutedSwatch(); if (swath5 != null) { findViewById(R.id.color5).setBackgroundColor(swath5.getRgb()); } //柔和的亮色样本 Palette.Swatch swath6 = palette.getLightMutedSwatch(); if (swath6 != null) { findViewById(R.id.color6).setBackgroundColor(swath6.getRgb()); } } }); }}
Palette 对象的生成有两种方法,例子中的是异步生成,还可以同步生成,代码如下:
Palette.Builder bulider = Palette.from(bitmap);Palette palette = bulider.generate();
推荐使用异步,尤其是图片大小比较大的时候。
提取颜色提供了 6 中不同的颜色,详见代码注释。
除了提取 rgb 颜色,还可以提取其他信息:
getTitleTextColor():返回适合标题的颜色
getBodyTextColor():返回适合文本内容的颜色
getTitleTextColor():返回float[],可以进行修改,后使用ColorUtils工具类进行转换
getPopulation():返回像素的总数
运行效果如下:
可以发现下面 6 中颜色只有 5 中颜色显示出来了,其中 “充满活力的暗色样本” 没有显示。也就是说 Palette 获取的样本是可能没有值的。但是 “充满活力的样本” 和其他不一样,始终有值。
使用场景
Palette 到底实际应用中有什么用呢,下面通过一个例子来展示一下其中一种使用场景。
先来看下效果:
ViewPager 滑动的时候,根据图片的颜色,改变 StatusBar,Toolbar,TabLayout,NavigationBar 的颜色。
Palette 的基本使用既然已经在上文中讲解过了,这边就不再啰嗦了。
例子中使用到了 Toolbar 和 TabLayout,如果不熟悉的话,可以参照我之前写的文章↓
Android Material Design 之 Toolbar
Android Material Design 之 TabLayout
所以直接看源码吧!
源码
基本使用
https://github.com/teletian/Android/tree/master/MaterialDesignSamples/Palette
ViewPager 滑动改变颜色
https://github.com/teletian/Android/tree/master/MaterialDesignSamples/PaletteWithViewPager
- Android Material Design 之 Palette
- Android Material Design系列之Palette
- Android Material Design系列之Palette
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- Android Material Design之Toolbar与Palette实践
- D20 Kafka及其常用命令
- 【canvas学习笔记五】使用图片
- 数据结构之二叉树的建立与遍历
- 线程--生产者消费者模式
- opencv访问图片单个像素和通道
- Android Material Design 之 Palette
- Subversion SVN服务器
- 如何使用C语言实现人员信息管理(简易版)
- iOS-深拷贝浅拷贝实例
- Tramp data In Kernel
- D21 flume/kafka/storm/redis综合
- D24 推荐系统DSP介绍
- poj1014 Dividing(多重背包的二进制优化)
- java实现定时任务的三种方法