android - Android 上的倒角进度条
问题描述
是否可以在不编写我自己的进度条类的情况下对 Android 上的进度条进行倒角?
目前的样子:
想要的样子:
这就是我的drawable目前的样子:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@+id/border">
<shape android:shape="rectangle">
<padding android:bottom="2dp"
android:left="2dp"
android:right="2dp"
android:top="2dp" />
<corners android:radius="12dp" />
<solid android:color="#ffffff" />
</shape>
</item>
<item android:id="@android:id/background">
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#e0e0e0" />
</shape>
</item>
<item android:id="@android:id/secondaryProgress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#b3e5fc" />
</shape>
</clip>
</item>
<item android:id="@android:id/progress">
<clip>
<shape android:shape="rectangle">
<corners android:radius="10dp" />
<solid android:color="#7ed9f0" />
</shape>
</clip>
</item>
</layer-list>
解决方案
创建一个 VectorDrawablecustom_progressbar_shape.xml
作为资源文件。使用android:pathData
(查看此链接以了解有关VectorDrawable pathData的更多信息)创建所需的形状,例如我创建的类似于您提供的形状的三角形:
custom_progressbar_shape.xml
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/custom"
android:height="100dp"
android:width="100dp"
android:viewportHeight="100"
android:viewportWidth="60">
<group
android:name="triableGroup">
<path
android:name="triangle"
android:fillColor="#7ed9f0"
android:pathData="M 0,0 L 50,0 L 0,100 z" />
</group>
</vector>
将此 VectorDrawable 添加到给定的 Drawable 中,custom_progressbar_horizontal.xml
如下所示:
custom_progressbar_horizontal.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background"
android:drawable="@drawable/custom_progressbar_shape"
android:gravity="center_vertical|fill_horizontal">
...
</item>
...
</layer-list>
使用这个 Drawable 作为你的自定义 ProgressBar 样式styles.xml
:
<style name="MyProgressBarStyle" parent="@style/Widget.AppCompat.ProgressBar.Horizontal">
<item name="colorControlActivated">#7ed9f0</item>
<item name="colorControlHighlight">#b3e5fc</item>
<item name="android:progressDrawable">@drawable/custom_progressbar_horizontal</item>
<item name="android:minWidth">200dp</item>
</style>
然后将此样式设置为您ProgressBar
在布局 XML 文件中:
<ProgressBar
android:id="@+id/MyProgressBar"
android:padding="10dp"
android:layout_margin="10dp"
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="@style/MyProgressBarStyle"
android:progress="30"
android:secondaryProgress="60"/>
推荐阅读
- r - 如何查看 R 中的 ... 省略号是否包含某个参数?
- node.js - 在节点 js 中定位一个 xml 节点
- html - 如何在左侧创建带有徽标的页脚
- javascript - 在对象内使用方法参数时的 Javascript 行为
- java - 无法加载领域“myrealm”:weblogic.security.service.SecurityServiceException:java.lang.NoClassDefFoundError:org/apache/log4j/Logger
- java - 为什么在 for 循环中添加条件会显着提高速度
- python - 如何将 Flask REST API 连接到 HTML 页面
- php - 如何向用户显示他选择的标签而不是抽象值?
- mysql - 将 MySQL 语法转换为 PostgreSQL
- r - 在 R 的 quantmod 包中使用 SMA() 函数时出错