不只是使用带有渐变的 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
试试这个,希望能解决你的问题
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>
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>
这将具有透明的视图,但底部的渐变会较暗。
你可以像这样实现它
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>