如何在android中制作渐变背景
Posted
技术标签:
【中文标题】如何在android中制作渐变背景【英文标题】:How to make gradient background in android 【发布时间】:2012-12-05 11:26:21 【问题描述】:我想创建渐变背景,渐变位于上半部分,下半部分为纯色,如下图所示:
我不能,因为centerColor
会展开以覆盖底部和顶部。
如何制作与第一张图片一样的背景?我怎样才能使不散开的小centerColor
?
这是上面背景按钮的 XML 代码。
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:startColor="#6586F0"
android:centerColor="#D6D6D6"
android:endColor="#4B6CD6"
android:angle="90"/>
<corners
android:radius="0dp"/>
</shape>
【问题讨论】:
谢谢我已经解决了。但如果你回答更多,我会很自豪。 ***.com/questions/6652547/… 试试这个webgradients.com 这里有一些精彩的例子 -->blog.jakelee.co.uk/… 【参考方案1】:视觉示例有助于解决此类问题。
样板
为了创建渐变,您在 res/drawable 中创建一个 xml 文件。我打电话给我的my_gradient_drawable.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
android:type="linear"
android:angle="0"
android:startColor="#f6ee19"
android:endColor="#115ede" />
</shape>
您将其设置为某个视图的背景。例如:
<View
android:layout_
android:layout_
android:background="@drawable/my_gradient_drawable"/>
type="线性"
将angle
设置为linear
类型。它必须是 45 度的倍数。
<gradient
android:type="linear"
android:angle="0"
android:startColor="#f6ee19"
android:endColor="#115ede" />
type="径向"
将gradientRadius
设置为radial
类型。使用%p
表示它是父级最小维度的百分比。
<gradient
android:type="radial"
android:gradientRadius="10%p"
android:startColor="#f6ee19"
android:endColor="#115ede" />
type="sweep"
我不知道为什么有人会使用扫描,但为了完整起见,我将其包括在内。我不知道如何改变角度,所以我只包括一张图片。
<gradient
android:type="sweep"
android:startColor="#f6ee19"
android:endColor="#115ede" />
居中
您还可以更改扫描或径向类型的中心。这些值是宽度和高度的分数。您也可以使用%p
表示法。
android:centerX="0.2"
android:centerY="0.7"
【讨论】:
完美解释。谢谢 当我需要帮助时,我仍然会参考这个答案。非常感谢您提供如此详细的答案。【参考方案2】:试试这个:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#555994"
android:endColor="#b5b6d2"
android:startColor="#555994"
android:type="linear" />
<corners
android:radius="0dp"/>
</shape>
【讨论】:
如果我想在线性布局的背景中放置一个渐变怎么办?? @Ankit 它将缩放以填充布局 @Ankit:你制作了一个可绘制的 .xml 文件,将上面的代码复制并粘贴到这个文件中,非常有趣。您可以通过使用 xml Layer-List 将顶部和底部“带”组合到一个文件中来创建这种“半渐变”外观。每个波段都是一个 xml 形状。
有关详细教程,请参阅之前关于 SO 的答案:Multi-gradient shapes。
【讨论】:
【参考方案4】:以下链接可能对您有所帮助http://angrytools.com/gradient/。这将在 android 中创建自定义渐变背景,就像在 Photoshop 中一样。
【讨论】:
我更喜欢CSS Matic这个,等别人来【参考方案5】:首先你需要创建一个gradient.xml如下
<shape>
<gradient android:angle="270" android:endColor="#181818" android:startColor="#616161" />
<stroke android: android:color="#343434" />
</shape>
那么你需要在布局的背景中提到上面的渐变。如下
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_
android:layout_
android:background="@drawable/gradient"
>
</LinearLayout>
【讨论】:
在我正在阅读的书中谈到将它们放入drawables文件夹中。每个文件夹都需要一个吗? 在可绘制文件夹上创建并将gradient.xml文件放入其中,您可以从那里访问它。无需创建多个文件夹。【参考方案6】:或者您可以在代码中使用您在 PSD 中可能想到的任何内容:
private void FillCustomGradient(View v)
final View view = v;
Drawable[] layers = new Drawable[1];
ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory()
@Override
public Shader resize(int width, int height)
LinearGradient lg = new LinearGradient(
0,
0,
0,
view.getHeight(),
new int[]
getResources().getColor(R.color.color1), // please input your color from resource for color-4
getResources().getColor(R.color.color2),
getResources().getColor(R.color.color3),
getResources().getColor(R.color.color4),
new float[] 0, 0.49f, 0.50f, 1 ,
Shader.TileMode.CLAMP);
return lg;
;
PaintDrawable p = new PaintDrawable();
p.setShape(new RectShape());
p.setShaderFactory(sf);
p.setCornerRadii(new float[] 5, 5, 5, 5, 0, 0, 0, 0 );
layers[0] = (Drawable) p;
LayerDrawable composite = new LayerDrawable(layers);
view.setBackgroundDrawable(composite);
【讨论】:
它应该比使用层列表更快【参考方案7】://Color.parseColor() method allow us to convert
// a hexadecimal color string to an integer value (int color)
int[] colors = Color.parseColor("#008000"),Color.parseColor("#ADFF2F");
//create a new gradient color
GradientDrawable gd = new GradientDrawable(
GradientDrawable.Orientation.TOP_BOTTOM, colors);
gd.setCornerRadius(0f);
//apply the button background to newly created drawable gradient
btn.setBackground(gd);
参考这里 https://android--code.blogspot.in/2015/01/android-button-gradient-color.html
【讨论】:
【参考方案8】:在可绘制文件夹中使用此代码。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="#3f5063" />
<corners
android:bottomLeftRadius="30dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="30dp"
android:topRightRadius="0dp" />
<padding
android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<gradient
android:angle="45"
android:centerColor="#015664"
android:endColor="#636969"
android:startColor="#2ea4e7" />
<stroke
android:
android:color="#000000" />
</shape>
【讨论】:
【参考方案9】:为什么不创建图像或 9 Patch 图像并使用它?
下面的链接有一个很好的指导:
http://android.amberfog.com/?p=247
如果您坚持使用 Shape,请尝试以下网站(选择左下角的 Android): http://angrytools.com/gradient/
我创建了一个与您在此链接中的渐变相似的渐变(不精确): http://angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269
【讨论】:
以上是关于如何在android中制作渐变背景的主要内容,如果未能解决你的问题,请参考以下文章