Xamarin Forms圆形图片在iOS显示为椭圆形问题求助（附细节）

我之前也踩过这个iOS上圆形图片变椭圆的坑，结合你的情况，给你几个排查和解决的方向：

• 确保控件宽高约束严格1:1
  iOS的Auto Layout很容易因为控件宽高比不对，把圆形拉成椭圆。检查你的XAML代码，要么给CircleImage明确设置相同的WidthRequest和HeightRequest，要么用约束强制宽高相等，同时把Aspect设为AspectFill（避免图片本身比例影响）。示例代码：

  <controls:CircleImage 
      WidthRequest="120" 
      HeightRequest="120" 
      Source="avatar.png"
      Aspect="AspectFill" />
  

• 确认iOS渲染器初始化顺序正确
  一定要保证ImageCircleRenderer.Init();在Forms.Init();之后调用，顺序错了可能导致渲染逻辑不生效：

  public override bool FinishedLaunching(UIApplication app, NSDictionary options)
  {
      global::Xamarin.Forms.Forms.Init();
      ImageCircleRenderer.Init(); // 必须放在Forms.Init之后
      LoadApplication(new App());
  
      return base.FinishedLaunching(app, options);
  }
  

• 更新NuGet包到最新稳定版
  旧版本的ImageCircle插件可能存在iOS适配漏洞，去NuGet包管理器把Xam.Plugins.Forms.ImageCircle更新到最新版，很多这类渲染问题都是版本兼容导致的。

• 备选：用原生方式实现圆形图片
  如果插件实在搞不定，可以绕开它，用iOS原生渲染器手动实现：

  [assembly: ExportRenderer(typeof(Image), typeof(CustomCircleImageRenderer))]
  namespace YourAppName.iOS.Renderers
  {
      public class CustomCircleImageRenderer : ImageRenderer
      {
          protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
          {
              base.OnElementChanged(e);
              if (Control != null)
              {
                  Control.Layer.CornerRadius = Control.Bounds.Width / 2;
                  Control.Layer.MasksToBounds = true;
                  Control.ClipsToBounds = true;
              }
          }
      }
  }
  

  然后在XAML里用原生Image控件，设置好宽高相等和Aspect="AspectFill"就行。

• 检查图片本身的比例
  如果原图是长方形，哪怕控件是正方形，用AspectFit模式会让图片在控件内留空白，视觉上看起来像椭圆，改成AspectFill就能让图片填满控件，配合圆角显示正圆。

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