[译]Multi-Gradient shape

本文介绍了一种使用Android中的ShapeDrawable和LinearGradient实现带有多种颜色渐变效果按钮的方法。通过自定义ShaderFactory来创建LinearGradient,并将其应用于Button组件作为背景,实现了不同颜色按指定比例分布的效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

原文链接:https://stackoverflow.com/questions/4381033/multi-gradient-shapes

需求:
给定n个颜色,每种颜色需要按照比例设置为view的背景。

解决:

Button theButton = (Button)findViewById(R.id.thebutton);
ShapeDrawable.ShaderFactory sf = new ShapeDrawable.ShaderFactory() {
    @Override
    public Shader resize(int width, int height) {
        LinearGradient lg = new LinearGradient(0, 0, 0, theButton.getHeight(),
            new int[] { 
                Color.LIGHT_GREEN, 
                Color.WHITE, 
                Color.MID_GREEN, 
                Color.DARK_GREEN }, //substitute the correct colors for these
            new float[] {
                0, 0.45f, 0.55f, 1 },
            Shader.TileMode.REPEAT);
         return lg;
    }
};
PaintDrawable p = new PaintDrawable();
p.setShape(new RectShape());
p.setShaderFactory(sf);
theButton.setBackground((Drawable)p);
1. 用户与权限管理模块 角色管理: 学生:查看实验室信息、预约设备、提交耗材申请、参与安全考核 教师:管理课题组预约、审批学生耗材申请、查看本课题组使用记录 管理员:设备全生命周期管理、审核预约、耗材采购与分发、安全检查 用户操作: 登录认证:统一身份认证(对接学号 / 工号系统,模拟实现),支持密码重置 信息管理:学生 / 教师维护个人信息(联系方式、所属院系),管理员管理所有用户 权限控制:不同角色仅可见对应功能(如学生不可删除设备信息) 2. 实验室与设备管理模块 实验室信息管理: 基础信息:实验室编号、名称、位置、容纳人数、开放时间、负责人 功能分类:按学科(计算机实验室 / 电子实验室 / 化学实验室)标记,关联可开展实验类型 状态展示:实时显示当前使用人数、设备运行状态(正常 / 故障) 设备管理: 设备档案:名称、型号、规格、购置日期、单价、生产厂家、存放位置、责任人 全生命周期管理: 入库登记:管理员录入新设备信息,生成唯一资产编号 维护记录:记录维修、校准、保养信息(时间、内容、执行人) 报废处理:登记报废原因、时间,更新设备状态为 "已报废" 设备查询:支持按名称、型号、状态多条件检索,显示设备当前可用情况 3. 预约与使用模块 预约管理: 预约规则:学生可预约未来 7 天内的设备 / 实验室,单次最长 4 小时(可设置) 预约流程:选择实验室→选择设备→选择时间段→提交申请(需填写实验目的) 审核机制:普通实验自动通过,高危实验(如化学实验)需教师审核 使用记录: 签到 / 签退:到达实验室后扫码签到,离开时签退,系统自动记录实际使用时长 使用登记:填写实验内容、设备运行情况(正常 / 异常),异常情况需详细描述 违规管理:迟到 15 分钟自动取消预约,多次违规限制预约权限 4. 耗材与安全管理模块 耗材管理: 耗材档案:名称、规格、数量、存放位置、
在 CSS 中,实现圆形渐变色可以使用 `radial-gradient` 函数。该函数允许定义一个径向渐变,其中的 `shape` 参数可以设置为 `circle` 来创建圆形渐变。以下是一个基本的实现示例: ```css .circle-gradient { background-image: radial-gradient(circle at center, #ff0000, #0000ff); } ``` 在这个示例中: - `circle` 指定了渐变的形状为圆形。 - `at center` 定义了渐变的中心点位置在元素的中心。 - `#ff0000` 是起始颜色(红色)。 - `#0000ff` 是结束颜色(蓝色)。 如果需要更复杂的渐变效果,可以添加更多的颜色停止点,如下所示: ```css .complex-circle-gradient { background-image: radial-gradient(circle at center, #ff0000, #ffff00 40%, #0000ff); } ``` 在这个例子中,渐变从红色开始,过渡到黄色(`#ffff00`)在 40% 的位置,最终过渡到蓝色。 ### 控制渐变大小 还可以通过指定 `size` 来控制渐变的大小,例如: ```css .sized-circle-gradient { background-image: radial-gradient(circle 50px at center, #ff0000, #0000ff); } ``` 这里 `circle 50px` 表示圆形渐变的半径为 50 像素。 ### 多色渐变 对于多色渐变,可以继续扩展颜色停止点: ```css .multi-color-gradient { background-image: radial-gradient(circle at center, red, orange 30%, yellow 60%, green); } ``` 这段代码会创建一个从红色渐变到橙色(在 30% 的位置),再到黄色(在 60% 的位置),最后到绿色的圆形渐变[^1]。 ### 重复渐变 如果希望渐变模式重复,可以使用 `repeating-radial-gradient`: ```css .repeating-gradient { background-image: repeating-radial-gradient(circle, powderblue, powderblue 8px, white 8px, white 16px); } ``` 这将创建一个以 `powderblue` 和 `white` 交替出现的重复圆形渐变模式[^2]。 ### 自定义渐变中心 渐变的中心点位置也可以自定义,例如设置为左上角: ```css .custom-position-gradient { background-image: radial-gradient(circle at left top, #ff0000, #0000ff); } ``` 此代码会创建一个从左上角开始的圆形渐变[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值