android圆心波浪 声波扩散 android波浪效果实现

概述

Android 中绘制波浪线大致有三个方案：

1. 直接使用一个完整的波浪线切图
2. 自定义控件来绘制
3. 用xml的bitmap标签实现波浪线效果

第一种方法实现的波浪线实现起来十分简单，但劣势也很明显，波浪线会随着View的长宽进行拉伸变形，若项目中只需使用到固定宽高的波浪线，使用该方法也可。

自定义控件可以达到比较好的效果，但是实现起来比较繁琐。

用xml的bitmap标签实现波浪线，效果良好，而且实现起来较为简单。

用xml的bitmap标签来实现

XML Bitmap

官方api

XML Bitmap 是一个用XML定义的文件放在资源目录，定义的对象是图片，为bitmap定义别名，这个文件可以给bitmap定义一些额外的属性。例如：抖动、平铺。

1、文件存放位置

res/drawable/filename.xml

filename用作资源ID.

2、编译的资源数据类型

BitmapDrawable

3、资源引用

In Java: R.drawable.filename
In XML : @[package:]drawable/filename

4、语法

<?xml version="1.0" encoding="utf-8"?>
<bitmap
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:src="@[package:]drawable/drawable_resource"
    android:antialias=["true" | "false"]
    android:dither=["true" | "false"]
    android:filter=["true" | "false"]
    android:gravity=["top" | "bottom" | "left" | "right" | "center_vertical" |
                      "fill_vertical" | "center_horizontal" | "fill_horizontal" |
                      "center" | "fill" | "clip_vertical" | "clip_horizontal"]
    android:mipMap=["true" | "false"]
    android:tileMode=["disabled" | "clamp" | "repeat" | "mirror"] />

5、元素组成

元素	类型	含义
src	int	Drawable资源
antialias	boolean	启用或禁用抗锯齿
dither	boolean	启用或禁用抖动位图
filter	boolean	启用或禁用位图过滤器
gravity	Keyword	定义该位图的位置
mipMap	boolean	启用或禁用的mipmap提示
tileMode	Keyword	定义平铺模式

制作波浪线主要用到了 bitmap 中的 src、antialias、tileMode这三个元素。

6、tileMode

值	含义
disabled	不平铺 bitmap ，tileMode的默认值
clamp	复制边缘色彩
repeat	X、Y 轴进行重复图片显示，也就是普通的平铺效果
mirror	在水平和垂直方向上使用交替镜像的方式重复图片的绘制

绘制波浪线

1、首先准备一张一个周期的波浪线，如下图所示：

item_wave.png:

2、新建wave.xml文件，使用bitmap绘制波浪线：

wave.xml：

<?xml version="1.0" encoding="utf-8"?> 
<bitmap xmlns:android="http://schemas.android.com/apk/res/android" 
  android:antialias="true" 
  android:src="@drawable/item_wave" 
  android:tileMode="repeat" />

代码	含义
android:antialias=”true”	抗锯齿
android:src=”@drawable/item_wave”	设置资源引用
android:tileMode=”repeat”	设置平铺模式

3、在布局文件中使用

activity_main.xml：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" 
  android:orientation="vertical" 
  android:paddingBottom="@dimen/activity_vertical_margin" 
  android:paddingTop="@dimen/activity_vertical_margin" > 

  <ImageView 
    android:layout_marginTop="50dp"
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:background="@drawable/wave" /> 

</LinearLayout>

注意：这个ImageView通过background显示图片，src是显示不了这样的效果的。

完整效果图：