关于 #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、设置主题实现点击波纹效果
通过主题实现点击波纹效果现有的实现方式有两种:
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即可。