代码之家 › 专栏 › 技术社区 › Wahdat Jan

如何在图像视图上设置渐变?

gradient xml android java

-1

Wahdat Jan · 技术社区 · 4 年前

我想给这个视图添加渐变,比如顶部图像视图的10%左右,透明中心,底部有70%和30%的渐变。我怎样才能做到这一点

0 回复 | 直到 4 年前

Yugansh Tyagi 4 年前

而不是仅仅使用 shape 用一个 gradient 使用a layer-list 与2 gradients 每个都有指定的高度

API 21

这个 android:bottom , android:top 属性表示图层列表的填充,更改这些属性可以更改要显示的渐变百分比

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item
    android:bottom="690dp"
    android:gravity="top">
    <shape android:shape="rectangle" >
        <gradient
            android:angle="270"
            android:type="linear"
            android:endColor="@android:color/transparent"
            android:startColor="#000000" />
    </shape>
</item>

<item
    android:top="610dp"
    android:gravity="bottom">
    <shape android:shape="rectangle" >
        <gradient
            android:angle="270"
            android:type="linear"
            android:endColor="#000000"
            android:startColor="@android:color/transparent" />
    </shape>
</item>

如果你 minSDK 如果是23+,则更容易指定 height 对于每种图层类型

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

<item
    android:height="40dp"
    android:gravity="top">
    <shape android:shape="rectangle">
        <gradient
            android:angle="270"
            android:endColor="@android:color/transparent"
            android:startColor="#000000"
            android:type="linear" />
    </shape>
</item>

<item
    android:height="70dp"
    android:gravity="bottom">
    <shape android:shape="rectangle">
        <gradient
            android:angle="270"
            android:endColor="#000000"
            android:startColor="@android:color/transparent"
            android:type="linear" />
    </shape>
</item>

然后,只需将其作为 background 你的 ViewPager

试试这个,希望这能解决你的问题

Sina 4 年前

top_gradiant:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="270"
        android:centerColor="@android:color/transparent"
        android:centerY="0.1"
        android:startColor="#000000" />
</shape>

底部梯度:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:centerColor="@android:color/transparent"
        android:centerY="0.3"
        android:startColor="#000000" />
</shape>

背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/bg" />
    <item android:drawable="@drawable/bg2" />
</layer-list>

chand mohd 4 年前

gradient.xml

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:startColor="#00000000"
        android:centerColor="#00000000"
        android:endColor="@color/primaryTextColor"
        android:angle="270"
        android:centerY="0.7"
        android:dither="true"
        android:type="linear"
        />
</shape>

layout.xml:

    <androidx.constraintlayout.widget.ConstraintLayout
            android:id="@+id/bottomConstraint"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:layout_gravity="bottom"
            android:background="@drawable/gradient">

            <androidx.appcompat.widget.AppCompatTextView
                android:id="@+id/tvTitle"
                style="@style/TextStyleNormal.Large.Bold.White"
                android:paddingHorizontal="@dimen/padding_large"
                android:paddingTop="@dimen/padding_medium"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintBottom_toBottomOf="@+id/bottomConstraint"
                app:layout_constraintTop_toTopOf="@+id/bottomConstraint"
                tools:text="System Solution to Online Education:
Look To Northeast communal." />
        </androidx.constraintlayout.widget.ConstraintLayout>

这将具有透明视图,但底部的渐变将是黑暗的。

ibrozz 4 年前

你可以这样实现它

gradient_top.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#2B3135"
    android:centerColor="#2B3135"
    android:endColor="@android:color/transparent"
    android:angle="270"
    android:centerY="0.1"
    />
</shape>

gradient_bottom.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient
    android:startColor="#2B3135"
    android:centerColor="#2B3135"
    android:endColor="@android:color/transparent"
    android:angle="90"
    android:centerY="0.3"
    />
</shape>

layout.xml

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="centerCrop"
        android:src="@drawable/ib"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:background="@drawable/gradient_top"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/gradient_bottom"/>

</RelativeLayout>