Xamarin.Forms iOS端实现带前后视图预览的CarouselView

我刚好做过类似的需求，既然你已经在Android端用CarouselView.FormsPlugin搞定了，那iOS这边我们直接基于Xamarin.Forms内置的CarouselViewRenderer来实现就行——毕竟XF的CarouselView在iOS底层是靠UICollectionView驱动的，我们只要自定义它的布局就能实现左右预览效果。

第一步：创建自定义UICollectionViewFlowLayout #

首先我们要写一个自定义的布局类，用来控制每个轮播项的大小、间距，以及滚动时的对齐和视觉效果：

using CoreGraphics;
using UIKit;

namespace YourAppNamespace.iOS.Renderers
{
    public class PreviewCarouselFlowLayout : UICollectionViewFlowLayout
    {
        public PreviewCarouselFlowLayout()
        {
            // 计算轮播项宽度：屏幕宽度减去左右两侧预览区域的总宽度（这里我设的是左右各80pt，你可以按需调整）
            var screenWidth = UIScreen.MainScreen.Bounds.Width;
            var previewWidth = 80f;
            ItemSize = new CGSize(screenWidth - previewWidth * 2, UIScreen.MainScreen.Bounds.Height);
            
            // 取消项之间的间距，靠内边距控制预览区域
            MinimumInteritemSpacing = 0;
            MinimumLineSpacing = 0;
            // 设置内边距，让左右刚好露出预览项
            SectionInset = new UIEdgeInsets(0, previewWidth, 0, previewWidth);
            ScrollDirection = UICollectionViewScrollDirection.Horizontal;
        }

        // 滚动时实时更新布局，实现平滑的缩放过渡（可选，增强视觉效果）
        public override UICollectionViewLayoutAttributes[] LayoutAttributesForElementsInRect(CGRect rect)
        {
            var attributes = base.LayoutAttributesForElementsInRect(rect);
            var centerX = CollectionView.ContentOffset.X + CollectionView.Bounds.Width / 2;

            foreach (var attr in attributes)
            {
                // 计算当前项和屏幕中心的距离，动态调整缩放比例
                var distance = Math.Abs(attr.Center.X - centerX);
                var scaleFactor = Math.Max(0.85f, 1 - distance / CollectionView.Bounds.Width);
                attr.Transform = CGAffineTransform.MakeScale(scaleFactor, scaleFactor);
            }

            return attributes;
        }

        // 允许滚动时重新计算布局，保证缩放效果实时生效
        public override bool ShouldInvalidateLayoutForBoundsChange(CGRect newBounds) => true;

        // 让滚动结束时自动对齐到中间的轮播项，避免停在两个项之间
        public override CGPoint TargetContentOffsetForProposedContentOffset(CGPoint proposedContentOffset, CGPoint velocity)
        {
            var visibleRect = new CGRect(proposedContentOffset.X, 0, CollectionView.Bounds.Width, CollectionView.Bounds.Height);
            var layoutAttributes = LayoutAttributesForElementsInRect(visibleRect);
            
            // 找到离屏幕中心最近的项
            var closestAttr = layoutAttributes
                .OrderBy(attr => Math.Abs(attr.Center.X - proposedContentOffset.X - CollectionView.Bounds.Width / 2))
                .FirstOrDefault();

            if (closestAttr != null)
            {
                proposedContentOffset.X = closestAttr.Center.X - CollectionView.Bounds.Width / 2;
            }

            return proposedContentOffset;
        }
    }
}

第二步：实现自定义CarouselViewRenderer #

接下来我们要写一个自定义的Renderer，把上面的布局应用到XF的CarouselView上：

using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using YourAppNamespace.iOS.Renderers;

[assembly: ExportRenderer(typeof(CarouselView), typeof(CustomCarouselViewRenderer))]
namespace YourAppNamespace.iOS.Renderers
{
    public class CustomCarouselViewRenderer : CarouselViewRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<CarouselView> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                var collectionView = Control as UICollectionView;
                if (collectionView != null)
                {
                    // 应用自定义布局
                    collectionView.SetCollectionViewLayout(new PreviewCarouselFlowLayout(), animated: false);
                    // 启用分页效果，确保滚动一次切换一个项
                    collectionView.PagingEnabled = true;
                    // 隐藏水平滚动条，更美观
                    collectionView.ShowsHorizontalScrollIndicator = false;
                }
            }
        }
    }
}

一些关键注意事项 #

• 预览宽度调整：你可以修改PreviewCarouselFlowLayout里的previewWidth值来控制左右预览区域的大小，同时ItemSize会自动适配。
• 与Android端的间距对应：Android端你设置了InterPageSpacing，iOS这边我们通过SectionInset和MinimumLineSpacing来控制，如果你需要和Android端的间距一致，可以调整这两个参数。
• 缩放效果可选：如果你不需要非当前项的缩放效果，直接删掉LayoutAttributesForElementsInRect里的缩放代码就行。
• XF版本兼容性：确保你的项目使用的是较新的Xamarin.Forms版本（CarouselView已经内置在XF核心中，不需要额外引用第三方包）。

这样实现后，你的iOS端CarouselView就会和Android端一样，左右两侧能预览上一个和下一个视图啦！

内容的提问来源于stack exchange，提问作者Fabian Claasen