如何在顶部，底部和透明中心的视图上给出渐变？答案

【问题标题】：How to give gradient on view in at top , bottom and transparent center?如何在顶部，底部和透明中心的视图上给出渐变？
【发布时间】：2020-07-14 08:39:40
【问题描述】：

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

【问题讨论】：

看看this也许会有帮助
只需在ViewPager..上进行渐变查看。
@ADM 但我怎样才能以百分比给出梯度..这是我的问题

标签： java android xml gradient

【解决方案1】：

不要只使用 shape 和 gradient，而是使用 layer-list 和 2 gradients，并为每个 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

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

【讨论】：

为什么你使用bottom = 690dp？
因为这是顶部渐变的 bottom 的填充。我们希望渐变 XXdp 远离父级的底部。您应该根据您的父视图自定义该值height
将检查并回复您

【解决方案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>

【讨论】：

【解决方案3】：

渐变.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>

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

【讨论】：

顶部和底部有多少渐变
这将取决于您在何处应用渐变，例如：如果您看到上面给出的布局，约束布局在该布局内具有固定高度 100dp，我已添加渐变作为背景。看到渐变开始颜色是透明的，结束颜色是黑色的
看图片，我想要顶部 10% 的渐变和底部 30% 的渐变
会检查然后通知你

【解决方案4】：

你可以这样实现

渐变顶部.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>

【讨论】：