android绘制花边view-WaveLineView

2015-03-27 22:10

项目开发中需要开发漂亮的界面，其中一些界面需要花边

例如：

如果切图切整一条，那么他只适用于该分辨率的手机，如果放到其它手机上或放到平板上，他就会被拉长，用.9图也是一样会被拉长，那么该怎么办呢？

对于这种情况，我们只好切出波浪线重复的那一部分：

img_wave.png

拿到这部分之后，我们开始自定义一个view，用view的ondraw绘制横向绘制这个重复部分、

绘制之前，我们需要将img_wave放大到view得高度：

[java] view plain copy print ?

float scale = getMeasuredHeight()*1f/bitmap.getHeight();
float width = bitmap.getWidth()*1f*scale;

同时也需要计算绘制的个数，让绘制的效果达到最好：

[java] view plain copy print ?

waveCount = (int)(getMeasuredWidth()*1f/bitmap.getWidth())+1;

上面+1的原因是因为让它多出一个，足以铺满，

+1个之后宽度超出view宽度，再重新计算img_wavw的绘制宽度及缩放比例：

[java] view plain copy print ?

waveWidth = width - ((width*waveCount-getMeasuredWidth())/waveCount);
waveScale = waveWidth*1f/bitmap.getWidth();

最后，横向绘制波浪：

[java] view plain copy print ?

matrix.setScale(waveScale, waveScale);
for (int i = 0; i < waveCount; i++) {
canvas.drawBitmap(bitmap_wave.get(), matrix, paint);
matrix.postTranslate(waveWidth, 0);
}

最后效果图如下：

是不是很棒？最后贴出代码，希望能帮到大家：

[html] view plain copy print ?

/**
* 无缝花边
* @author touch_ping
*
*/
public class WaveLineView extends View {
private final static int waveRes = R.drawable.img_wave;
private static SoftReference<Bitmap> bitmap_wave;// 背景
private Context mcontext;
private static Paint paint;
private static Matrix matrix;
private static float waveWidth;
private static float waveScale;
private static int waveCount;
public WaveLineView(Context context) {
super(context);
init(context);
}
public WaveLineView(Context context, AttributeSet attrs) {
super(context, attrs, 0);
init(context);
}
private void init (Context context) {
mcontext = context;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
if (paint==null) {
paint = new Paint();
}
if (matrix==null) {
matrix = new Matrix();
}
if (bitmap_wave==null || bitmap_wave.get()==null) {
// 从资源文件中生成位图
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), waveRes);
float scale = getMeasuredHeight()*1f/bitmap.getHeight();
float width = bitmap.getWidth()*1f*scale;
waveCount = (int)(getMeasuredWidth()*1f/width)+1;
waveWidth = width - ((width*waveCount-getMeasuredWidth())/waveCount);
waveScale = waveWidth*1f/bitmap.getWidth();
bitmap_wave = new SoftReference<Bitmap>(bitmap);
}
matrix.setScale(waveScale, waveScale);
for (int i = 0; i < waveCount; i++) {
canvas.drawBitmap(bitmap_wave.get(), matrix, paint);
matrix.postTranslate(waveWidth, 0);
}
}
}

android绘制花边view-WaveLineView相关推荐

Android刷新机制-View绘制原理
Android刷新机制-View绘制原理 Android刷新机制-SurfaceFlinger原理 Android刷新机制-Choreographer原理一.概述本文将从startActivity ...
android绘制view的过程
1 android绘制view的过程简单描述简单描述可以解释为:计算大小(measure),布局坐标计算(layout),绘制到屏幕(draw): 下面看看每一步的动作到底 ...
Android面试，View绘制流程以及invalidate()等相关方法分析
整个View树的绘图流程是在ViewRoot.java类的performTraversals()函数展开的,该函数做的执行过程可简单概况为根据之前设置的状态,判断是否需要重新计算视图大小(measu ...
android 自定义viewgroup onmeasure,Android进阶——自定义View之View的绘制流程及实现onMeasure完全攻略...
引言 Android实际项目开发中,自定义View不可或缺,而作为自定义View的一种重要实现方式--继承View重绘尤其重要,前面很多文章基本总结了继承View的基本流程:自定义属性和继承View重 ...
Android绘制竖直虚线完美解决方案—自定义View
Android绘制竖直虚线完美解决方案-自定义View 开发中我们经常会遇到绘制虚线的需求,一般我们使用一个drawable文件即可实现,下面我会先列举常规drawable文件的实现方式. 使用dra ...
Android精通：View与ViewGroup，LinearLayout线性布局，RelativeLayout相对布局，ListView列表组件...
UI的描述对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个用于存放 ...
Android绘制流程
一.前言 1.1.C++界面库 MFC.WTL.DuiLib.QT.Skia.OpenGL. Android里面的画图分为2D和3D两种: 2D是由Skia 来实现的,3D部分是由OpenGL实现的. ...
android绘制高亮区域,实现高亮某行的RecyclerView效果
最终效果全部代码:github 方式有二组合控件,RecyclerView + View 自定义RecyclerView 1中只需要控制View,但是不好封装. 2中需要重写RecyclerVie ...
精通android布局,Android精通：View与ViewGroup，LinearLayout线性布局，RelativeLayout相对布局，ListView列表组件...
标题图 UI的描述对于Android应用程序中,所有用户界面元素都是由View和ViewGroup对象构建的.View是绘制在屏幕上能与用户进行交互的一个对象.而对于ViewGroup来说,则是一个 ...

android绘制花边view-WaveLineView

android绘制花边view-WaveLineView相关推荐

最新文章

热门文章