2015-03-27 22:10

項目開發(fā)中需要開發(fā)漂亮的界面，其中一些界面需要花邊

例如：

如果切圖切整一條，那么他只適用于該分辨率的手機(jī)，如果放到其它手機(jī)上或放到平板上，他就會被拉長，用.9圖也是一樣會被拉長，那么該怎么辦呢？

對于這種情況，我們只好切出波浪線重復(fù)的那一部分：

img_wave.png

拿到這部分之后，我們開始自定義一個view，用view的ondraw繪制橫向繪制這個重復(fù)部分、

繪制之前，我們需要將img_wave放大到view得高度：

[java]? view plain copy print ?

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

float?width?=?bitmap.getWidth()*1f*scale;??

同時也需要計算繪制的個數(shù)，讓繪制的效果達(dá)到最好：

[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);??

????????}??

????}??

} ?

總結(jié)

以上是生活随笔為你收集整理的android绘制花边view-WaveLineView的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。