【问题标题】:Gradients and shadows on buttons按钮上的渐变和阴影
【发布时间】:2011-02-03 21:03:17
【问题描述】:

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

如果您仔细观察,上(更亮)和下(更暗)渐变之间有一条清晰的边界/线。此外,右侧的浮雕区域还有内阴影和外阴影。

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

谢谢。

【问题讨论】:

标签: android android-widget


【解决方案1】:

我认为最好的方法是使用

来解决这个问题
android.graphics

包。创建自己的位图,使用 Paint 在 Canvas 上绘制,其中一种着色器线性渐变到图像的上部,另一种到图像的下部。对于更复杂的效果,您可以使用模糊或浮雕蒙版、组合不同的渐变类型(例如线性和径向)、通过两个位图的 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);

【讨论】:

    【解决方案2】:

    我首先要说的是,我认为复制您链接的 iPhone 屏幕截图之类的最有效方法是像他们一样创建图像,而不是在代码中进行所有绘图(不必是9 补丁,因为我看不出如果你创建整块它需要拉伸)。

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

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

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

    希望有帮助!

    【讨论】:

    • 感谢您的回答,在阅读了这些回复后,我也相信最好的方法是创建图像,正如您所解释的。注意:该屏幕截图来自 Android 设备。
    • 抱歉,它上面的 iPhone Page Control 小部件让我失望了 ;)
    猜你喜欢
    • 1970-01-01
    • 2017-07-25
    • 2012-03-26
    • 2013-04-24
    • 1970-01-01
    • 2011-11-11
    • 2020-05-01
    • 1970-01-01
    • 2017-11-18
    相关资源
    最近更新 更多