Android 5.X之Ripple，Palette的详解

最新推荐文章于 2023-10-09 11:04:01 发布

小码哥_WS

最新推荐文章于 2023-10-09 11:04:01 发布

阅读量933

点赞数

分类专栏： Android进阶之路文章标签： Ripple Palette

本文链接：https://blog.csdn.net/king1425/article/details/60137385

版权

Android进阶之路专栏收录该内容

52 篇文章 7 订阅

订阅专栏

本文详细介绍了Android 5.x中的RippleDrawable，包括如何创建自定义触摸反馈动画，以及在不同版本中的兼容性处理。同时，文章讲解了Palette类的使用，用于从图像中提取关键颜色，并提供了最佳实践和示例代码。

摘要由CSDN通过智能技术生成

Android 5.x 提供了视图的水波纹效果， RippleDrawable 实现。

RippleDrawable特性：
自定义触摸反馈动画
以波纹效果来显示状态变化的 Drawable
ripple 标签即对应一个 RippleDrawable

使用：在V21中新建XML文件：

<?xml version="1.0" encoding="utf-8"?>  
<ripple xmlns:android="http://schemas.android.com/apk/res/android"  
    android:color="#FFEEEEEE">  

    <item android:drawable="@drawable/bg" />  

</ripple>

item android:drawable=”@drawable/bg”指定了按钮的正常状态的显示效果， android:color=”#FFEEEEEE”指定了点击时候的波纹颜色

1. item android:id=”@android:id/mask给水波纹做边界，其中的drawable可以是颜色，图片，shape.xml等等，如果不加边界，将是圆形扩散的。

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent">
    <item android:id="@android:id/mask"
        android:drawable="@android:color/white" />
</ripple>

这里写图片描述

<TextView
    ...
        android:background="@drawable/ripple_no_mask"
        android:text="Ripple With No Mask" />

    <Button  
    ...
        android:text="Ripple With Color Mask"
        android:background="@drawable/ripple_no_mask"
        />

        <ImageButton

            android:src="@mipmap/ic_launcher"
            android:background="@drawable/ripple_no_mask"
             />

        <ImageView

            android:src="@mipmap/ic_launcher"
            android:clickable="true"
            android:background="@drawable/ripple_no_mask"
            />

        <ImageView

            android:src="@mipmap/ic_launcher"
            android:clickable="true"
            android:background="@drawable/ripper"
            />

2. 另外ripple标签只能在5.X以上版本用，所以只可以在drawable-V21文件中创建。为了兼容低版本我们可以在drawable文件中创建同名文件模仿一下水波纹。

<selector xmlns:android="http://schemas.android.com/apk/res/android" android:enterFadeDuration="200" android:exitFadeDuration="200">
        <item android:state_pressed="false">
            <shape android:shape="oval">
                <solid android:color="@android:color/transparent" />
            </shape>
        </item>
        <item android:state_pressed="true">
            <shape android:shape="oval">
                <solid android:color="@color/colorAccent" />
            </shape>
        </item>
    </selector>

4. Ripple标签还可以自定义点击交互动画。以selector实现。就想下面这样定义

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/colorAccent">

    <item>
        <selector>
            <item
                android:drawable="@mipmap/fancy_9"
                android:state_pressed="true">
            </item>
            <item
                android:drawable="@mipmap/fancy_10"
                android:state_pressed="false">
            </item>
        </selector>
    </item>
</ripple>

在大多数情况下，您应以下列方式指定视图背景，在您的视图 XML 中应用此功能：
?android:attr/selectableItemBackground 指定有界的波纹
?android:attr/selectableItemBackgroundBorderless 指定越界的波纹
注意： selectableItemBackgroundBorderless 是 API 级别 21 中推出的新属性。

此外，您可利用 ripple 元素将 RippleDrawable 定义为一个 XML 资源。

您可以为 RippleDrawable 对象指定一种颜色。如果要改变默认触摸反馈颜色，请使用主题的 android:colorControlHighlight 属性。

下面是一个水波纹开源库：https://github.com/traex/RippleEffect

这里写图片描述

Palette

调色板类，可以让你从图像中提取突出的颜色。Palette 是兼容包中提供的，它是和 Andoid 5.x 一起出现的。

Palette 是兼容包中提供的，所有这里首先要做的是添加 palette-v7 的依赖：
compile ‘com.android.support:palette-v7:24.+’

官方提供了四种根据 Bitmap 对象来创建 Palette 对象的方法，分别是两种同步方法和两种异步方法，但是这四种方法上都标记了 @Deprecated，现在推荐使用 Builder 来创建。

Palette generate(Bitmap bitmap)
Palette generate(Bitmap bitmap, int numColors)
generateAsync(Bitmap bitmap, PaletteAsyncListener listener)
generateAsync(Bitmap bitmap, int numColors, final PaletteAsyncListener listener)

下面是使用 Builder 来创建的方式：

//使用 Builder 来创建 Palette： 
//同步方法：


    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg_palette);
    Palette palette = new Palette.Builder(bitmap).generate();


//异步方法：


    Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.bg_palette);
    new Palette.Builder(bitmap).generate(new Palette.PaletteAsyncListener() {
        @Override
        public void onGenerated(Palette palette) {

        }
    });

如何设置 size ？
调色板的大小值越大，生成的调色板的时间越长，数值越小，得到的颜色信息也越少，调色板的大小最好根据图片类型来决定，比如：

联系人头像：最优值24~32
风景图：8-16
当然默认是16，大多数情况下都可以取得很好的效果。

获取色板：
Palette.Swatch s1 = Palette.getVibrantSwatch(); //充满活力的色板
Palette.Swatch s2 = Palette.getDarkVibrantSwatch(); //充满活力的暗色类型色板
Palette.Swatch s3 = Palette.getLightVibrantSwatch(); //充满活力的亮色类型色板
Palette.Swatch s4 = Palette.getMutedSwatch(); //黯淡的色板
Palette.Swatch s5 = Palette.getDarkMutedSwatch(); //黯淡的暗色类型色板
Palette.Swatch s6 = Palette.getLightMutedSwatch(); //黯淡的亮色类型色板

在 Swatch 色板中提供了五种颜色信息，分别如下：

getPopulation(): 样本中的像素数量
getRgb(): 颜色的RBG值
getHsl(): 颜色的HSL值
getBodyTextColor(): 主体文字的颜色值
getTitleTextColor(): 标题文字的颜色值

通过 getRgb() 可以得到最终的颜色值。getBodyTextColor() 和 getTitleTextColor() 可以得到此颜色下文字适合的颜色，这样很方便我们设置文字的颜色，使文字看起来更加舒服。

这里写图片描述

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.mipmap.fj);
        new Palette.Builder(bitmap).generate(new Palette.PaletteAsyncListener() {
            @Override
            public void onGenerated(Palette palette) {
                Palette.Swatch s1 = palette.getVibrantSwatch();
                Palette.Swatch s2 = palette.getDarkVibrantSwatch();
                Palette.Swatch s3 = palette.getLightVibrantSwatch();
                Palette.Swatch  s4 = palette.getMutedSwatch();
                Palette.Swatch s5 = palette.getDarkMutedSwatch();
                Palette.Swatch  s6 = palette.getLightMutedSwatch();

                if (s1 != null) {
                    getVibrantSwatch.setBackgroundColor(s1.getRgb());
                }
                if (s2 != null) {
                    getDarkVibrantSwatch.setBackgroundColor(s2.getRgb());
                }
                if (s3 != null) {
                    getLightVibrantSwatch.setBackgroundColor(s3.getRgb());
                }
                if (s4 != null) {
                    getMutedSwatch.setBackgroundColor(s4.getRgb());
                }
                if (s5 != null) {
                    getDarkMutedSwatch.setBackgroundColor(s5.getRgb());
                }
                if (s6 != null) {
                    getLightMutedSwatch.setBackgroundColor(s6.getRgb());
                }

                if (s1 != null) {
                    getBodyTextColor.setBackgroundColor(s1.getBodyTextColor());
                }
                if (s1 != null) {
                    getTitleTextColor.setBackgroundColor(s1.getTitleTextColor());
                }

                if (s1 != null) {
                    getPopulation.setBackgroundColor(s1.getPopulation());
                }

            }
        });