Android LinearLayout渐变背景


246

我在将渐变背景应用于LinearLayout时遇到问题。

根据我所读的内容,这应该相对简单,但似乎不起作用。作为参考,我正在开发2.1-update1。

header_bg.xml:

<?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:startColor="#FFFF0000"
        android:endColor="#FF00FF00"
        android:type="linear"/>
</shape>

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/header_bg">
</LinearLayout>

如果我将@ drawable / header_bg更改为一种颜色-例如#FF0000,则可以正常工作。我在这里错过明显的东西吗?


android:backgroundTint android:backgroundTintMode stackoverflow.com/a/43341289/3209132
Pramod Garg

Answers:


406

好的,我设法使用选择器解决了这个问题。请参见下面的代码:

main_header.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="50dip"
    android:orientation="horizontal"
    android:background="@drawable/main_header_selector">
</LinearLayout>

main_header_selector.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape>
        <gradient
            android:angle="90"
            android:startColor="#FFFF0000"
            android:endColor="#FF00FF00"
            android:type="linear" />
    </shape>
</item>
</selector>

希望这可以帮助遇到相同问题的人。


5
大。仅供参考,请参阅其他梯度类型:developer.android.com/reference/android/graphics/drawable/...
Bamaco

86

也可以使用第三种颜色(中间)。以及各种形状。

例如在drawable / gradient.xml中:

<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#000000"
        android:centerColor="#5b5b5b"
        android:endColor="#000000"
        android:angle="0" />
</shape>

这给了您黑色-灰色-黑色(从左到右),这是我最喜欢的深色背景atm。

请记住在您的布局xml中添加gradient.xml作为背景:

android:background="@drawable/gradient"

也可以通过以下方式旋转:

angle =“ 0”

给你一条垂直线

angle =“ 90”

给你一条水平线

可能的角度是:

0、90、180、270。

也有几种不同的形状:

android:shape =“ rectangle”

圆形:

android:shape =“ oval”

可能还有更多。

希望能有所帮助,加油!


40

在XML可绘制文件中:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:angle="90"
                android:endColor="#9b0493"
                android:startColor="#38068f"
                android:type="linear" />
        </shape>
    </item>
</selector>

在您的布局文件中:android:background =“ @ drawable / gradient_background”

  <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/gradient_background"
        android:orientation="vertical"
        android:padding="20dp">
        .....

</LinearLayout>

在此处输入图片说明


嗨,您是如何实现透明状态栏的?如果我在styles.xml中将其设置为透明,它将变为黑色..
kironet

21

尝试删除android:gradientRadius =“ 90”。这是一个对我有用的东西:

<shape 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
>
    <gradient
        android:startColor="@color/purple"
        android:endColor="@color/pink"
        android:angle="270" />
</shape>

不幸的是,这对我不起作用。我已经用现在的内容更新了原始问题。
创世纪

当您在布局中添加小部件(例如TextView)时,它仍然不起作用吗?
Vincent Mimoun-Prat

正确-布局内部的TextView仍然无法使用。同样,如果我应用静态颜色而不是可绘制对象,则效果很好。我注意到的一件事是,我可以(有时)使用选择器来使其工作,但根据我的理解,这不是必需的。
创世纪

6

我的问题是.xml扩展名未添加到新创建的XML文件的文件名中。添加.xml扩展名解决了我的问题。


3

使用Kotlin,您只需2行即可完成

更改数组中的颜色值

                  val gradientDrawable = GradientDrawable(
                        GradientDrawable.Orientation.TOP_BOTTOM,
                        intArrayOf(Color.parseColor("#008000"),
                                   Color.parseColor("#ADFF2F"))
                    );
                    gradientDrawable.cornerRadius = 0f;

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

结果

在此处输入图片说明


1

我不知道这是否对任何人都有帮助,但是我的问题是我试图将渐变设置为ImageView的“ src”属性,如下所示:

<ImageView 
    android:id="@+id/imgToast"
    android:layout_width="wrap_content"
    android:layout_height="60dp"
    android:src="@drawable/toast_bg"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"/>

不能100%确认为什么不起作用,但是现在我更改了它,并将drawable放在ImageView父对象的“ background”属性中,在我的情况下为RelativeLayout,如下所示:(此方法成功完成了)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:id="@+id/custom_toast_layout_id"
    android:layout_height="match_parent"
    android:background="@drawable/toast_bg">

0

我会在您的渐变颜色上检查您的Alpha通道。对我来说,当我测试代码时,我在颜色上设置了Alpha通道错误,因此对我不起作用。一旦我设置了Alpha通道,它就可以正常工作!


0

您可以使用自定义视图来执行此操作。使用此解决方案,可以完成项目中所有颜色的渐变形状:

class GradientView(context: Context, attrs: AttributeSet) : View(context, attrs) {

    // Properties
    private val paint: Paint = Paint()
    private val rect = Rect()

    //region Attributes
    var start: Int = Color.WHITE
    var end: Int = Color.WHITE
    //endregion

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        // Update Size
        val usableWidth = width - (paddingLeft + paddingRight)
        val usableHeight = height - (paddingTop + paddingBottom)
        rect.right = usableWidth
        rect.bottom = usableHeight
        // Update Color
        paint.shader = LinearGradient(0f, 0f, width.toFloat(), 0f,
                start, end, Shader.TileMode.CLAMP)
        // ReDraw
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        canvas.drawRect(rect, paint)
    }

}

我还使用此自定义视图创建了一个开源项目GradientView

https://github.com/lopspower/GradientView

implementation 'com.mikhaellopez:gradientview:1.1.0'

看起来很有趣。这可用于更高版本的Android吗?我对其他答案有疑问,
trees_are_great
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.