100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > Android踩坑日记:自定义水平和圆形ProgressBar样式

Android踩坑日记:自定义水平和圆形ProgressBar样式

时间:2021-04-10 16:33:30

相关推荐

Android踩坑日记:自定义水平和圆形ProgressBar样式

自定义水平和圆形ProgressBar样式

1.自定义水平ProgressBar样式

ProgressBar分为两种,我们能明确看到进度,不确定的就是不清楚、不确定一个操作需要多长时间来完成,这个时候就需要用的不确定的ProgressBar了。ProgressBar(Horizontal才有,无进度的没有)有两个进度,一个是android:progress,另一个是android:secondaryProgress。后者主要是为缓存需要所涉及的,比如在看网络视频时候都会有一个缓存的进度条以及还要一个播放的进度,在这里缓存的进度就可以是android:secondaryProgress,而播放进度就是android:progress,有了secondProgress,可以很方便定制ProgressBar。

1.ProgressBar的样式设定其实有两种方式,在API文档中说明的方式如下:

Widget.ProgressBar.HorizontalWidget.ProgressBar.SmallWidget.ProgressBar.LargeWidget.ProgressBar.InverseWidget.ProgressBar.Small.InverseWidget.ProgressBar.Large.Inverse

使用的时候可以这样:style=”@android:style/Widget.ProgressBar.Horizontal”

另外还有一种方式就是使用系统的attr,下面的方式是系统的style:

style=”?android:attr/progressBarStyle” style=”?android:attr/progressBarStyleHorizontal” style=”?android:attr/progressBarStyleInverse” style=”?android:attr/progressBarStyleLarge” style=”?android:attr/progressBarStyleLargeInverse” style=”?android:attr/progressBarStyleSmall” style=”?android:attr/progressBarStyleSmallInverse” style=”?android:attr/progressBarStyleSmallTitle”

比如:

<ProgressBar android:id="@+id/progressBar"style="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="match_parent"android:layout_height="wrap_content" />

ProgressBarandroid:id="@+id/progressBar"style="?android:attr/progressBarStyleHorizontal"android:layout_width="match_parent"android:layout_height="wrap_content" />

我们去看看style=”@android:style/Widget.ProgressBar.Horizontal”的源码

<style name="Widget.ProgressBar.Horizontal"><item name="indeterminateOnly">false</item><!-- 进度条的背景,progress ,secondaryProgress 的颜色--><item name="progressDrawable">@drawable/progress_horizontal</item><item name="indeterminateDrawable">@drawable/progress_indeterminate_horizontal</item><item name="minHeight">20dip</item><item name="maxHeight">20dip</item><item name="mirrorForRtl">true</item></style>

下面看@android:drawable/progress_horizontal的源码

<?xml version="1.0" encoding="utf-8"?><!-- Copyright (C) The Android Open Source ProjectLicensed under the Apache License, Version 2.0 (the "License");you may not use this file except in compliance with the License.You may obtain a copy of the License at/licenses/LICENSE-2.0Unless required by applicable law or agreed to in writing, softwaredistributed under the License is distributed on an "AS IS" BASIS,WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.See the License for the specific language governing permissions andlimitations under the License.--><layer-list xmlns:android="/apk/res/android"><!--背景色--><item android:id="@android:id/background"><shape><corners android:radius="5dip" /><gradientandroid:startColor="#ff9d9e9d"android:centerColor="#ff5a5d5a"android:centerY="0.75"android:endColor="#ff747674"android:angle="270"/></shape></item><!--第二进度条颜色--><item android:id="@android:id/secondaryProgress"><clip><shape><corners android:radius="5dip" /><gradient android:startColor="#80ffd300"android:centerColor="#80ffb600"android:centerY="0.75"android:endColor="#a0ffcb00"android:angle="270"/></shape></clip></item><!--第一进度条颜色--><item android:id="@android:id/progress"><clip><shape><corners android:radius="5dip" /><gradient android:startColor="#ffffd300"android:centerColor="#ffffb600"android:centerY="0.75"android:endColor="#ffffcb00"android:angle="270"/></shape></clip></item> </layer-list>

三个条目,对应了background,progress,secondaryProgress。所以只需要修改对应项就可以了,如下在drawable文件中创建一个progressbar_horizontal_custom.xml

所以其实我们要修改样式的话只需要修改android:progressDrawable”对应的资源就可以

<item name="android:progressDrawable">@drawable/progressbar_horizontal</item><!-- progress_horizontal -->

video_view_bottom_progressbar_background.xml

<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="/apk/res/android"><item android:id="@android:id/background"android:height="2dp"android:gravity="center"><shape><size android:height="2dp"/><corners android:radius="1dp" /><solid android:color="#dcdcdc"/></shape></item><item android:id="@android:id/secondaryProgress"android:height="2dp"android:gravity="center"><clip ><shape><size android:height="2dp"/><corners android:radius="5dp" /><solid android:color="@android:color/darker_gray"/><!--darker_gray--></shape></clip></item><item android:id="@android:id/progress"android:height="2dp"android:gravity="center"><clip ><shape><size android:height="2dp"/><corners android:radius="5dp" /><solid android:color="#FF455B"/></shape></clip></item></layer-list>

在布局文件xml中使用:

<ProgressBarandroid:id="@+id/pb_video_bottom_progress"style="@android:style/Widget.ProgressBar.Horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:max="100"android:maxHeight="2dp"android:minHeight="2dp"android:progressDrawable="@drawable/video_view_bottom_progressbar_background"android:visibility="visible" />

总结:

1. 使用style=”@android:style/Widget.ProgressBar.Horizontal”

2. 重新自自定android:progressDrawable

2.自定义圆形ProgressBar样式

比如

<ProgressBar android:id="@+id/progressBar"style="@android:style/Widget.ProgressBar.Small"android:layout_gravity="center_vertical"android:layout_width="match_parent"android:layout_height="wrap_content" />

我们先看Widget.Progress的源码:

<style name="Widget.ProgressBar.Small"><!--圆形背景--><item name="indeterminateDrawable">@drawable/progress_small_white</item><item name="minWidth">16dip</item><item name="maxWidth">16dip</item><item name="minHeight">16dip</item><item name="maxHeight">16dip</item></style>

@drawable/progress_small_white的源码:

<animated-rotate xmlns:android="/apk/res/android"android:drawable="@drawable/spinner_white_48"android:pivotX="50%"android:pivotY="50%"android:framesCount="12"android:frameDuration="100" />

发现其实就是一个不断重复的旋转动画是spinner_white_48的图片,所以我们只需要自定义name=”indeterminateDrawable”的属性,自定义自己的drawable使用animated-rotate 标签即可

总结:

1.修改indeterminateDrawable属性,编写animated-rotate 标签的drawable,替换系统的

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。