Android颜色表以及水波纹的相关实现

关于 #FFFFFFFF

• #ffffffff由#加八位数字或字母组成
• 前两个ff为透明度（十六进制）
• 后面六位ffffff为颜色代码，采用RGB配色（十六进制）

讲解：

• 透明度总共有255阶，写进语句的都是转换为十六进制的值

使用举例：

• 255阶为不透明，要得到25%透明度，将255乘25%得到大概63（此时仍是十进制值）
• 在进位制选择十进制，输入63，在Hex（十六进制）输出框可以得到3f
• 那么这个就是十进制时63转化为十六进制的值，将3f写进语句得到〈#3fffffff〉

透明度参照表：

(PS:30%透明度就是70%的不透明度，开发时请确定好UE/UI给定的要求是“不透明还是透明”)

透明度	十六进制
00%	FF（不透明）
5%	F2
10%	E5
15%	D8
20%	CC
25%	BF
30%	B2
35%	A5
40%	99
45%	8c
50%	7F
55%	72
60%	66
65%	59
70%	4c
75%	3F
80%	33
85%	21
90%	19
95%	0c
100%	00（全透明）

拓展（Android水波纹的设置和实现）

1、设置主题实现点击波纹效果

参考资料： Android 设置主题实现点击波纹效果

通过主题实现点击波纹效果现有的实现方式有两种：

1.1 ActionBar（Toolbar）上添加menu，通过item来添加按钮

这种方式使用android.support.v7包或者SDK的menu，源码设定item的width和height均为wrap_content，没有暴露自定义item大小的接口。

可以通过对Toolbar或者ActionBar的主题属性@color/ripple_material_light来达到效果。

1.2 自定义布局

参考链接资料，这种方式设置android:background=”?android:attr/selectableItemBackground”，表示波纹有边界

2、使用标签自定义控件背景布局（Android 5.0以上）

参考资料：Android 水波纹点击效果(Ripple Effect)

可通过标签来设定水波纹的效果。

ActionBar黑色背景时，设定颜色#ffffff，颜色透明度10%，1.2和2中自定义布局的控件width和height均为wrap_content

ActionBar为彩色或白色背景时，设定颜色#000000，颜色透明度10%，1.2和2中自定义布局的控件width和height均为wrap_content

例子：
drawable中的ripple_cicle_bg.xml:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/ripple_light">
    <item>
        <!--前面罩住的圆圈-->
        <shape android:shape="oval">
            <solid android:color="@color/main_dark_blue"/>
        </shape>
    </item>
</ripple>

ripple_dialog_item_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<!--水波纹颜色-->
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/ripple_light">
    <item>
        <!--前面罩住的圆圈-->
        <shape android:shape="oval">
            <solid android:color="@color/main_dark_blue"/>
        </shape>
    </item>
    <item>
        <selector xmlns:android="http://schemas.android.com/apk/res/android">
            <item android:drawable="@color/dialog_normal_gray" android:state_pressed="true"/>
            <item android:drawable="@color/dialog_press_graywhite" android:state_pressed="false"/>
        </selector>
    </item>
</ripple>

引用的地方直接用background进行引用即可。

        <ImageButton
            android:id="@+id/ibt_rename_songs"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="100dp"
            android:background="@drawable/ripple_cicle_bg"
            android:contentDescription="@string/imageViewDescription"
            android:padding="8dp"
            android:src="@drawable/rename_songs_selecter"
            android:visibility="gone"/>

用到矩形水波纹的地方可以多而灵活，可以是一个布局，一个按钮，图标等等，如下：

        <RelativeLayout
            android:id="@+id/rl_dialog_format_wav"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/ripple_dialog_item_bg">

或者Button的background等。

后续对比

本人在公司的项目中，用上述方法完成水波纹的实现，但是在细微的观察中，发现和原生的水波纹是有一丁点差别的，特别是圆形水波纹。
区别：

• 上述的效果：水波多层，能跟随手指离开后波动。
• 原生的效果：感觉只有两次，每次都是从中心扩散。

结论：

• 从效果上来讲都是水波纹，但是为了和大家统一，改成第二种的话直接改一句代码即可，也是最简单的方法，改法如下。

  1.去掉background引用的水波纹drawable
  2.直接设置style的ActionButton：style=”@style/Widget.AppCompat.ActionButton.CloseMode”

        <ImageButton
            android:id="@+id/ibt_rename_songs"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="100dp"
            style="@style/Widget.AppCompat.ActionButton.CloseMode"
            android:contentDescription="@string/imageViewDescription"
            android:padding="8dp"
            android:src="@drawable/rename_songs_selecter"
            android:visibility="gone"/>

3.其他相关的背景选择写在src即可。