Add sample to show list of images

roubachof · Feb 20, 2025 · 521c034 · 521c034
1 parent 3cfb436
commit 521c034
Show file tree

Hide file tree

Showing 2 changed files with 157 additions and 1 deletion.
diff --git a/src/Sample/ImageTableViewController.cs b/src/Sample/ImageTableViewController.cs
@@ -0,0 +1,148 @@
+using System;
+using CoreGraphics;
+using Foundation;
+using UIKit;
+using ImageCaching.Nuke;
+using ObjCRuntime;
+
+namespace Sample;
+
+public class ImageTableViewController : UIViewController
+{
+    public ImageTableViewController()
+    {
+
+    }
+
+    public override void LoadView()
+    {
+        base.LoadView();
+
+        var layout = new UICollectionViewFlowLayout
+        {
+            ItemSize = new CGSize(UIScreen.MainScreen.Bounds.Width, 100),
+            MinimumInteritemSpacing = 8,
+            ScrollDirection = UICollectionViewScrollDirection.Vertical
+        };
+        var collectionView = new UICollectionView(CGRect.Empty, layout)
+        {
+            TranslatesAutoresizingMaskIntoConstraints = false,
+            DataSource = new ImageDataSource()
+        };
+
+        collectionView.RegisterClassForCell(typeof(ImageCell), nameof(ImageCell));
+
+        Add(collectionView);
+
+        collectionView.TopAnchor.ConstraintEqualTo(View.TopAnchor).Active = true;
+        collectionView.BottomAnchor.ConstraintEqualTo(View.BottomAnchor).Active = true;
+        collectionView.LeadingAnchor.ConstraintEqualTo(View.LeadingAnchor).Active = true;
+        collectionView.TrailingAnchor.ConstraintEqualTo(View.TrailingAnchor).Active = true;
+    }
+}
+
+public class ImageDataSource : UICollectionViewDataSource
+{
+    private readonly string[] _items;
+
+    public ImageDataSource()
+    {
+        _items =
+        [
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item2",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item3",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item3",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item4",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item5",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item6",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item3",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item4",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item5",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item6",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item2",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item2",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item1",
+            "https://www.dummyimage.com/600x400/e30ce3/8bd61a.png&text=Item7",
+        ];
+    }
+
+    public override IntPtr GetItemsCount(UICollectionView collectionView, IntPtr section)
+    {
+        return _items.Length;
+    }
+
+    public override UICollectionViewCell GetCell(UICollectionView collectionView, NSIndexPath indexPath)
+    {
+        var cell = collectionView.DequeueReusableCell(nameof(ImageCell), indexPath);
+        if (cell is ImageCell imageCell)
+        {
+            imageCell.LoadImage(_items[indexPath.Row]);
+        }
+
+        return (UICollectionViewCell)cell;
+    }
+}
+
+public sealed class ImageCell : UICollectionViewCell
+{
+    private readonly UIImageView _imageView;
+    private long? _taskId;
+
+    public ImageCell(NativeHandle handle) : base(handle)
+    {
+        _imageView = new UIImageView
+        {
+            TranslatesAutoresizingMaskIntoConstraints = false,
+            ContentMode = UIViewContentMode.ScaleToFill
+        };
+
+        ContentView.Add(_imageView);
+        ContentView.BackgroundColor = UIColor.Gray;
+
+        _imageView.TopAnchor.ConstraintEqualTo(ContentView.TopAnchor).Active = true;
+        _imageView.BottomAnchor.ConstraintEqualTo(ContentView.BottomAnchor).Active = true;
+        _imageView.LeadingAnchor.ConstraintEqualTo(ContentView.LeadingAnchor).Active = true;
+        _imageView.TrailingAnchor.ConstraintEqualTo(ContentView.TrailingAnchor).Active = true;
+    }
+
+    public void LoadImage(string url)
+    {
+        _taskId = ImagePipeline.Shared.LoadImageWithUrl(
+            new NSUrl(url),
+            UIImage.FromBundle("Placeholder"),
+            null,
+            _imageView);
+    }
+
+    public override void PrepareForReuse()
+    {
+        if (_taskId.HasValue)
+            ImagePipeline.Shared.CancelTask(_taskId.Value);
+
+        base.PrepareForReuse();
+    }
+}
diff --git a/src/Sample/ViewController.cs b/src/Sample/ViewController.cs
@@ -20,7 +20,8 @@ public partial class ViewController : UIViewController
         private SKCanvasView _skiaCanvasView;
         private UIStackView _bottomStackView;
         private UILabel _cacheStatusLabel;
-
+        private UIButton _imageListButton;
+
         public ViewController(IntPtr handle) : base(handle)
         {
         }
@@ -106,6 +107,12 @@ public override void ViewDidLoad()
                 _skiaCanvasView.LayoutSubviews();
                  _imageView.Image = null;
             };
+
+            _imageListButton = AddButton("Image List");
+            _imageListButton.TouchUpInside += (sender, args) =>
+            {
+                NavigationController.PushViewController(new ImageTableViewController(), true);
+            };
 
             _prefetchButton = AddButton("Prefetch above images");
             _prefetchButton.TouchUpInside += (sender, args) =>
@@ -122,6 +129,7 @@ public override void ViewDidLoad()
             _cacheStatusLabel = new UILabel(){ Lines = 0, TranslatesAutoresizingMaskIntoConstraints = false};
 
             _bottomStackView.AddArrangedSubview(_clearButton);
+            _bottomStackView.AddArrangedSubview(_imageListButton);
             _bottomStackView.AddArrangedSubview(_prefetchButton);
             _bottomStackView.AddArrangedSubview(_dumpCacheStateButton);