按钮上的渐变和阴影

时间:2011-02-03 21:03:17

标签: android android-widget

是否可以以编程方式,或通过xml配置(而不是通过9patch png)来实现Springpad小部件上看到的效果:

enter image description here

仔细观察,上部(较亮)和较低(较暗)渐变之间存在明显的边界/线。此外,右侧的浮雕区域还有内部和外部阴影。

我知道如何在按钮上设置渐变背景,但该渐变是恒定的,中间没有那条锐利的线条。另外,我找不到关于阴影创建和操纵的任何参考。

感谢。

2 个答案:

答案 0 :(得分:2)

我认为最好的方法是使用

解决问题
android.graphics

包。创建自己的位图,使用Paint绘制Canvas,其中一种着色器线性渐变到图像的上半部分,另一种到下半部分。对于更复杂的效果,您可以使用模糊或浮雕遮罩,组合不同的渐变类型(例如线性和径向),通过两个位图的XFer模式组合产生不错的结果,或应用不同的滤色器。

我做了一个简单的例子:

enter image description here

使用以下代码。添加模糊以涂抹边缘。

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

答案 1 :(得分:1)

我首先要说的是,我认为最有效的方法就是复制像你所链接的iPhone屏幕截图,就像创建一个像他们所做的那样的图像而不是用代码完成所有的绘图(不一定是9-patch也是如此,因为如果你制作整件,我看不到它需要拉伸的位置。)

我不太确定要做所有的阴影,这可能需要用一系列BlurMaskFilters来操作一些Paint对象。但是,可以使用图层列表以XML格式完成锐利的渐变。基本概念是将基本背景可绘制和部分透明的可叠加在一起叠加在一起。如果您可以定义整个图像的确切高度,则可以将叠加设置为该高度的50%。如果要拉伸整个过程,您可以将叠加层创建为具有“顶部”重力和5000级(0-10000比例的50%)的Clip Drawable。无论大小如何,这都会在上半部分绘制叠加层。

如果您需要应用第二个叠加层来创建另一个底部渐变,则可以对列表中的第三个层执行相同操作。但通常在底座上使用单个覆盖层来形成锐利边缘就足够了。

以下是我所描述的不同项目的参考链接,您可能已经看过: http://developer.android.com/guide/topics/resources/drawable-resource.html

希望有所帮助!