Android LinearLayout 渐变背景

Question

我在将渐变背景应用于 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，它工作得很好。我在这里遗漏了一些明显的东西吗？

Answer 1

好吧，我已经设法使用选择器解决了这个问题。请参阅下面的代码：

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>

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

Answer 2

也可以有第三种颜色（中心）。以及各种不同的形状。

例如在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"

也可以使用以下方法进行旋转：

角度=“0”

给你一条垂直

线

角度=“90”

给你一条水平线

可能的角度有：

0、90、180、270。

还有几种不同的形状：

android:shape="矩形"

圆形：

android:shape="椭圆形"

可能还有更多。

Answer 3

在 XML Drawable 文件中：

<?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>

Answer 4

尝试删除 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>

Answer 5

使用 Kotlin，您只需 2 行即可完成此操作

更改数组中的颜色值

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

                   //Set Gradient
                   linearLayout.setBackground(gradientDrawable);

Result

< img src="https://i.sstatic.net/X7LOx.png" alt="在此处输入图像描述">

Answer 6

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

Answer 7

我会检查你的渐变颜色的 Alpha 通道。对我来说，当我测试我的代码时，我在颜色上设置了错误的 Alpha 通道，并且它对我不起作用。一旦我设置了 Alpha 通道，一切就正常了！

Answer 8

我不知道这是否会对任何人有帮助，但我的问题是我试图将渐变设置为 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% 确定为什么这不起作用，但现在我更改了它并将可绘制对象放在 ImageView 父级的“背景”属性中，在我的例子中，这是一个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">

Answer 9

您可以使用自定义视图来做到这一点。通过这个解决方案，就完成了项目中所有颜色的渐变形状：

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< /a>

implementation 'com.mikhaellopez:gradientview:1.1.0'

Answer 10

<?xml version="1.0" encoding="utf-8"?>

<gradient
    android:angle="90"
    android:startColor="@color/colorPrimary"
    android:endColor="@color/colorPrimary"
    android:centerColor="@color/white"
    android:type="linear"/>

<corners android:bottomRightRadius="10dp"
    android:bottomLeftRadius="10dp"
    android:topRightRadius="10dp"
    android:topLeftRadius="10dp"/>