2012-10-24 81 views
0

我需要創建一個自定義的按鈕圖形具有邊框,漸變背景和玻璃效果:自定義按鈕:玻璃效果

Custom button graphics with "glass" effect

不想使用 9patch或代碼自定義類,只是xml(形狀,圖層,...)。

在這裏,我用它來繪製按鈕的XML代碼(它不不包括 「玻璃效果」 呢!):

<layer-list> 
</shape> 

    <!-- item to draw the inner border and the background --> 
    <item> 
     <shape> 
      <stroke 
       android:width="4px" 
       android:color="#5f87aa" /> 

      <corners android:radius="10dp" /> 

      <gradient 
       android:angle="270" 
       android:endColor="#034b89" 
       android:startColor="#03437b" /> 
     </shape> 
    </item> 

    <!-- item to draw the outer border (transparent background) --> 
    <item> 
     <shape> 

      <stroke 
       android:width="2px" 
       android:color="#212121" /> 

      <corners android:radius="10dp" /> 

     <solid android:color="#00000000" /> 
    </item> 
</layer-list> 

它看起來像這樣:

Custtom button whit no "glass" effect

那麼我能做些什麼來讓玻璃效果呢?

回答

1

我回答我自己的問題:似乎沒有解決我的問題。只有代碼(和9補丁)可以解決它。所以,我讓自己的按鈕擴展了標準的「按鈕」。

這是再生按鈕圖形時用於繪製的光澤效果的代碼:使用油漆

Paint shinePaint = new Paint(); 
shinePaint.setAntiAlias(true); 
shinePaint.setStyle(Paint.Style.FILL); 
shinePaint.setColor(0x16ffffff); 

//get the drawing rectangle (calculate inner/outer border width) 
RectF sr = new RectF(); 

sr.set(cr.left + innerBorderScaledSize/2f, 
     cr.top + innerBorderScaledSize/2f, 
     cr.right - innerBorderScaledSize/2f, 
(cr.top - innerBorderScaledSize/2f 
+ cr.bottom - innerBorderScaledSize/2f)/2f); 

RectF cor = new RectF(); 
cor.set(sr.left, sr.top, sr.left + cornerScaledRaius, sr.top + cornerScaledRaius); 

//here the interesting part: draw the shape 
Path path = new Path(); 
path.reset(); 
path.moveTo(sr.left, sr.bottom); 
path.lineTo(sr.left, sr.top + cornerScaledRaius); 
path.arcTo(cor, 180, 90); 
cor.set(sr.right - cornerScaledRaius, sr.top, sr.right, sr.top + cornerScaledRaius); 
path.arcTo(cor, 270, 90); 
path.lineTo(sr.right, sr.bottom); 
path.close(); 
canvas.drawPath(path, shinePaint); 

所以我簡單地畫一個自定義的和圓形的背景半透明狀

ü

這裏的按鍵佈局的XML代碼:

<xxx.uicomponents.iconbutton.IconButton 
android:layout_height="match_parent" 
android:layout_width="match_parent" 
android:background="@drawable/standard_button_background" 
android:textColor="@drawable/standard_button_text" 
android:textStyle="bold" 
android:textSize="14dp" 
android:text="Click me" /> 

希望得到這個幫助!

1

您可以在這裏執行的最佳操作是使用android:centerColor屬性進行漸變。

但它仍然是3色漸變,但不是兩個不同顏色的區域。它會看起來比你想要的更光滑(而且便宜)。

+0

感謝您的回覆。是的,我嘗試使用centerColor屬性,但結果不滿足我... –