android绘制花边view-WaveLineView

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

例如:


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

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


img_wave.png

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

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

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

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

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

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

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

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

最后,横向绘制波浪:

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


最后效果图如下:



是不是很棒?最后贴出代码,希望能帮到大家:

/**
 * 无缝花边
 * @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);
		}
	}
}






  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值