按钮上的渐变和阴影

Question

是否可以通过编程或xml配置（而不是通过9patch png）来实现Springpad小部件中看到的效果：

如果您仔细观察，上部（较亮）和下部（较暗）渐变之间有一个锐利的边界/线。此外，右侧凸起区域有内外阴影。

我知道如何在按钮上设置渐变背景，但该渐变是恒定的，没有中间的锐利线。此外，我找不到任何有关阴影创建和操作的参考资料。

谢谢。

- mblenton

---

我不确定链接截图所使用的技术是否相同，但是你可以通过编程创建复杂的线性渐变：http://developer.android.com/reference/android/graphics/LinearGradient.html#LinearGradient(float,%20float,%20float,%20float,%20int[],%20float[],%20android.graphics.Shader.TileMode) - bigstones

Answer 1

我认为最好的方法是使用以下方式来解决这个问题：

android.graphics

包。创建自己的位图，使用具有一种类型的着色器线性渐变的画笔在画布上绘制，以覆盖图像的上部和下部使用另一种类型的渐变。对于更复杂的效果，您可以使用模糊或浮雕遮罩，组合不同的渐变类型（例如线性和径向），通过两个位图的XFer模式组合产生漂亮的结果，或应用不同的颜色过滤器。

我制作了一个简单的示例：

使用下面的代码。添加了模糊来涂抹边缘。

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

- Zelimir

Answer 2

首先，我要说的是，我认为最有效的方法来复制类似于你链接的iPhone截图的东西是创建像他们一样的图像，而不是在代码中进行所有绘制（也不必是9-patch，因为如果你创建整个部分，我看不到它需要拉伸的地方）。

我不太确定是否需要做所有的阴影，这可能需要使用一系列BlurMaskFilters来操作一些Paint对象。但是，可以使用Layer List在XML中完成锐利的渐变。基本概念是将基础背景可绘制和部分透明的覆盖可绘制放在一起，层叠在彼此之上。如果您可以定义整个图像的确切高度，则可以将覆盖设置为该高度的50％。如果整个图像都要拉伸，您可以将覆盖创建为剪辑可绘制对象，重力为“顶部”，级别为5000（0-10000比例的50％）。这将始终在顶半部绘制覆盖，无论大小如何。

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

这里是我描述的不同项目的参考链接，你可能已经看过了： http://developer.android.com/guide/topics/resources/drawable-resource.html

希望能有所帮助！

- devunwired

---

谢谢你的回答，在阅读了这些回复之后，我也相信最好的方法是按照你所解释的那样创建一个图像。注：该截图来自安卓设备。 - mblenton

抱歉，上面的 iPhone 页面控件让我分心了 ;) - devunwired