UISlider with increased slider size but no thumb d

2019-06-14 11:01发布

问题:

I need to increase size of slider in the iOS app created using Xamarin Forms. I tried with following custom renderer that overrides LayoutSubviews. It increases the size but there is an unacceptable size increase for the thumb. How to reduce the size of the thumb keeping the increased height of the slider?

It is possible in Android as shown here: Increase height of slider without affecting thumb in Android App

iOS References:

  1. Custom UISlider - Increase "hot spot" size

  2. Increasing a thumbs "click area" in UISlider

C# Custom Renderer

[assembly: ExportRenderer(typeof(MySlider), typeof(MySliderRenderer))]
namespace CustomRenderer.iOS
{
    class MySliderRenderer : Xamarin.Forms.Platform.iOS.SliderRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
        {
            base.OnElementChanged(e);   
            Control.MinimumTrackTintColor = UIColor.FromRGB(0xE6, 0x00, 0x06);
            Control.ThumbTintColor = UIColor.Red;
            Control.MinimumTrackTintColor = UIColor.Orange;
            Control.MaximumTrackTintColor = UIColor.Yellow;
            //Control.SetThumbImage(UIImage.FromFile("myicon.png"), UIControlState.Normal);
        }

        public override void LayoutSubviews()
        {
            base.LayoutSubviews();
            CGAffineTransform transform = CGAffineTransform.MakeScale(1f, 12.0f);
            transform.TransformSize(this.Frame.Size);
            this.Control.Transform = transform;            
        }
    }
}

UPDATE - REFERENCES - Renderer

  1. Customizing Control Rendering in Xamarin.Forms

  2. Implementing a View - Rendering a platform-specific view

  3. iOS range slider for Xamarin and Xamarin.Forms

  4. Fullscreen Video Background Control for Xamarin.Forms

回答1:

Override TrackRectForBounds to change its height instead of changing transform .

In MySliderRenderer

class MySliderRenderer : SliderRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
    {
        SetNativeControl(new MySlideriOS());
        base.OnElementChanged(e);
    }
}

Create a subclass of UISlider

public class MySlideriOS : UISlider
{
    public MySlideriOS() {
        this.MinimumTrackTintColor = UIColor.FromRGB(0xE6, 0x00, 0x06);
        this.ThumbTintColor = UIColor.Red;
        this.MinimumTrackTintColor = UIColor.Orange;
        this.MaximumTrackTintColor = UIColor.Yellow;
    }

    public override CGRect TrackRectForBounds(CGRect forBounds)
    {
        CGRect rect =  base.TrackRectForBounds(forBounds);
        return new CGRect(rect.X, rect.Y, rect.Width, 20);
    }
}

My test

Here is Sample