上的按钮渐变和阴影 [英] Gradients and shadows on buttons

问题描述

是否有可能以编程，或通过xml配置（而不是通过9patch PNG），以达到效果上看到Springpad插件：

Is it possible to programatically, or via xml configuration (and not via 9patch png), to achieve the effects as seen on Springpad widget:

如果你仔细观察，有上（亮）和较低的（较暗）梯度之间的尖锐边缘/线条。另外，还有一些内外阴影在右侧即压印区

If you look closely, there's a sharp border/line between the upper (brighter) and lower (darker) gradients. Also, there are inner and outer shadows for that embossed area on the right.

我知道如何在一个按钮设置渐变背景，但梯度是恒定的，没有中间的锐利线条。另外，我找不到影子创建和处理任何引用。

I know how to set gradient background on a button, but that gradient is constant, without that sharp line in the middle. Also, I couldn't find any reference on shadow creation and manipulation.

感谢。

推荐答案

我认为最好的办法是使用以处理这一问题。

I think the best way would be to approach the issue using

android.graphics

包。创建自己的位图，使用画图具有一种类型的着色器线性梯度的在图像的上部和另一个到下部画在画布。对于更复杂的效果，您可以通过XFER模式的两个位图组合使用模糊或浮雕掩蔽，结合不同的梯度类型（如线性和径向），产生很好的效果，或使用不同的颜色过滤器。

package. Create your own Bitmap, draw over Canvas using Paint that has one type of shader linear gradient to the upper part of the image and another one to the lower part. For more complex effects you may use blur or emboss masking, combine different gradient types (e.g. linear and radial), produce nice results via XFer mode combinations of two bitmaps, or apply different color filters.

我做了简单的例子：

使用下面的code。模糊加入涂抹边缘。

using the code below. Blur was added to smear the edges.

    Bitmap bmResult = Bitmap.createBitmap(buttonWidth, buttonHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bmResult); 
    Paint paint = new Paint();
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0xFF284560, 0xFF284060, TileMode.MIRROR));
    canvas.drawPaint(paint);
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0x55FFFFFF, 0x22FFFFFF, TileMode.CLAMP));
    paint.setMaskFilter(new BlurMaskFilter(3, BlurMaskFilter.Blur.NORMAL));
    canvas.drawRect(0, 0, bmResult.getWidth(), bmResult.getHeight()/2, paint);

这篇关于上的按钮渐变和阴影的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！