1. 程式人生 > >基於bmob瀑布流:圖片加文字的實現方式

基於bmob瀑布流:圖片加文字的實現方式

最近總算有空了,可以寫一下之前自己學習bmob的一些收穫,延續上篇的工作展開說明。

  上一篇我們實現了瀑布流,進一步的我們又想實現圖片加文字卡片式的瀑布形式,由於自己是第一次涉及,初次想到了用畫布的形式實現,當然還有其他更高階的方法可以更加完美的實現,但本文不做深入研究,僅說明自己的實現方法,方法比較笨,請見諒。用畫布的形式實現比較簡單,雖然比較簡陋,先來一張效果圖:

實現的形式簡單粗暴,具體用到了canvas的影象拼接,文字新增這兩塊知識。具體實現過程如下:

  首先從bmob伺服器獲得圖片以瀑布流形式實現,獲取一張圖片的尺寸大小,

int width =response.getWidth(), hight =response.getHeight();
System.out.println("寬"+width+"高"+hight);

  再重新繪製一張畫布:

Bitmap icon=Bitmap.createBitmap(response.getWidth(),response.getHeight()+114, Bitmap.Config.ARGB_8888); //建立一個空的BItMap   
Canvas canvas = new Canvas(icon);//初始化畫布繪製的影象到icon上

這裡高度大小自己定為了  “response.getHeight()+114”,寬度不變,跟獲取的圖片寬度一致。

然後將獲取的圖片先畫入畫布:

Paint photoPaint = new Paint(); //建立畫筆  
photoPaint.setDither(true); //獲取跟清晰的影象取樣  
photoPaint.setFilterBitmap(true);//過濾一些  
                 
Rect src = new Rect(0, 0, response.getWidth(),response.getHeight());//建立一個指定的新矩形的座標  
Rect dst = new Rect(0, 0, width, hight);//建立一個指定的新矩形的座標  
canvas.drawBitmap(response, src, dst, photoPaint);//將photo 縮放或則擴大到 dst使用的填充區photoPaint

畫完伺服器的圖片,再進行拼接文字的背景圖,這裡的背景圖片直接從本地獲取(當然也可以從網路或其他途徑獲取),獲取的圖片要轉化為bitmap格 式:

Drawable mDrawable=MainActivity1.this.getResources().getDrawable(R.drawable.fenf);
Bitmap mBitmap = ((BitmapDrawable) mDrawable).getBitmap();
之後畫入畫布:
src = new Rect(0, 0, mBitmap.getWidth(), mBitmap.getHeight());// 擷取bmp1中的矩形區域
dst = new Rect(0, hight, width,
                response.getHeight()+114);// bmp2在目標畫布中的位置
canvas.drawBitmap(mBitmap, src, dst, photoPaint);////////////////////

最後把文字畫入即可:

TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.DEV_KERN_TEXT_FLAG);//設定畫筆  
textPaint.setTextSize(24.0f);//字型大小  
textPaint.setTypeface(Typeface.DEFAULT_BOLD);//採用預設的寬度  
textPaint.setColor( Color.WHITE);//採用的顏色  Color.GREEN
//textPaint.setShadowLayer(3f, 1, 1,this.getResources().getColor(android.R.color.background_dark));//陰影的設定  
StaticLayout layout = new StaticLayout("『主題』"+str1,textPaint,icon.getWidth(),Alignment.ALIGN_NORMAL,1.0F,0.0F,false);               
canvas.translate(0,response.getHeight()+4);
layout.draw(canvas); 
canvas.save(Canvas.ALL_SAVE_FLAG); 
canvas.restore(); 
itemImage.setImageBitmap(icon);

  以上就是大體步驟。最後仿照上述方法實現了點選這個圖片進行閱讀的效果,如圖:


具體流程就是這樣,有問題可以私信本作者,歡迎交流一起學習。接下來的部落格作者將寫一下基於bmob實現發帖與評論的一些學習心得,會繼續努力~!謝謝~