android繪製花邊view-WaveLineView

dj0379發表於2015-10-20
AndroidView
2015-03-27 22:10

專案開發中需要開發漂亮的介面，其中一些介面需要花邊

例如：


如果切圖切整一條，那麼他只適用於該解析度的手機，如果放到其它手機上或放到平板上，他就會被拉長，用.9圖也是一樣會被拉長，那麼該怎麼辦呢？

對於這種情況，我們只好切出波浪線重複的那一部分：


img_wave.png

拿到這部分之後，我們開始自定義一個view，用view的ondraw繪製橫向繪製這個重複部分、

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

[java] view plaincopyprint?
  1. float scale = getMeasuredHeight()*1f/bitmap.getHeight();  
  2. float width = bitmap.getWidth()*1f*scale;  

同時也需要計算繪製的個數，讓繪製的效果達到最好：

[java] view plaincopyprint?
  1. waveCount = (int)(getMeasuredWidth()*1f/bitmap.getWidth())+1;  

 上面+1的原因是因為讓它多出一個，足以鋪滿，

+1個之後寬度超出view寬度，再重新計算img_wavw的繪製寬度及縮放比例：

[java] view plaincopyprint?
  1. waveWidth = width - ((width*waveCount-getMeasuredWidth())/waveCount);  
  2. waveScale = waveWidth*1f/bitmap.getWidth();  

最後，橫向繪製波浪：

[java] view plaincopyprint?
  1. matrix.setScale(waveScale, waveScale);  
  2. for (int i = 0; i < waveCount; i++) {  
  3. canvas.drawBitmap(bitmap_wave.get(), matrix, paint);  
  4. matrix.postTranslate(waveWidth, 0);  
  5. }  


最後效果圖如下：



是不是很棒？最後貼出程式碼，希望能幫到大家：

[html] view plaincopyprint?
  1. /**  
  2.  * 無縫花邊  
  3.  * @author touch_ping  
  4.  *  
  5.  */  
  6. public class WaveLineView extends View {  
  7.     private final static int waveRes = R.drawable.img_wave;  
  8.     private static SoftReference<Bitmap> bitmap_wave;// 背景  
  9.     private Context mcontext;  
  10.     private static Paint paint;  
  11.     private static Matrix matrix;  
  12.     private static float waveWidth;  
  13.     private static float waveScale;  
  14.     private static int waveCount;  
  15.       
  16.     public WaveLineView(Context context) {  
  17.         super(context);  
  18.         init(context);  
  19.     }  
  20.   
  21.     public WaveLineView(Context context, AttributeSet attrs) {  
  22.         super(context, attrs, 0);  
  23.         init(context);  
  24.     }  
  25.       
  26.     private void init (Context context) {  
  27.         mcontext = context;  
  28.     }  
  29.       
  30.   
  31.     @Override  
  32.     protected void onDraw(Canvas canvas) {  
  33.         super.onDraw(canvas);  
  34.         if (paint==null) {  
  35.             paint = new Paint();  
  36.         }  
  37.         if (matrix==null) {  
  38.             matrix = new Matrix();  
  39.         }  
  40.         if (bitmap_wave==null || bitmap_wave.get()==null) {  
  41.             // 從資原始檔中生成點陣圖     
  42.             Bitmap bitmap = BitmapFactory.decodeResource(getResources(), waveRes);  
  43.               
  44.             float scale = getMeasuredHeight()*1f/bitmap.getHeight();  
  45.             float width = bitmap.getWidth()*1f*scale;  
  46.             waveCount = (int)(getMeasuredWidth()*1f/width)+1;  
  47.               
  48.             waveWidth = width - ((width*waveCount-getMeasuredWidth())/waveCount);  
  49.             waveScale = waveWidth*1f/bitmap.getWidth();  
  50.               
  51.             bitmap_wave = new SoftReference<Bitmap>(bitmap);  
  52.         }  
  53.           
  54.         matrix.setScale(waveScale, waveScale);  
  55.         for (int i = 0; i < waveCount; i++) {  
  56.             canvas.drawBitmap(bitmap_wave.get(), matrix, paint);  
  57.             matrix.postTranslate(waveWidth, 0);  
  58.         }  
  59.     }  
  60. }  

相關文章