首页
学习
活动
专区
圈层
工具
发布

纯血鸿蒙APP实战开发——边缘渐变实现

介绍本案例介绍组件内容边缘渐变的实现,通常用于提示长列表滑动到边缘的场景。效果预览图使用说明滑动列表的图片,当一侧边缘有渐变色时表示还没有滑动到边缘,该侧仍有内容可以浏览,当滑动到边缘时,渐变色消失。...app.integer.fadingedge_list_height')).overlay(this.fadingOverlay()).edgeEffect(EdgeEffect.None).scrollBar(BarState.Off)创建遮罩层自定义组件,实现见渐变边缘的效果...结合通用属性overlay和linearGradient实现渐变效果。....height($r('app.integer.fadingedge_list_height')) // TODO: 知识点: linearGradient 可以设置指定范围内的颜色渐变效果...OpenHarmony构建系统--GN与子系统、部件、模块详解13.ohos开机init启动流程14.鸿蒙版性能优化指南.......通过list组件的onReachStart和onReachEnd接口触发边缘渐变的改变

6710
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Android实现页面渐变效果

    Android使用Shape的gradient标签实现页面渐变效果 效果图 效果图一 效果图二 shape实现 效果图一实现 效果图二实现 shape的gradient标签属性作用 效果图 效果图一...标签属性作用 android:type="radial" //放射性渐变 android:type="linear" //线性渐变 android:type="sweep" //扫描式渐变 android...设为false时才有渐变效果 android:startColor="" //渐变的开始颜色 android:centerColor="" //渐变的中间颜色 android:endColor="" /.../渐变的结束颜色 android:centerX="" //渐变中心X的相当位置,范围为0~1 android:centerY="" //渐变中心Y的相当位置,范围为0~1 android:gradientRadius...="" //渐变的半径,只有当渐变类型为radial时才能使用 android:angle="180" //渐变角度,必须为45的倍数,0为从左到右,90为从上到下

    1.5K10

    android之自定义渐变颜色(二)

    在android之自定义渐变颜色(一)中我们已经学到如何在xml定义渐变颜色,今天我们来学学如何用代码定义渐变颜色 Android平台下实现渐变效果。...在android.graphics中我们可以找到有关Gradient字样的类,比如LinearGradient 线性渐变、RadialGradient径向渐变和 角度渐变SweepGradient 三种...,他们的基类为android.graphics.Shader。...一、LinearGradient线性渐变 在android平台中提供了两种重载方式来实例化该类分别为,他们的不同之处为参数中第一种方法可以用颜色数组,和位置来实现更细腻的过渡效果,比如颜色采样int[...刚才Android开发网已经讲到Gradient是基于Shader类,所以我们通过Paint的setShader方法来设置这个渐变,代码 如下: p.setShader(lg); canvas.drawCicle

    1.4K20

    【Android UI】Paint Gradient 渐变渲染 ② ( SweepGradient 梯度渐变渲染 | 围绕中心点绘制扫描渐变的着色器 | 多渐变色构造函数 | 雷达扫描效果 )

    文章目录 一、SweepGradient 梯度渐变渲染 1、设置多个渐变颜色的构造函数 2、设置两个渐变颜色的构造函数 二、完整代码示例 1、设置多个渐变颜色的构造函数 2、设置两个渐变颜色的构造函数...三、效果展示 一、SweepGradient 梯度渐变渲染 ---- Paint 的 SweepGradient 是 梯度渐变渲染 ; SweepGradient 是围绕中心点绘制扫描渐变的着色器。...SweepGradient 文档地址 : https://developer.android.google.cn/reference/android/graphics/SweepGradient 1、设置多个渐变颜色的构造函数...; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RectF; import...android.graphics.SweepGradient; import android.util.AttributeSet; import android.view.View; import

    62620

    【Android UI】Paint Gradient 渐变渲染 ③ ( RadialGradient 环形渐变渲染 | 在给定中心和半径的情况下绘制径向渐变的着色器 | 水波纹效果 )

    文章目录 一、RadialGradient 环形渐变渲染 1、设置多个渐变颜色的构造函数 2、设置两个渐变颜色的构造函数 二、完整代码示例 1、设置多个渐变颜色的构造函数 2、设置两个渐变颜色的构造函数...此渐变的圆半径。 colors: IntArray : 要分布在圆的中心和边缘之间的sRGB颜色此值不能为null。 stops: FloatArray? : 可能为空。...此渐变的圆半径。 colors: LongArray : 要在圆的中心和边缘之间分布的颜色此值不能为null。 stops: FloatArray? : 可能为空。有效值介于0.0f和1.0f之间。...此渐变的圆半径。 centerColor: Int : 圆中心的sRGB颜色。 edgeColor: Int : 圆边缘的sRGB颜色。...此渐变的圆半径。 centerColor: Long : 圆中心的颜色。 edgeColor: Long: 圆边缘的颜色。

    1K20

    【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR )

    文章目录 一、LinearGradient 线性渐变渲染 1、设置 2 个颜色的渐变 3、设置多个颜色的渐变 二、LinearGradient 线性渐变渲染重要参数分析 1、正常渲染 2、设置多个渐变颜色渲染...---- Paint 的 LinearGradient 是 线性渐变渲染 ; LinearGradient 文档地址 : https://developer.android.google.cn/reference.../android/graphics/LinearGradient LinearGradient 线性渐变渲染 使用时 , 直接使用构造函数创建即可 ; LinearGradient 提供了 4 个构造函数..., 分为 2 大类 , 分别是设置 2 个颜色渐变的构造函数 , 和设置 多个颜色渐变的构造函数 , 后者可以设置 2 个以上的颜色值 ; 1、设置 2 个颜色的渐变 设置 2 个颜色渐变的构造函数原型如下...{ /** * 画笔工具 * 线性渐变渲染 需要设置给该 画笔工具 */ private Paint mPaint; /** * 使用线性渐变绘制的区域

    3.9K20
    领券