自定义按钮:玻璃效果 [英] Custom button: glass effect
问题描述
我需要创建一个自定义的按钮图形具有边框,渐变背景和玻璃的效果:
I need to create a custom button graphic with a border, a gradient background and a glass effect:
我不想使用 9patch或code自定义类,只是XML(形状,层,...)。
I don't want to use 9patch or code a custom class, just xml (shapes, layers, ...).
下面的XML code我用它来绘制按钮(不不包括玻璃效果呢!)
Here the XML code I use to draw the button (it doesn't not include the "glass effect" yet!):
<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>
它看起来是这样的:
it looks like this:
我那么什么可以做也有它的玻璃效果?
So what can I do to have also the glass effect on it?
推荐答案
我回答我的问题:似乎没有解决我的问题。只有code(以及9补丁)可以解决这个问题。所以,我把我自己的按钮扩展标准按钮。
I answer my own question: seems there are no solution to my problem. Only code (and 9-patch) can solve it. So, I make my own button extending the standard "Button".
这是使用再生按钮图形时,绘制光泽效果code:
This is the code used to draw the shine effect when regenerating the button graphic:
//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);
所以我只是画一个自定义的,并使用画图四舍五入的背景半透明状
So I simply draw a custom and rounded semi-transparent shape on the background using a Paint
Paint shinePaint = new Paint();
shinePaint.setAntiAlias(true);
shinePaint.setStyle(Paint.Style.FILL);
shinePaint.setColor(0x16ffffff);
U
这里的XML code的按键布局:
here the XML code for the button layout:
<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" />
希望这有助于!
这篇关于自定义按钮:玻璃效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!