自定义按钮：玻璃效果

Question

我需要创建一个自定义的按钮图形具有边框，渐变背景和玻璃效果：

我不想使用 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> 

它看起来像这样：

那么我能做些什么来让玻璃效果呢？

Answer 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" /> 

希望得到这个帮助！

Answer 2

您可以在这里执行的最佳操作是使用android:centerColor属性进行渐变。

但它仍然是3色渐变，但不是两个不同颜色的区域。它会看起来比你想要的更光滑（而且便宜）。