自定义进度条学习

之前一直用到进度条的学习 ,习惯百度 但是时间一长,再次写发现和没有写过一样,所以在今天再次写的时候,留下一点痕迹

网上写的自定义进度条很多  但是呢看别人的真的是不如自己理解的


自定义进度条的样式  写在drawable下

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >


    <!-- 进度条整体是由三部分组成 -->
    <!-- 第一部分是包含进度的外形 ,corners定义的是圆角 -->
    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="22dip" />
            <solid android:color="#5B3301" />
            <stroke
                android:width="3dp"
                android:color="#FED333" />
        </shape>
    </item>
    <!-- 第二部分,第一次进度  也就是所谓的缓冲进度 这里没有可以不写 -->
    
    <!-- 第三部分 实际进度 也需要定义形状否则就是方块   默认情况下这三部分大小是一样的,可以通过item里面的属性做间距(距离外边的间距)  -->
    <item
        android:id="@android:id/progress"
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <clip>
            <shape>
                <corners android:radius="16dip" />
                <solid android:color="#FED333" />
            </shape>
        </clip>
    </item>


</layer-list>


这就写完了进度条的样式


 <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="155dp"
        android:layout_height="44dp"
        android:max="100"
        android:progress="80"
        android:progressDrawable="@drawable/process_bar" />


这样就完成了进度条的简单自定义,最终要的是明白上面layer-list里面三部分分别是干什么的这样就可以根据需要自己写了

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 VS Code 中,进度条通常是通过 Progress API 实现的。默认的进度条只是一个简单的矩形,而且不能修改其颜色和大小。不过,你可以通过自定义插件来实现自定义进度条。下面是一个简单的例子: 首先,你需要创建一个 VS Code 插件项目,命名为 `my-progress-bar`。在 `src` 目录下,创建一个 `extension.ts` 文件,并添加以下代码: ```typescript import * as vscode from 'vscode'; export function activate(context: vscode.ExtensionContext) { // 注册一个命令,当用户运行该命令时,调用 showProgressBar 函数 let disposable = vscode.commands.registerCommand('my-progress-bar.showProgressBar', showProgressBar); context.subscriptions.push(disposable); } async function showProgressBar() { // 创建一个自定义进度条,宽度为 200px,高度为 20px,颜色为蓝色 const progressBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Left, 0); progressBar.text = '$(sync~spin) Working...'; progressBar.color = 'blue'; progressBar.show(); // 模拟一个异步操作,完成后将进度条隐藏 await new Promise(resolve => setTimeout(resolve, 5000)); progressBar.hide(); } ``` 上述代码中,`showProgressBar` 函数通过 `createStatusBarItem` 方法创建了一个自定义进度条,并设置了它的颜色、文本等属性。当用户运行 `my-progress-bar.showProgressBar` 命令时,该函数将被调用,进度条将被显示出来。在模拟的异步操作完成后,进度条将被隐藏。 接下来,你需要在 `package.json` 文件中添加以下配置,以注册命令和插件: ```json { "name": "my-progress-bar", "displayName": "My Progress Bar", "description": "A custom progress bar for VS Code.", "version": "0.0.1", "author": { "name": "Your Name", "email": "your.email@example.com" }, "categories": [ "Other" ], "activationEvents": [ "onCommand:my-progress-bar.showProgressBar" ], "main": "./out/extension.js", "contributes": { "commands": [ { "command": "my-progress-bar.showProgressBar", "title": "Show Progress Bar" } ] }, "engines": { "vscode": "^1.60.0" } } ``` 在上述配置中,`contributes.commands` 属性用于注册命令,`activationEvents` 属性用于指定插件被激活的事件。当用户运行 `my-progress-bar.showProgressBar` 命令时,插件将被激活,并执行 `activate` 函数。 最后,你可以使用 VS Code 的打包命令将插件打包成 VSIX 文件,然后在 VS Code 中安装该插件。运行 `my-progress-bar.showProgressBar` 命令时,你将看到一个自定义进度条。 总结:通过编写自定义插件,你可以实现自定义进度条,并且可以修改进度条的颜色、大小等属性。不过,这需要你有一定的插件开发经验,因为需要涉及到一些 VS Code 的 API 和开发流程。如果你感兴趣,可以参考 VS Code 的官方文档来学习插件开发。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值