title author date CreateTime categories
Xamarin Forms 进度条控件
lindexi
2018-2-13 17:23:3 +0800
2018-2-13 17:23:3 +0800

本文翻译: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

2018-2-13-Xamarin-Forms-进度条控件的更多相关文章

  1. Xamarin Forms 进度条控件

    本文翻译:http://xamlnative.com/2016/04/14/xamarin-forms-a-simple-circular-progress-control/ 里面都是胡说的,如果看不 ...

  2. Photoshop和WPF双剑配合,打造炫酷个性的进度条控件

    现在如果想打造一款专业的App,UI的设计和操作的简便性相当重要.UI设计可以借助Photoshop或者AI等设计工具,之前了解到WPF设计工具Expression Blend可以直接导入PSD文件或 ...

  3. [转载]ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    作者:李盼(Lipan)出处:[Lipan] (http://www.cnblogs.com/lipan/)版权声明:本文的版权归作者与博客园共有.转载时须注明本文的详细链接,否则作者将保留追究其法律 ...

  4. ExtJs4 笔记(8) Ext.slider 滚轴控件、 Ext.ProgressBar 进度条控件、 Ext.Editor 编辑控件

    本篇要登场的有三个控件,分别是滚轴控件.进度条控件和编辑控件. 一.滚轴控件 Ext.slider 1.滚轴控件的定义 下面我们定义三个具有代表意义滚轴控件,分别展示滚轴横向.纵向,以及单值.多值选择 ...

  5. 为OLED屏添加GUI支持6:进度条控件

    为OLED屏添加GUI支持6:进度条控件 本文博客链接:http://blog.csdn.net/jdh99,作者:jdh,转载请注明. 环境: 主机:WIN10 开发环境:MDK5.13 MCU:S ...

  6. 用 CALayer 定制下载进度条控件

    // // RPProgressView.h // CALayer定制下载进度条控件 // // Created by RinpeChen on 16/1/2. // Copyright © 2016 ...

  7. 【转】用emWin进度条控件做个表盘控件,效果不错

    @2018-08-09 用emWin进度条控件做个表盘控件,效果不错

  8. CProgressCtrl进度条控件实现进度滚动效果

    关于CProgressCtrl 控件的基本操作网上有很多资料,可我想实现进度条中进度滚动效果,即很多时候程序出现的等待或启动画面,如下图: 实现这个效果的函数为SetMarquee(_In_ BOOL ...

  9. HslControls组件库 工业控件库 曲线控件 时间控件 管道控件 温度计控件 阀门控件 传送带控件 进度条控件 电池控件 数码管控件等等

    本篇博客主要对 HslControls 组件做一个大概的总览介绍,更详细的内容可以参照页面里的子链接,还有github上的源代码,然后进行相关的学习,和使用. Prepare 先从nuget下载到组件 ...

  10. iOS:进度条控件的详细使用

    进度条控件:UIProcessView:UIView   功能:顾名思义,用来显示下载进度或者传输数据进度.   属性: @property(nonatomic) UIProgressViewStyl ...

随机推荐

  1. PHPCMS快速建站系列之后台内容自定义修改

    一.后台登录页面 背景图:\statics\images\admin_img 中的 login_bg.jpg 底部版权信息:\phpcms\languages\en 中的 system.lang.ph ...

  2. LRM-00109: could not open parameter file '/u01/app/oracle/product/12.1.0/db_1/dbs/initepps.ora'

    安装好oracle后,起动时报如下错误: [oracle@Oracle-A ~]$ export ORACLE_SID=ORCL [oracle@Oracle-A ~]$ sqlplus / as s ...

  3. java返回结果集封装

    1.返回消息统一定义文件CodeMsg.java public class CodeMsg { private int retCode; private String message; // 按照模块 ...

  4. 笔记: CC2540 和 CC2541 的区别

    CC2540 和 CC2541 的区别 CC2540 和 CC2541 是 BLE 低功耗蓝牙芯片,使用的是 51 内核. CC2540 有 USB 接口 CC2541 无. 价格上最早是 CC254 ...

  5. 命令行的形式运行php

    转自:http://www.cnblogs.com/myjavawork/articles/1869205.html 注意:在安装php时需要将php 的安装目录加到环境变量 PATH 中 (右击我的 ...

  6. Mysql 查询一天中,每个小时数据的数量

    SELECT HOUR(e.time) as Hour,count(*) as Count FROM error_log e WHERE e.date = '2017-09-02' GROUP BY ...

  7. HDU-2859_Phalanx

    Phalanx Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  8. websocket实现五子棋联机对战

    GoBang.html // 对弈的页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  9. 使用jQuery的 autocomplete 实现输入框 自动提示补全

    参考网址: https://www.cnblogs.com/jinzhiming/p/6768402.html 插件下载地址: 链接:https://pan.baidu.com/s/1SpP3hixZ ...

  10. python----操作Memcache、redis、RabbitMQ、SQLAlchemy

    操作本质都是通过socket发送命令 Memcached Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次 ...