Android渐变遮罩

Android Studio版本： Android Studio Chipmunk

这篇文章介绍如何在Android中实现这样的渐变遮罩

依赖项

1.CardView

在app下的build.gradle中添加依赖，并且完成编译

dependencies {implementation 'androidx.cardview:cardview:1.0.0'
}

2.两张svg图片，这里选择的是灯笼和烟花，在iconfont上可以轻易下载到

实现思路

先来看一下不加遮罩的效果图，其实看起来还不错，只是图标有点喧宾夺主的感觉

带渐变遮罩的卡片结构分为4层，如下图所示

这里主要看渐变遮罩层，引用了@drawable/shape_red_gradien，用渐变效果作为该层背景色

<LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/shape_red_gradient"/>

shape_red_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><gradientandroid:angle="135"android:startColor="#EF6572"android:centerColor="#88EF6572"android:endColor="#00EF6572" /><corners android:radius="6dp" />
</shape>

shape_yellow_gradient.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle"><gradientandroid:angle="135"android:startColor="#F4D576"android:centerColor="#88F4D576"android:endColor="#00F4D576" /><corners android:radius="6dp" />
</shape>

这两个资源文件都用到了gradient元素，可以用angle设置角度，还可以设置3个渐变色，endColor都是设置的100%透明

注意：angle只在线性渐变下使用，而且有效值只有0, 45, 90, 135, 180, 225, 270, 315这几个，也就是0~315之间45的倍数，设置为其他值不生效，相当于设置的270度。如果需要其他角度的渐变，就需要利用自定义视图来实现了

源码注释：Angle of the gradient, used only with linear gradient. Must be a multiple of 45 in the range [0, 315].

完整的Activity文件gradient_mask_activity.xml代码如下

<?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"xmlns:app="http://schemas.android.com/apk/res-auto"><androidx.cardview.widget.CardViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="12dp"android:layout_marginLeft="12dp"android:layout_marginRight="12dp"android:layout_marginBottom="12dp"app:cardCornerRadius="6dp"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:padding="15dp"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:textSize="20dp"android:textStyle="bold"android:layout_marginBottom="20dp"android:text="国庆7天乐" /><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="horizontal"><!-- 卡片1 --><androidx.cardview.widget.CardViewandroid:layout_width="0dp"android:layout_weight="1"android:layout_height="wrap_content"android:layout_marginRight="15dp"app:cardBackgroundColor="#E12D38"app:cardCornerRadius="6dp"><!-- 图标 --><LinearLayoutandroid:layout_width="42dp"android:layout_height="42dp"android:layout_marginTop="3dp"android:layout_marginRight="3dp"android:layout_gravity="right"android:background="@drawable/ic_lantern_icon"></LinearLayout><!-- 图层蒙板 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/shape_red_gradient"/><!-- 文字层 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="15dp"android:layout_marginBottom="15dp"android:layout_marginLeft="15dp"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="18dp"android:textColor="@color/white"android:text="灯笼高高挂" /><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="12dp"android:textColor="@color/white"android:text="石榴圆，枝枝灯笼展" /></LinearLayout></androidx.cardview.widget.CardView><!-- 卡片2 --><androidx.cardview.widget.CardViewandroid:layout_width="0dp"android:layout_weight="1"android:layout_height="wrap_content"app:cardBackgroundColor="#FED338"app:cardCornerRadius="6dp"><!-- 图标 --><LinearLayoutandroid:layout_width="42dp"android:layout_height="42sp"android:layout_marginTop="3dp"android:layout_marginRight="3dp"android:layout_gravity="right"android:background="@drawable/ic_fireworks_icon"></LinearLayout><!-- 图层蒙板 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:background="@drawable/shape_yellow_gradient"/><!-- 文字层 --><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="15dp"android:layout_marginBottom="15dp"android:layout_marginLeft="15dp"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="wrap_content"android:textSize="18dp"android:textColor="@color/white"android:text="烟花阵阵香" /><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_marginTop="12dp"android:textColor="@color/white"android:text="烟花雾，处处蝴蝶舞" /></LinearLayout></androidx.cardview.widget.CardView></LinearLayout></LinearLayout></androidx.cardview.widget.CardView>
</LinearLayout>

Android渐变遮罩相关推荐

android 渐变蒙版_Android实现遮罩层（蒙板）效果
Android的遮罩效果就是把一张图片盖在另一张图片的上面,通过控制任意一张图片的显示百分比实现遮罩效果.下面我使用两张一样的图片来实现一个类似于 Android 的progressbar 的填充效果 ...
div渐变遮罩效果：纵向和水平反向渐变遮罩效果，让戛然而止的页面多一丝丝淡淡的过渡效果，温柔中透露着一缕缕优雅...
-webkit-mask-image: linear-gradient(transparent, white 20px, white calc(100% - 20px),transparent ...
驾驶舱地图渐变遮罩层 CSS
驾驶舱地图渐变遮罩层 <div class="mask"><div class="left-mask"></div>< ...
Unity自定义UI组件(七)渐变工具、渐变色图片、渐变遮罩
欢迎阅读Unity自定义UI组件(七)渐变工具.渐变色图片.渐变遮罩前言在Unity中UGUI只为我们提供了最为基础的Image和RawImage两种可展示图片的组件,但是这两种组件要展示一些特殊 ...
Flash实现透明度渐变遮罩的方法
下面介绍两个方法并附上源文件和演示文件. 一.AS法:这个简单,就一个mc.setMask(mask_mc) 就搞定了,但mask_mc必须使用[模糊]滤镜,而mc一定得是位图的元件! 见演示地址:h ...
前端原生 CSS 跑马灯效果，无限轮播（横竖版本，带渐变遮罩，简单实用）
一.横版跑马灯 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
html 图片添加遮罩层,jQuery图片添加渐变遮罩层插件
这是一款jQuery图片添加渐变遮罩层插件.通过该插件,可以为一副背景图片添加指定的渐变遮罩层.该插件支持CSS mix-blend-mode混合模式. 使用方法在页面中引入jquery和jquer ...
android drawerlayout 遮罩层白色,DrawerLayout放在Toolbar的下方导致NavigationView出现与状态栏等高的遮...
目标是想让Toolbar不被DrawerLayout的NavigationView遮盖,一直显示. 以下代码运行于Android Studio 2.1.2, 手机5.1.1 1.按照Android S ...
android 渐变展示启动屏
启动界面Splash Screen在应用程序是很常用的,往往在启动界面中显示产品Logo.公司Logo或者开发者信息,如果应用程序启动时间比较长,那么启动界面就是一个很好的东西,可以让用户耐心等待这段 ...

Android渐变遮罩

依赖项

实现思路

Android渐变遮罩相关推荐

最新文章

热门文章