UIProgressView disappear or doesn't scale when device rotate

Question

I am using Xamarin.IOS, I have UIprogressView inside a UIScrollView with two buttons as well.

I am setting the UIprogressView frame by code in ViewWillLayoutSubviews method:

        CGRect newFrame;
        newFrame.Width = MyScrollView.Frame.Width / 2;
        newFrame.Location = new CGPoint(0, NextButton.Frame.Y);
        MyProgressView.Frame = newFrame;
        MyProgressView.Transform = CGAffineTransform.MakeScale(1, 20f);
        MyProgressView.TrackTintColor = CustomColors.CustomColors.GetColor(CustomColors.CustomColors.ColorGray);
        MyProgressView.ProgressTintColor = CustomColors.CustomColors.GetColor(CustomColors.CustomColors.ColorBlue);

The problem is when I rotate the device from portrait to landscape, only the progressview will disappear. Meanwhile the next button is there and both progress view and next button have same Y!.

If I stopped using MyProgressView.ProgressTintColor I can see the progress view after rotation but it is not scaled.

Any idea how to fix it?

This is the UIProgressView I am talking about:

newFrame.Location = new CGPoint(0, NextButton.Frame.Y + you Buttons height). Try this — Darshan Karekar, May 31 '17 at 11:29

score 1 · Answer 1 · answered May 26 '17 at 06:58

Create this UIProgressView file in your Helper folder

LoadingOverlay.cs

public class LoadingOverlay : UIView
    {
        // control declarations
        UIActivityIndicatorView activitySpinner;
        UILabel loadingLabel;

    public LoadingOverlay(CGRect frame) : base(frame)
    {
        // configurable bits
        BackgroundColor = UIColor.Black;
        Alpha = 0.75f;
        AutoresizingMask = UIViewAutoresizing.All;

        nfloat labelHeight = 22;
        nfloat labelWidth = Frame.Width - 20;

        // derive the center x and y
        nfloat centerX = Frame.Width / 2;
        nfloat centerY = Frame.Height / 2;

        // create the activity spinner, center it horizontall and put it 5 points above center x
        activitySpinner = new UIActivityIndicatorView(UIActivityIndicatorViewStyle.WhiteLarge);
        activitySpinner.Frame = new CGRect(
            centerX - (activitySpinner.Frame.Width / 2),
            centerY - activitySpinner.Frame.Height - 20,
            activitySpinner.Frame.Width,
            activitySpinner.Frame.Height);
        activitySpinner.AutoresizingMask = UIViewAutoresizing.All;
        AddSubview(activitySpinner);
        activitySpinner.StartAnimating();

        // create and configure the "Loading Data" label
        loadingLabel = new UILabel(new CGRect(
            centerX - (labelWidth / 2),
            centerY + 20,
            labelWidth,
            labelHeight
            ));
        loadingLabel.BackgroundColor = UIColor.Clear;
        loadingLabel.TextColor = UIColor.White;
        loadingLabel.Text = "Loading Data...";
        loadingLabel.TextAlignment = UITextAlignment.Center;
        loadingLabel.AutoresizingMask = UIViewAutoresizing.All;
        AddSubview(loadingLabel);

    }

    /// <summary>
    /// Fades out the control and then removes it from the super view
    /// </summary>
    public void Hide()
    {
        UIView.Animate(
            0.5, // duration
            () => { Alpha = 0; },
            () => { RemoveFromSuperview(); }
        );
    }
}

and Use this way

to show the loading

var loadingOverlay = new LoadingOverlay(UIScreen.MainScreen.Bounds);
View.Add(loadingOverlay);

and to hide it

loadingOverlay.Hide();

Thank you for commenting but, I was asking for the horizontal progress view. I have updated my question with an image. — Hadi Al Tinawi, May 26 '17 at 07:16

score 0 · Accepted Answer · answered Jun 21 '17 at 09:50

0

I fixed it by re-scale it at every rotate:

public override void WillAnimateRotation(UIInterfaceOrientation toInterfaceOrientation, double duration)
{
     progressView.Transform = CGAffineTransform.Scale(progressView.Transform,1, 20f);   
}

answered Jun 21 '17 at 09:50

Hadi Al Tinawi

429
7
22

UIProgressView disappear or doesn't scale when device rotate

2 Answers2