如何在视图顶部、底部和透明中心上提供渐变？

Question

我想为这个视图添加渐变，例如顶部10%的ImageView，中间是透明的70%，底部是30%的渐变。 我该如何实现这个效果？

- Wahdat Jan

---

看看这个，或许会有所帮助。 - Kapta

只需在ViewPager上添加渐变视图即可。 - ADM

@ADM，但我如何以百分比给出渐变..这是我的问题。 - Wahdat Jan

Answer 1

不只是使用带有渐变的 shape，而是使用一个包含2个gradient的layer-list，并为每个指定高度

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>

然后将它应用为您的ViewPager的background

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

- Yugansh Tyagi

---

为什么你要使用bottom = 690dp？ - Wahdat Jan

因为这是顶部渐变的底部填充。 我们希望渐变距离父视图底部有XXdp的填充。 您应该根据父视图的高度自定义该值。 - Yugansh Tyagi

我会检查并回复您。 - Wahdat Jan

Answer 2

top_gradient:

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

bottom_gradient:

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

- Sina

Answer 3

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>

这将具有透明的视图，但底部的渐变会较暗。

- chand mohd

---

在顶部怎么样？底部会有多少渐变？ - Wahdat Jan

这将取决于你应用颜色渐变的位置，例如：如果您看到上面给定的布局，约束布局具有固定高度100dp，在该布局内我添加了作为背景的颜色渐变。请注意，渐变的起始颜色为透明，结束颜色为黑色。 - chand mohd

看这张图片，我想在顶部使用10%的渐变和底部30%的渐变。 - Wahdat Jan

我会检查然后告诉你。 - Wahdat Jan

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

- Zack