如何在android中制作渐变背景
我想创build如图中的渐变背景。 但它不能因为中心而展开覆盖底部和顶部。
我怎样才能使背景如下图所示? 或者我怎样才能让小ceterColor不扩散? 你有什么想法吗?
这是我想要的背景。
这是我做的背景。
这是上面的背景button的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>
你可以通过使用一个xml 图层列表来创build这个“半梯度”的外观来将顶部和底部的“波段”合并成一个文件。 每个乐队是一个xml形状。
在SO上看到这个以前的答案详细的教程: 多梯度形状 。
试试这个:
<?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>
下面的链接可能会帮助你http://angrytools.com/gradient/ 。这将在android中创build自定义渐变背景,就像在Photoshop中。
视觉例子有助于解决这类问题。
样板
为了创build一个渐变,你可以在res / drawable中创build一个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_width="200dp" android:layout_height="100dp" android:background="@drawable/my_gradient_drawable"/>
types=“线性”
设置linear
types的angle
。 它必须是45度的倍数。
<gradient android:type="linear" android:angle="0" android:startColor="#f6ee19" android:endColor="#115ede" />
types=“径向”
设置radial
types的gradientRadius
。 使用%p
表示它是父级的最小维度的百分比。
<gradient android:type="radial" android:gradientRadius="10%p" android:startColor="#f6ee19" android:endColor="#115ede" />
types=“扫”
我不知道为什么有人会使用扫描,但我包括它的完整性。 我不知道如何改变angular度,所以我只包括一个图像。
<gradient android:type="sweep" android:startColor="#f6ee19" android:endColor="#115ede" />
中央
您也可以更改扫描或径向types的中心。 这些值是宽度和高度的分数。 您也可以使用%p
表示法。
android:centerX="0.2" android:centerY="0.7"
首先,您需要按如下所示创build一个gradient.xml文件
<shape> <gradient android:angle="270" android:endColor="#181818" android:startColor="#616161" /> <stroke android:width="1dp" android:color="#343434" /> </shape>
那么你需要在layout的背景中提到上面的渐变
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="@drawable/gradient" > </LinearLayout>
或者你可以在代码中使用任何你可能会想到的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); }
为什么不创build一个图像或9补丁图像,并使用它?
下面的链接有一个很好的指导如何做到这一点:
http://android.amberfog.com/?p=247
如果您坚持使用Shape,请尝试下面的网站(select左下angular的Android): http : //angrytools.com/gradient/
我已经创build了一个类似的渐变(不完全),你有这个链接: http : //angrytools.com/gradient/?0_6586f0,54_4B6CD6,2_D6D6D6&0_100,100_100&l_269
//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