如何在Xamarin跨平台实现图片圆形裁剪蒙版并集成到ListView（无插件）

我来帮你搞定这个问题——不用任何第三方插件，纯原生Xamarin实现跨平台圆形图片蒙版，还能无缝集成到ListView里，全程用C#编写，完美适配Android和iOS双平台。

一、创建跨平台圆形图片控件 #

首先在你的共享项目（Shared Project/.NET Standard库）里定义一个自定义Image控件，作为跨平台的“标记”，具体的圆形渲染逻辑交给各平台的自定义渲染器：

using Xamarin.Forms;

namespace YourAppNamespace
{
    public class CircleImage : Image
    {
        // 这里不需要额外属性，只是继承Image作为标记
    }
}

二、各平台自定义渲染器实现 #

接下来分别在Android和iOS项目中编写渲染器，实现圆形裁剪逻辑。

1. Android平台渲染器 #

在Android项目中创建一个CircleImageRenderer类，继承自ImageRenderer，利用Android原生Outline机制实现高效的圆形裁剪：

using Android.Content;
using Android.Views;
using YourAppNamespace;
using YourAppNamespace.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(CircleImage), typeof(CircleImageRenderer))]
namespace YourAppNamespace.Droid
{
    public class CircleImageRenderer : ImageRenderer
    {
        public CircleImageRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);

            if (Control != null && e.NewElement != null)
            {
                // 设置图片填充模式为居中裁剪，避免变形
                Control.SetScaleType(Android.Widget.ImageView.ScaleType.CenterCrop);
                // 开启裁剪到轮廓
                Control.ClipToOutline = true;
                // 自定义圆形轮廓提供者
                Control.OutlineProvider = new CircleOutlineProvider();
            }
        }

        // 自定义圆形轮廓逻辑
        private class CircleOutlineProvider : ViewOutlineProvider
        {
            public override void GetOutline(View view, Outline outline)
            {
                // 以控件宽高的一半为半径创建圆形轮廓
                outline.SetRoundRect(0, 0, view.Width, view.Height, view.Width / 2f);
            }
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                Control?.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

注意：这种方式比手动绘制Bitmap更高效，还能避免内存泄漏问题。

2. iOS平台渲染器 #

在iOS项目中创建CircleImageRenderer类，继承自ImageRenderer，通过UIBezierPath裁剪上下文实现圆形效果：

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

[assembly: ExportRenderer(typeof(CircleImage), typeof(CircleImageRenderer))]
namespace YourAppNamespace.iOS
{
    public class CircleImageRenderer : ImageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);

            if (Control != null && e.NewElement != null)
            {
                // 设置图片填充模式为AspectFill，避免变形
                Control.ContentMode = UIKit.UIViewContentMode.ScaleAspectFill;
                // 开启裁剪到边界
                Control.ClipsToBounds = true;
            }
        }

        public override void Draw(CGRect rect)
        {
            // 创建圆形路径
            using (var path = UIKit.UIBezierPath.FromRoundedRect(rect, UIKit.UIRectCorner.AllCorners, new CGSize(rect.Width / 2, rect.Height / 2)))
            {
                path.AddClip();
                base.Draw(rect);
            }
        }

        protected override void Dispose(bool disposing)
        {
            if (disposing)
            {
                Control?.Dispose();
            }
            base.Dispose(disposing);
        }
    }
}

三、集成到ListView中 #

现在可以把CircleImage直接用到ListView的ItemTemplate里了，和普通Image控件用法几乎一致，只是替换成我们的自定义控件。

1. XAML示例 #

在你的页面XAML中定义ListView，使用CircleImage作为列表项的头像控件：

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:YourAppNamespace"
             x:Class="YourAppNamespace.MainPage">

    <ListView ItemsSource="{Binding Items}"
              CachingStrategy="RecycleElement" <!-- 开启回收策略提升滚动性能 -->
              HasUnevenRows="False">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <StackLayout Orientation="Horizontal" Padding="10" Spacing="10">
                        <!-- 使用自定义圆形图片控件 -->
                        <local:CircleImage Source="{Binding AvatarUrl}"
                                          WidthRequest="60"
                                          HeightRequest="60"
                                          Aspect="AspectFill" /> <!-- 必须设置AspectFill避免图片变形 -->
                        <Label Text="{Binding Username}"
                               VerticalOptions="Center"
                               FontSize="Medium" />
                    </StackLayout>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

2. 绑定数据源示例 #

在对应的ViewModel或代码后台中定义数据源，比如：

using System.Collections.Generic;
using Xamarin.Forms;

namespace YourAppNamespace
{
    public class MainPageViewModel : BindableObject
    {
        private List<UserItem> _items;
        public List<UserItem> Items
        {
            get => _items;
            set
            {
                _items = value;
                OnPropertyChanged();
            }
        }

        public MainPageViewModel()
        {
            // 模拟数据，支持本地图片和网络图片
            Items = new List<UserItem>
            {
                new UserItem { Username = "张三", AvatarUrl = "avatar1.png" },
                new UserItem { Username = "李四", AvatarUrl = "https://example.com/avatar2.jpg" },
                new UserItem { Username = "王五", AvatarUrl = "avatar3.png" }
            };
        }
    }

    public class UserItem
    {
        public string Username { get; set; }
        public string AvatarUrl { get; set; }
    }
}

四、关键注意事项 #

• 图片比例：确保CircleImage的宽高一致，否则会变成椭圆形；同时设置Aspect="AspectFill"，保证图片填充圆形区域不变形。
• 性能优化：ListView开启CachingStrategy="RecycleElement"，避免频繁创建和销毁CircleImage控件，提升滚动流畅度。
• 资源适配：Android项目中把不同分辨率的图片放在drawable-mdpi、drawable-hdpi等文件夹；iOS项目放在Assets.xcassets中，确保不同设备显示清晰。
• 网络图片：如果使用网络图片，Xamarin.Forms的UriImageSource会自动处理加载，渲染器会在图片加载完成后自动应用圆形裁剪。

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