自定义按钮：玻璃效果

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

您可以在这里做的最好的事情是使用android:centerColor属性进行渐变。

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

Answer 2

我回答我自己的问题：我的问题似乎无法解决。只有代码（和9补丁）可以解决它。所以，我自己创建了按钮，扩展了标准的“按钮”。

这是用于在重新生成按钮图形时绘制光泽效果的代码：

//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);

所以我只需使用Paint

在背景上绘制一个自定义的圆形半透明形状

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

û

这里是按钮布局的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" />

希望这有帮助！