Xamarin.iOS网络图片百分比进度条loading加载效果


Xamarin.iOS(百分比进度条)网络图片加载

未分类


SDWebImage本是ObjC的一个开源控件,在gitub上有对Xamarin的完整binding封装,同时还将其支持UIImageView/UIButton等控件的扩展方法,参考博文的功能说明(SDWebImage):

功能
1.为UIImageView、UIButton加载网络图片,为Cocoa Touch框架提供缓存管理。
2.异步图片下载
3.异步内存+磁盘图片缓存,自动缓存过期处理。
4.确保同一个url不会被加载很多次
5.确保虚假url不会被重复提交很多次
简单来说就是其能够对网络图片进行内存管理及本地存储管理,并且能够手工清除内存及本地缓存。

SDWebImage单独使用

1.WebCahce>>UIImageView/UIButton图片加载(可设置默认图片及完成回调)

  1. partial void ImageButton_TouchUpInside (UIButton sender)
  2. {
  3. this.LoadingView.StartAnimating();
  4. string url = "http://www.51ppt.com.cn/Article/Uploadphotos_0708/200604/200641473458360.png";
  5. this.ImageButton.SetImage(url,UIControlState.Normal,null,SDWebImageOptions.None,(img,error,cache)=>{
  6. this.LoadingView.StopAnimating();
  7. });
  8. }
  1. private void LoadClick()
  2. {
  3. <span style="white-space:pre"> </span>string url = "http://d.hiphotos.baidu.com/image/pic/item/8cb1cb1349540923b6a062619058d109b2de49e7.jpg";
  4. this.LoadingView.StartAnimating ();
  5. this.webImageView.SetImage (url,null,SDWebImageOptions.None,null,(img,error,cache)=>{
  6. this.LoadingView.StopAnimating();
  7. });
  8. //this.webImageView.SetImage (url,UIImage.FromFile("temp.png"),SDWebImageOptions.None,null,null);
  9. }

2.SDWebImageManager单例

1)图片下载

  1. private void SDLoad()
  2. {
  3. string url = "http://g.hiphotos.baidu.com/image/pic/item/3bf33a87e950352a808d060f5043fbf2b3118bcc.jpg";
  4. var manager = SDWebImageManager.SharedManager;
  5. manager.Download (url,SDWebImageOptions.None,null,CompletedHandler);
  6. }
  7. void CompletedHandler (UIImage image, NSError error, SDImageCacheType cacheType,bool finshed)
  8. {
  9. Console.WriteLine ("Reuslt>>"+finshed);
  10. this.InvokeOnMainThread (()=>{
  11. this.TableView.BackgroundColor = UIColor.FromPatternImage(image);
  12. });
  13. }

2)内存清理及本地删除

  1. private void DelClcik( )
  2. {
  3. SDWebImageManager.SharedManager.ImageCache.ClearMemory (); //清空内存
  4. SDWebImageManager.SharedManager.ImageCache.ClearDisk (); //清除本地
  5. }

SDWebImage与进度条使用

1.RadialProgressView/UIProgressView
三种类型Big,Small,Tiny

  1. public override void ViewDidLoad ()
  2. {
  3. base.ViewDidLoad ();
  4. // Add our different styles of RadialProgressViews
  5. bigRadialProgressView = new RadialProgressView ();
  6. bigRadialProgressView.Center = new PointF (View.Center.X, View.Center.Y - 100);
  7. bigRadialProgressView.AutoresizingMask = UIViewAutoresizing.FlexibleMargins;
  8. View.AddSubview (bigRadialProgressView);
  9. smallRadialProgressView = new RadialProgressView (RadialProgressViewStyle.Small);
  10. smallRadialProgressView.ProgressColor = UIColor.Gray;
  11. smallRadialProgressView.Center = new PointF (bigRadialProgressView.Frame.Left / 2, bigRadialProgressView.Center.Y);
  12. smallRadialProgressView.AutoresizingMask = UIViewAutoresizing.FlexibleMargins;
  13. View.AddSubview (smallRadialProgressView);
  14. tinyRadialProgressView = new RadialProgressView (RadialProgressViewStyle.Tiny);
  15. tinyRadialProgressView.ProgressColor = UIColor.White;
  16. tinyRadialProgressView.Center = new PointF (bigRadialProgressView.Frame.Right + (View.Frame.Width - bigRadialProgressView.Frame.Right) / 2, bigRadialProgressView.Center.Y);
  17. tinyRadialProgressView.AutoresizingMask = UIViewAutoresizing.FlexibleMargins;
  18. View.AddSubview (tinyRadialProgressView);
  19. standardProgressView = new UIProgressView (UIProgressViewStyle.Bar);
  20. standardProgressView.Frame = new RectangleF (30, bigRadialProgressView.Frame.Bottom + 80, View.Frame.Width - 60, 10);
  21. standardProgressView.AutoresizingMask = UIViewAutoresizing.FlexibleBottomMargin | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleWidth;
  22. View.AddSubview (standardProgressView);
  23. startProgressButton = UIButton.FromType (UIButtonType.RoundedRect);
  24. startProgressButton.Frame = new RectangleF (50, standardProgressView.Frame.Bottom + 40, View.Frame.Width - 100, 30);
  25. startProgressButton.SetTitle ("Start Progress", UIControlState.Normal);
  26. startProgressButton.AutoresizingMask = UIViewAutoresizing.FlexibleBottomMargin | UIViewAutoresizing.FlexibleTopMargin | UIViewAutoresizing.FlexibleWidth;
  27. startProgressButton.TouchUpInside += OnStartProgressTapped;
  28. View.AddSubview (startProgressButton);
  29. }

2.SDWebImage回调操作

  1. void OnStartProgressTapped (object sender, EventArgs e)
  2. {
  3. string url = "http://g.hiphotos.baidu.com/image/pic/item/3bf33a87e950352a808d060f5043fbf2b3118bcc.jpg";
  4. standardProgressView.Progress = 0;
  5. bigRadialProgressView.Reset ();
  6. smallRadialProgressView.Reset ();
  7. tinyRadialProgressView.Reset ();
  8. this.ImageView.SetImage (url,null, SDWebImageOptions.SDWebImageProgressiveDownload, ProgressHandler, CompletedHandler);
  9. }
  10. /// <summary>
  11. /// 实时下载数据
  12. /// </summary>
  13. /// <param name="receivedSize">当前下载量.</param>
  14. /// <param name="expectedSize">总量.</param>
  15. void ProgressHandler (uint receivedSize, long expectedSize)
  16. {
  17. Console.WriteLine ("receivedSize -- expectedSize -- "+receivedSize+" -- " + expectedSize);
  18. var value = (float)receivedSize / (float)expectedSize;
  19. if(value != 0){
  20. Console.WriteLine ("Value>>"+value);
  21. this.InvokeOnMainThread (()=>{
  22. bigRadialProgressView.Value = value;
  23. smallRadialProgressView.Value = value;
  24. tinyRadialProgressView.Value = value;
  25. standardProgressView.Progress = value;
  26. });
  27. }
  28. }
  29. void CompletedHandler (UIImage image, NSError error, SDImageCacheType cacheType)
  30. {
  31. this.InvokeOnMainThread (()=>{
  32. UIView.Animate (0.1f,()=>{
  33. bigRadialProgressView.Alpha = 0.0f;
  34. smallRadialProgressView.Alpha = 0.0f;
  35. tinyRadialProgressView.Alpha = 0.0f;
  36. standardProgressView.Alpha = 0.0f;
  37. },()=>{
  38. bigRadialProgressView.RemoveFromSuperview();
  39. smallRadialProgressView.RemoveFromSuperview();
  40. tinyRadialProgressView.RemoveFromSuperview();
  41. standardProgressView.RemoveFromSuperview();
  42. });
  43. });
  44. }

20141017161557000.gif-524.1kB

参考资源
源码:Xamarin studio(5.5.2) Xamarin.iOS(8.2.0.207) Xcode(5.1.1)
原生(SDWebImage)>>https://github.com/rs/SDWebImage/
Xamarin组件(SDWebImage)>>http://components.xamarin.com/view/sdwebimage
Xamarin组件Binding(SDWebImage)>>https://github.com/stampsy/sdwebimage-monotouch
Xamarin组件圆形进度条(Radialprogress)>>http://components.xamarin.com/view/radialprogress
Xamarin三方Binding>>https://github.com/mono/monotouch-bindings

作者:zhaowensky_126
原文地址:http://blog.csdn.net/zhaowensky_126/article/details/40187677

分享到