`

仿微信小视屏拍摄的进度条/自定义的progressBar的样式。

 
阅读更多

今天有个需求,就是需要倒计时的进度条,样式参考微信小视屏拍摄的效果。

就是两头往中间缩进的那种效果。

第一步:

先自定义progressBar的样式。 roar_progressbar_color.xml

 

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

    <!-- 背景  gradient是渐变,corners定义的是圆角 -->
    <item android:id="@android:id/background">
        <shape>
            <solid android:color="#DA6547" />
        </shape>
    </item>
    <!-- 第二条进度条颜色 -->
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <solid android:color="#ffffff" />
            </shape>
        </clip>
    </item>
    <!-- 进度条 -->
    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <solid android:color="#DA6547" />
            </shape>
        </clip>
    </item>

</layer-list>

 

第二步:

在布局文件里面的progress引用。

    <ProgressBar
        android:id="@+id/pb_progress1"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="5dp"
        android:progressDrawable="@drawable/roar_progressbar_color" />

 

注意:设置progressBar的样式,为横向。

如此基本实现了通常效果。

然后现在要实现微信小视屏的这种两头往中间的效果,这个时候就利用下,Progress和SecondaryProgress这两个进度去控制。

首先,我们在样式中定义的东西就发挥重大的作用。

注意:我们的progress和background的颜色保持一致。这样会产生往里面走的效果。

然后我们手动去设置进度的大小就能实现。

先获取大小。

 

		// 进度条
		progress.setProgress(0);
		progress.setSecondaryProgress(progress.getMax());
		// 保存第一进度和第二进度的数据
		mPro = progress.getProgress();
		mSpro = progress.getMax();

 

最后手动设置(这段代码需要不断的去回调,产生效果)

progress.setProgress(mPro += 1);
progress.setSecondaryProgress(mSpro -= 1);

 

 

0
0
分享到:
评论

相关推荐

    自定义圆形进度条,wpf Progressbar进度条样式修改

    本篇文章将深入探讨如何在WPF中实现自定义的圆形进度条,并基于`wpf Progressbar`进行样式修改。 首先,我们需要理解WPF的样式和模板系统。`ControlTemplate`是WPF中用于定义控件外观的关键组件,它允许我们完全...

    仿微信网页加载进度条

    此外,微信小程序也有自己的API来实现加载进度条,比如`wx.showLoading`和`wx.hideLoading`,它们可以方便地在小程序中创建和隐藏加载提示。如果你是在微信环境下开发,需要结合微信开发者工具和微信的特有API来实现...

    使用ProgressBar实现进度条,设置进度条显示风格。以及自定义进度条样式

    本篇文章将深入探讨如何使用ProgressBar来创建进度条,设置不同的显示风格,并教你如何自定义进度条样式。 首先,ProgressBar分为两种类型:indeterminate(不确定进度)和determinate(确定进度)。indeterminate...

    安卓仿微信webview进度条

    在安卓应用开发中,微信的...5. **样式调整**:为了让进度条颜色和微信保持一致,我们可以自定义`ProgressBar`的样式。在`res/values/styles.xml`中定义一个主题,设置`progressDrawable`属性为绿色的渐变条。 ```xml ...

    仿微信进度条webView

    4. **自定义进度条**:微信的进度条不仅显示加载进度,还有特定的样式和动画效果。要实现这种效果,你需要自定义一个进度条样式,包括颜色、大小、动画等,这通常涉及到XML布局文件的编写和自定义View的实现。 5. *...

    真正的仿微信WebView顶部进度条效果。SlowlyProgressBar,ProgressBar.zip

    总的来说,实现“真正的仿微信WebView顶部进度条效果”是一个综合了自定义View、WebView交互、线程通信和用户体验设计的实践过程。开发者需要深入理解Android的UI机制,以及如何通过代码控制和优化用户体验。通过...

    C# Winform 自定义进度条ProgressBar

    "C# Winform 自定义进度条ProgressBar"的主题正聚焦于这一需求,允许开发者根据自己的喜好或者项目需求改变默认进度条的外观,特别是其背景颜色。 进度条(ProgressBar)是Windows应用程序中常见的一种组件,用于...

    Android三种方式实现ProgressBar自定义圆形进度条

    进度条样式在项目中经常可以见到,下面小编给大家分享Android三种方式实现ProgressBar自定义圆形进度条。 Android进度条有4种风格可以使用。 默认值是progressBarStyle。 设置成progressBarStyleSmall后,图标变小...

    安卓进度条loadingprogress相关-自定义ProgressBar完整实现了下载的各个状态自定义圆角矩形进度条自定义修改下载控件颜色.rar

    自定义版本可以实现更多样化的样式,例如在这个项目中,我们有自定义的圆角矩形进度条,这需要对Android图形绘制有深入理解,通常会涉及到Canvas的drawRect()方法以及Path的arcTo()或quadTo()等方法来绘制曲线和圆角...

    Android编程实现自定义ProgressBar样式示例(背景色及一级、二级进度条颜色)

    在Android开发中,自定义ProgressBar样式是一项常见的需求,它可以让应用程序的界面更加个性化和专业。本文将深入探讨如何通过编程实现自定义ProgressBar的样式,包括背景色以及一级和二级进度条的颜色。 首先,...

    Android 三种常用实现自定义圆形进度条 ProgressBar

    Android社区提供了许多优秀的第三方库,例如CircleProgress或ArcProgressStackView,它们提供丰富的样式和动画效果,使开发者能快速实现自定义圆形进度条。 1. 添加依赖库到build.gradle文件: ```groovy ...

    真正的仿微信WebView顶部进度条效果。SlowlyProgressBa

    真正的仿微信WebView顶部进度条效果。SlowlyProgressBar,ProgressBar_SlowlyProgressBarr,ProgressBar_SlowlyProgressBar.zip

    Android_webView仿微信进度条

    微信作为中国最流行的社交应用之一,其在加载网页时会显示一个进度条,这个功能在用户体验上显得十分友好。现在,我们将探讨如何在Android中实现类似微信的WebView进度条功能。 首先,我们需要了解WebView的基本...

    多种风格的Android 自定义progressbar控件

    本项目"多种风格的Android自定义progressbar控件"提供了多种不同设计风格的进度条,让开发者可以根据自己的应用主题和需求选择合适的样式。 首先,我们来看看自定义ProgressBar的基本概念。在Android中,可以通过...

    android中自定义progressbar组件

    本篇文章将深入探讨如何在Android中自定义一个基于逐帧动画的ProgressBar组件,即自定义loading进度条。 首先,我们来了解ProgressBar的基本概念。ProgressBar是Android系统提供的一个用于显示进度的视图组件,它有...

    WPF如何自定义ProgressBar滚动条样式

    但是,默认的ProgressBar样式可能不符合我们的需求,或者与程序风格不符。这时,我们需要自定义ProgressBar的样式来满足我们的需求。 一、ProgressBar的基本样式 ProgressBar的基本样式非常简单,我们可以通过设置...

    Android开发之模仿微信打开网页的进度条效果(高仿)

     阐述这个问题前,先说下之前网上的,各位可以复制这段字,去百度一下 “仿微信打开网页的进度条效果” ,你会看到有很多类似的文章,不过他们有个共同点,就是实现方法都是一样的,而且,都忽略了微信加载网页时,...

    仿微信视频录制

    在录制过程中,展示时间进度条,让用户了解当前录制的时长,可以使用ProgressBar或者自定义View实现。 8. **错误处理**: 需要处理各种可能的异常,如权限未授予、存储空间不足、录制过程中设备被锁定等问题。 9...

    C# winform 进度条 ProgressBar 带进度显示

    5. **进度条样式**:C# Winform的ProgressBar还支持两种样式:连续样式(Marquee)和块样式(Block)。连续样式会像滚动条一样显示进度,而块样式则会在完成部分填充矩形块。可以通过`Style`属性切换样式,例如: ...

    js-swiper-分页标签加进度条-自定义位置加进度条

    Swiper允许你自定义分页点和进度条的样式,包括颜色、大小、形状等。例如,你可以改变分页点的背景颜色和圆角: ```css .swiper-pagination-bullet-active { background-color: #ff0000; /* 更改活动分页点的颜色 ...

Global site tag (gtag.js) - Google Analytics