Xamarin Forms 进度条控件

本文翻译:http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-control/ 里面都是胡说的,如果看不懂可以联系邮箱 源代码:https://github.com/billreiss/xamlnative/tree/master/XamarinForms/CircularProgress 最近作者需要做一个简单的圆形的等待控件在一个Xamarin Forms应用,效果可以看

看起来很容易做,不知道怎么微软就没有弄个这么好看,微软没有,我们来直接做,看起来这个很简单

原来的进度条是一个线,没有UWP那个ring,我要做一个,可以使用本地控制、自定义渲染器渲染、使用组件里面弄很多我之前做的、到Nuget找,这些都觉得不是我要的。

看到他们没有,我就很高兴,我可以做一个很厉害的,自然这里我是原文的那个,写了Xaml的大神

我首先拿出一个本子,我应该弄矢量图形,在Xamarin原生还没有,我会为每个平台定制渲染,所以他不支持我不能使用,我想到使用图片,矢量图片,既然想要图片我如何让很多图片看起来是一个

我想到简单使用两图,实际对称两图是表示4图,不停覆盖的两个图片表示进度,两个图片颜色不同

图片可以在:https://github.com/billreiss/xamlnative/tree/master/XamarinForms/CircularProgress/CircularProgress/CircularProgress.Droid/Resources/drawable

两个保存格式Png图片,一个图表示0-50%,我们叫第一图“completed”,第二“pending”,颜色深的是第一,进度我们需要一个completed,两个pending,我们先放completed,然后在它上面放pending,在pending对面放pending,第一个图在代码叫“progress1”,第二“background1”,第二个覆盖第一个,第三个pending旋转180,总的一个蓝色圆,这是0%

25%:我们旋转pending第二个,可以让看到下面的图,这个我们覆盖原来的pending因为颜色一样,所以我们就可以看到25%

50%:我们需要改变,两个completed,一个pending,pending覆盖completed,但是只是覆盖一个,他们的层次:

  • completed
  • pending
  • completed

可以让pending覆盖右边的completed,超过50%让pending右旋

如果觉得上面说的还是不知道,可以看代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;
 
namespace CircularProgress
{
    public class CircularProgressControl : Grid
    {
        View progress1;
        View progress2;
        View background1;
        View background2;
        public CircularProgressControl()
        {
            progress1 = CreateImage("progress_done");
            background1 = CreateImage("progress_pending");
            background2 = CreateImage("progress_pending");
            progress2 = CreateImage("progress_done");
            HandleProgressChanged(1, 0);
        }
 
        private View CreateImage(string v1)
        {
            var img = new Image();
            img.Source = ImageSource.FromFile(v1 + ".png");
            this.Children.Add(img);
            return img;
        }
 
        public static BindableProperty ProgressProperty =
    BindableProperty.Create("Progress", typeof(double), typeof(CircularProgressControl), 0d, propertyChanged: ProgressChanged);
 
        private static void ProgressChanged(BindableObject bindable, object oldValue, object newValue)
        {
            var c = bindable as CircularProgressControl;
            c.HandleProgressChanged(Clamp((double)oldValue, 0, 1), Clamp((double)newValue, 0, 1));
        }
 
        static double Clamp(double value, double min, double max)
        {
            if (value <= max && value >= min) return value;
            else if (value > max) return max;
            else return min;
        }
 
        private void HandleProgressChanged(double oldValue, double p)
        {
            if (p < .5)
            {
                if (oldValue >= .5)
                {
                    // this code is CPU intensive so only do it if we go from >=50% to <50%
                    background1.IsVisible = true;
                    progress2.IsVisible = false;
                    background2.Rotation = 180;
                    progress1.Rotation = 0;
                }
                double rotation = 360 * p;
                background1.Rotation = rotation;
            }
            else
            {
                if (oldValue < .5)
                {
                    // this code is CPU intensive so only do it if we go from <50% to >=50%
                    background1.IsVisible = false;
                    progress2.IsVisible = true;
                    progress1.Rotation = 180;
                }
                double rotation = 360 * p;
                background2.Rotation = rotation;
            }
        }
 
        public double Progress
        {
            get { return (double)this.GetValue(ProgressProperty); }
            set { SetValue(ProgressProperty, value); }
        }
    }
}

我们需要把图片放在不同平台的文件夹,ios放在Resources文件夹,Android放在 AndroidResource

我们把控件放MainPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CircularProgress.MainPage"
             xmlns:local="clr-namespace:CircularProgress" BackgroundColor="White">
  <Grid>
    <local:CircularProgressControl x:Name="progressControl" Progress="0" HorizontalOptions="Center" VerticalOptions="Center" WidthRequest="60" HeightRequest="60"/>
  </Grid>
</ContentPage>

我们让time进度加0.1每0.02s

namespace CircularProgress
{
    public partial class MainPage : ContentPage
    {
        public MainPage()
        {
            InitializeComponent();
            Xamarin.Forms.Device.StartTimer(TimeSpan.FromSeconds(.02), OnTimer);
        }
 
        private bool OnTimer()
        {
            var progress = (progressControl.Progress + .1) ;
            if (progress > 1) progress = 0;
            progressControl.Progress = progress;
            return true;
        }
    }
}

不使用自定义渲染,可以在各个平台没有使用厉害的技术覆盖两个图做出从0-100%,可以使用不同角度表示0.001

本文:http://blog.csdn.net/lindexi_gd


本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【专业技术】搜狗歌词窗口如何来实现

大家都见过以前Sogou歌词窗口的样子吧,感觉是歌词的字体直接贴在windows桌面上一样,但是还可以用鼠标控制,这个是怎么做成的呢?其实我也不知道^_^,估计...

36910
来自专栏Coding迪斯尼

对Box2D的物理世界进行图像美化和关卡选择设计

我们用Box2D绘制了很多几何图形,例如圆形,矩形,复杂一点就是两个矩形交叉的合在一起,中间再加个圆形。显然这种界面“太素”了,一个丰富多彩,五彩斑斓的游戏世界...

821
来自专栏九彩拼盘的叨叨叨

Markdown 使用参考h1

Markdown是一种易读易写的标记语言。它能被生成HTML。Markdown的目标是:成为一种适用于网络的书写语言。

984
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(6)---定义单元格的外观

在Spread中每个单元格都可以被看作一个独立的对象,开发人员不仅可以设置单元格的类型,而且可以为每个单元格设置不同的外观属性。 设置单元格的颜色 你可以为一个...

1939
来自专栏24K纯开源

用Qt写软件系列三:一个简单的系统工具之界面美化

前言      在上一篇中,我们基本上完成了主要功能的实现,剩下的一些导出、进程子模块信息等功能,留到后面再来慢慢实现。这一篇来讲述如何对主界面进行个性化的定制...

5256
来自专栏PPV课数据科学社区

【学习】七天搞定SAS(四):数据输出

弄清楚了基本的PROC之后,开始研究SAS的输出...毕竟有了数据处理的结果之后,还要有一个比较舒服的输出格式才可以嘛。 SAS的结果发送系统:ODS SAS里...

3648
来自专栏前端新视界

给单元素艺术添加动画

原文:Animating Single Div Art 翻译:nzbin 导读:学习工具的最好的方法就是尝试新技术,本文通过“单元素艺术”介绍了 CSS 变量的...

2205
来自专栏九彩拼盘的叨叨叨

CSS 字体介绍

选择合适的字体,对提高网页的美观度和可读性有着举足轻重的作用。本文简要介绍了 CSS 中与字体相关的知识。

1283
来自专栏24K纯开源

用Qt写软件系列五:一个安全防护软件的制作(1)

引言       又有许久没有更新了。Qt,我心爱的Qt,为了找工作不得不抛弃一段时间,业余时间来学一学了。本来计划要写一系列关于Qt组件美化的博文,但是写了几...

2227
来自专栏数据结构与算法

菜鸡博客开……开……开源了!

因为很多人找我要过博皮源码,所以本宝宝经过深思熟虑,最终决定把自己的源码分享给大家!

1503

扫码关注云+社区