Xamarin.Forms实现按钮图上文下：iOS自定义Renderer及XLabs适配问题

Hey there! I see you're aiming to create a Xamarin.Forms Button where the text sits below the image, and since XLabs' ImageButton doesn't play nice with newer Xamarin.Forms versions, you've gone the custom renderer route for iOS. Let's break down your current code and refine it to work reliably across debug/release builds, handle edge cases, and avoid potential issues.

Issues in Your Current Code #

Let's start with a quick review of what could be improved:

• All your layout logic is wrapped in #if DEBUG—this means none of it will work in release builds!
• UIImage.FromFile doesn't handle iOS's Retina display variants (like icon@2x.png or icon@3x.png) automatically; FromBundle is the better choice here.
• You're directly casting e.NewElement to Button without a safety check, which could cause crashes if the element type changes.
• The edge inset calculations can be tweaked for more consistent alignment.

Optimized Custom Renderer Code #

Here's a polished version of your renderer, with fixes and enhancements:

[assembly: ExportRenderer(typeof(CustomImageTextButton), typeof(ButtonCustomRendererIOS))]
namespace YourAppNamespace.iOS.Renderers
{
    public class ButtonCustomRendererIOS : ButtonRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Button> e)
        {
            base.OnElementChanged(e);

            // Safely check if we have a valid button and control
            if (e.NewElement is Button customButton && Control != null)
            {
                // Set base alignment for content
                Control.HorizontalAlignment = UIControlContentHorizontalAlignment.Center;
                Control.VerticalAlignment = UIControlContentVerticalAlignment.Center;

                // Optional: Button styling (move this to a shared custom Button class if preferred)
                Control.Layer.CornerRadius = 15;
                Control.Layer.BorderWidth = 5;
                Control.Layer.BorderColor = Color.Red.ToCGColor();

                // Load the image with bundle support for Retina variants
                if (!string.IsNullOrEmpty(customButton.Image?.File))
                {
                    // Use 'using' to automatically dispose the UIImage and avoid memory leaks
                    using var uiImage = UIImage.FromBundle(customButton.Image.File);
                    if (uiImage != null)
                    {
                        var titleHeight = Control.TitleLabel.Font.LineHeight;
                        var imageSize = uiImage.Size;

                        // Adjust insets to move image up and text down
                        Control.ImageEdgeInsets = new UIEdgeInsets(-titleHeight, 0, 0, -imageSize.Width);
                        Control.TitleEdgeInsets = new UIEdgeInsets(imageSize.Height, -imageSize.Width, 0, 0);

                        // Optional: Add padding around content to prevent overcrowding
                        Control.ContentEdgeInsets = new UIEdgeInsets(8, 8, 8, 8);
                    }
                }
            }
        }

        // Handle dynamic changes to the button's image or text
        protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            
            // Re-calculate layout if image or text updates
            if (e.PropertyName == Button.ImageProperty.PropertyName || 
                e.PropertyName == Button.TextProperty.PropertyName)
            {
                UpdateButtonLayout();
            }
        }

        private void UpdateButtonLayout()
        {
            if (Element is Button customButton && Control != null)
            {
                Control.HorizontalAlignment = UIControlContentHorizontalAlignment.Center;
                Control.VerticalAlignment = UIControlContentVerticalAlignment.Center;

                if (!string.IsNullOrEmpty(customButton.Image?.File))
                {
                    using var uiImage = UIImage.FromBundle(customButton.Image.File);
                    if (uiImage != null)
                    {
                        var titleHeight = Control.TitleLabel.Font.LineHeight;
                        var imageSize = uiImage.Size;

                        Control.ImageEdgeInsets = new UIEdgeInsets(-titleHeight, 0, 0, -imageSize.Width);
                        Control.TitleEdgeInsets = new UIEdgeInsets(imageSize.Height, -imageSize.Width, 0, 0);
                    }
                }
            }
        }
    }
}

Key Improvements Explained #

1. Renderer Association: The ExportRenderer attribute links our iOS renderer to a custom CustomImageTextButton class in the shared project (we'll create that next).
2. Resource Management: Using using with UIImage ensures the image resource is disposed properly, preventing memory leaks.
3. Retina Support: UIImage.FromBundle automatically picks the correct image variant for the device's screen resolution.
4. Dynamic Layout Updates: The OnElementPropertyChanged override listens for changes to the button's image or text, then re-runs the layout logic to keep everything aligned.
5. Consistent Insets: The edge inset calculations are adjusted to reliably place the text directly below the image, centered properly.
6. Safety Checks: We use pattern matching (is Button customButton) to safely cast elements, avoiding potential null reference exceptions.

Shared Project Custom Button #

First, create a simple custom Button class in your shared project to use with the renderer:

namespace YourAppNamespace
{
    public class CustomImageTextButton : Button
    {
        // Add custom bindable properties here if you need additional customization (e.g., image-text spacing)
    }
}

How to Use It #

In your XAML, reference the custom button and set its Text and Image properties:

<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">

    <StackLayout Padding="20">
        <local:CustomImageTextButton 
            Text="My Button" 
            Image="icon.png" 
            WidthRequest="120" 
            HeightRequest="120" />
    </StackLayout>
</ContentPage>

Just make sure your image files (with optional @2x/@3x variants) are included in your iOS project with their Build Action set to BundleResource.

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