android dialog圓角顯示及解決出現的黑色稜角

yangxi_001發表於2014-07-31
Android

http://blog.csdn.net/jj120522/article/details/7871289


最近在開發一個天氣預報的app,看到一個比較不錯友情提示，如下：

                 

怎麼樣，看起來比原始的dialog好看吧.好了，做法也許有很多，我介紹下我的做法吧，

 首先，我第一個想到的就是重寫dialog.自定義一個layout佈局，引用shape.xml實現圓角。

 

 在此之前，我要說明一下：在我們新建的佈局檔案，只要不是最外層我們引用shape就不會遇到下面這個問題，看圖：

         

          

    仔細看就是四個角，發現出現四個黑稜角，這個肯定使我們不想要的結果，我在配置檔案中怎麼設定都不行，鬱悶了好久，突然發現之前做過dialog顯示圖片的效果，找了一下例子，原來真的做過，看來我真的不適合做程式啊，努力賺錢做生意去.說的好像跑偏了，說正題：解決方法就是：getWindow().setBackgroundDrawable(new BitmapDrawable()); 或者getWindow().setBackgroundDrawableResource(android.R.color.transparent); 這樣就不會出現四個黑稜角了.

   這個時候我們解決稜角了，又有一個問題，你會發現你在配置檔案中，設定中間某個佈局的背景顏色的時候，這個圓角會被吞噬，解決方法我們可以在shape中設定中間填充顏色，對於中間的部分我們可以在佈局檔案中設定，因為中間她影響不到圓角，哈哈這樣就實現最終效果了.如果有人要說，那我實現三種顏色多種顏色怎麼辦，其實我們也可以分開shape，不是嗎，就是麻煩點，不過肯定可以實現.

  

看起來效果還可以吧，不過現在還正在完善.

該睡覺了，就說到這了，也許我講的都是些廢話，不過我在這上面卡三次，做過了都不知道，寫下來加深記憶。



/*************************************************************************************/

上面介紹的是自定義dialog來實現.下面我們在來看一個示例.

         

這是我現在專案中開發的一個檢視,樣式還沒有進行處理，所以難免有些粗糙.(至於原因：有過小公司開發經驗的朋友，你懂的.)

實現方法我們完全可以用上面自定義dialog完全可以做到.不過自定義有個缺點就是你必須整合到她的父檢視中.因為用到環境變數Context. 或許你可以做到很好的分層.還有這裡面也涉及了比較多的介面操作.就類似於一個mini的Activity.這裡我們用另外一種簡單的方法實現:改變Activity的Style.

在style檔案中自定義一個樣式.

[java] view plaincopy
  1. <style name="Theme.HalfScreen" parent="android:style/Theme.Dialog"></style>  

在Activity中引用：

[java] view plaincopy
  1. <activity  
  2.            android:name=".MemberActivity"  
  3.            android:screenOrientation="portrait"  
  4.            android:theme="@style/Theme.HalfScreen" />  
或者不定義你直接引用現有的樣式也行.這裡不是重點所在.

首先我們要在xml中定義檢視：（這裡我將樣式copy出來.這樣比密密麻麻一坨程式碼看起來舒服點.）


不知道大家注意到沒.她的四周都是圓角.正是這個圓角給這個mini版的Activity增加了獨有特色.下面我簡單說明下具體實現：

首先佈局的圓角大家可以自定一個背景xml檔案

[java] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >  
  3.   
  4.     <corners android:radius="10dp" />  
  5.   
  6.     <solid android:color="@color/white" />  
  7.   
  8. </shape>  
很簡單這裡不解釋.

這樣還沒有完，這樣我們只能得到下半部分是個圓角,而上半部分並非圓角，因為上部是一個圖片.這裡通過配置檔案是做不到的，我們需要在程式碼中隊圖片進行處理.目的：圖片上半部分為圓角.

程式碼片段：

[java] view plaincopy
  1. /*** 
  2.      * 圖片切圓角，方向自由. 
  3.      */  
  4.     public static final int ALL = 347120;    
  5.     public static final int TOP = 547120;    
  6.     public static final int LEFT = 647120;    
  7.     public static final int RIGHT = 747120;    
  8.     public static final int BOTTOM = 847120;    
  9.   
  10.     public static Bitmap fillet(int type,Bitmap bitmap,int roundPx) {    
  11.         try {    
  12.             // 其原理就是：先建立一個與圖片大小相同的透明的Bitmap畫板    
  13.             // 然後在畫板上畫出一個想要的形狀的區域。    
  14.             // 最後把源圖片帖上。    
  15.             final int width = bitmap.getWidth();    
  16.             final int height = bitmap.getHeight();    
  17.   
  18.             Bitmap paintingBoard = Bitmap.createBitmap(width,height, Config.ARGB_8888);    
  19.             Canvas canvas = new Canvas(paintingBoard);    
  20.             canvas.drawARGB(Color.TRANSPARENT, Color.TRANSPARENT, Color.TRANSPARENT, Color.TRANSPARENT);    
  21.   
  22.             final Paint paint = new Paint();    
  23.             paint.setAntiAlias(true);    
  24.             paint.setColor(Color.BLACK);       
  25.   
  26.             if( TOP == type ){    
  27.                 clipTop(canvas,paint,roundPx,width,height);    
  28.             }else if( LEFT == type ){    
  29.                 clipLeft(canvas,paint,roundPx,width,height);    
  30.             }else if( RIGHT == type ){    
  31.                 clipRight(canvas,paint,roundPx,width,height);    
  32.             }else if( BOTTOM == type ){    
  33.                 clipBottom(canvas,paint,roundPx,width,height);    
  34.             }else{    
  35.                 clipAll(canvas,paint,roundPx,width,height);    
  36.             }    
  37.   
  38.             paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));     
  39.             //帖子圖    
  40.             final Rect src = new Rect(0, 0, width, height);    
  41.             final Rect dst = src;    
  42.             canvas.drawBitmap(bitmap, src, dst, paint);       
  43.             return paintingBoard;    
  44.         } catch (Exception exp) {            
  45.             return bitmap;    
  46.         }    
  47.     }    
  48.       
  49.      private static void clipLeft(final Canvas canvas,final Paint paint,int offset,int width,int height){    
  50.             final Rect block = new Rect(offset,0,width,height);    
  51.             canvas.drawRect(block, paint);    
  52.             final RectF rectF = new RectF(0, 0, offset * 2 , height);    
  53.             canvas.drawRoundRect(rectF, offset, offset, paint);    
  54.         }    
  55.             
  56.         private static void clipRight(final Canvas canvas,final Paint paint,int offset,int width,int height){    
  57.             final Rect block = new Rect(0, 0, width-offset, height);    
  58.             canvas.drawRect(block, paint);    
  59.             final RectF rectF = new RectF(width - offset * 2, 0, width , height);    
  60.             canvas.drawRoundRect(rectF, offset, offset, paint);    
  61.         }    
  62.             
  63.         private static void clipTop(final Canvas canvas,final Paint paint,int offset,int width,int height){    
  64.             final Rect block = new Rect(0, offset, width, height);    
  65.             canvas.drawRect(block, paint);    
  66.             final RectF rectF = new RectF(0, 0, width , offset * 2);    
  67.             canvas.drawRoundRect(rectF, offset, offset, paint);    
  68.         }    
  69.             
  70.         private static void clipBottom(final Canvas canvas,final Paint paint,int offset,int width,int height){    
  71.             final Rect block = new Rect(0, 0, width, height - offset);    
  72.             canvas.drawRect(block, paint);    
  73.             final RectF rectF = new RectF(0, height - offset * 2 , width , height);    
  74.             canvas.drawRoundRect(rectF, offset, offset, paint);    
  75.         }    
  76.             
  77.         private static void clipAll(final Canvas canvas,final Paint paint,int offset,int width,int height){    
  78.             final RectF rectF = new RectF(0, 0, width , height);    
  79.             canvas.drawRoundRect(rectF, offset, offset, paint);    
  80.         }    

先宣告，這段程式碼是copy他人的.寫的相當的清晰，我就直接拿來用了.

這裡你要注意一個值roundPx.看下面這張圖(上部圓角).


也許有的朋友們已經明白，那個白色是我們底部圓角佈局.因為此時（圖片圓角弧度>底部圓角佈局.）所以就會 出現這種現象，解決方法很簡單，你可以讓圖片圓角弧度小於底部圓角佈局圓角即可，或者為了更為準確，你可以都用px作為單位，都引用這個這個大小.

相關文章