Editing Translucent property of NavigationBar adds padding/margin

TrevorYokumTrevorYokum USMember ✭✭

Hello everyone, I've been working through the iOS Code Only UI tutorial and making a small app with Xamarin for about a week now - I'm having a bug that I can't quite find a solution to. Whenever I change the Translucent property of my NavigationController.NavigationBar to false, the app appears with padding or a margin below the NavigationBar that I did not add. In the photo below, you can see the red rectangle has some extra padding boxed in. I use, with Xamarin on Visual Studio in C#, "this.NavigationController.NavigationBar.Translucent = false;" to make the NavigationBar 100% opaque.

This is what it looks like without the ".Translucent = false;" line:

Posts

  • BytesGuyBytesGuy GBXamarin Team Xamurai

    When the bar is translucent, the view is actually rendered beneath it - so the top of your view is at the very top of the screen. For this reason, you need to give yourself some space otherwise your views will be under the bar!

    When you set the bar to opaque, nothing is rendered underneath it, so the top of the view is at the bottom of the bar.

    So this margin / padding you see is the offset that was added to prevent views from rendering under the translucent bar.

    It should just be a case of changing the constraint constants. Can you post the code here?

  • TrevorYokumTrevorYokum USMember ✭✭

    @BytesGuy said:
    When the bar is translucent, the view is actually rendered beneath it - so the top of your view is at the very top of the screen. For this reason, you need to give yourself some space otherwise your views will be under the bar!

    When you set the bar to opaque, nothing is rendered underneath it, so the top of the view is at the bottom of the bar.

    So this margin / padding you see is the offset that was added to prevent views from rendering under the translucent bar.

    It should just be a case of changing the constraint constants. Can you post the code here?

    Thanks for the reply, BytesGuy. I most certainly can include the code here; the foundation of this app is built following the "Creating iOS User Interfaces in Code" tutorial by Xamarin, located here: https://developer.xamarin.com/guides/ios/application_fundamentals/ios_code_only/

    Here is my overridden ViewDidLoad() method:

    public override void ViewDidLoad()
        {
            base.ViewDidLoad();
    
            View.BackgroundColor = UIColor.Gray;
            Title = "My Custom View Controller";
    
            nfloat h = 31.0f;
            nfloat w = View.Bounds.Width;
    
            usernameField = new UITextField
            {
                Placeholder = "Enter your username!",
                BorderStyle = UITextBorderStyle.RoundedRect,
                Frame = new CGRect(10, 82, w - 20, h)
            };
            passwordField = new UITextField
            {
                Placeholder = "Enter your password!",
                BorderStyle = UITextBorderStyle.RoundedRect,
                Frame = new CGRect(10, 114, w - 20, h),
                SecureTextEntry = true
            };
    
            submitButton = UIButton.FromType(UIButtonType.RoundedRect);
            submitButton.Frame = new CGRect(10, 170, w - 20, 44);
            submitButton.SetTitle("Submit", UIControlState.Normal);
            submitButton.Layer.BorderWidth = 1f;
            submitButton.Layer.BorderColor = new CGColor(0, 0, 0, 1);
            submitButton.Layer.BackgroundColor = new CGColor(255, 255, 255, 1);
            submitButton.Layer.CornerRadius = 5f;
    
            errorLabel = new UILabel();
            errorLabel.Frame = new CGRect(10, 220, w - 20, 44);
            errorLabel.Text = "That's the wrong password!";
            errorLabel.TextColor = UIColor.Red;
            errorLabel.Hidden = true;
    
            var loginVC = new UIViewController()
            {
                Title = "Login Success!",
            };
            loginVC.View.BackgroundColor = UIColor.Purple;
    
            var ticketVC = new UITableViewController()
            {
                Title = "Tickets"
            };
    
            ticketVC.TableView.RowHeight = 150f;
    
            submitButton.TouchUpInside += (sender, e) =>
             {
                 if (passwordField.Text.Equals("cwtg"))
                 {
                     this.NavigationController.PushViewController(ticketVC, true);
                 }
                 else
                 {
                     errorLabel.Hidden = false;
                 }
             };
    
            var logo = UIImage.FromFile("PolarisLogoBlank.png");
            var iView = new UIImageView(logo);
            var newRect = new CGRect();
            newRect = iView.Frame;
            newRect.Height = NavigationController.NavigationBar.Frame.Size.Height;
            newRect.Width = iView.Frame.Size.Width;
    
            iView.ContentMode = UIViewContentMode.ScaleAspectFit;
            iView.Frame = newRect;
    
            NavigationItem.TitleView = iView;
            //NavigationController.NavigationBar.BarTintColor = UIColor.FromPatternImage(UIImage.FromFile("DenimBg.png"));
            //NavigationController.NavigationBar.Translucent = false;
    
            usernameField.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
            passwordField.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
            submitButton.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
    
    
            View.AddSubviews(usernameField, passwordField, submitButton, errorLabel);
        }
    

    And here is my AppDelegate.cs FinishedLaunching() method:

    public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
        {
            // create a new window instance based on the screen size
            Window = new UIWindow(UIScreen.MainScreen.Bounds);
    
            var navController = new UINavigationController();
    
            var cvc = new CustomViewController();
            navController = new UINavigationController(cvc);
            navController.AutomaticallyAdjustsScrollViewInsets = false;
            navController.EdgesForExtendedLayout = UIRectEdge.All;
            navController.NavigationBar.Translucent = false;
    
            // If you have defined a root view controller, set it here:
            Window.RootViewController = navController;
    
            // make the window visible
            Window.MakeKeyAndVisible();
    
            return true;
        }
    
  • TrevorYokumTrevorYokum USMember ✭✭

    @BytesGuy - I totally just fixed the problem with what help you provided. I didn't realize that in the "Code-only UI" creation tutorial, they were adjusting each Frame's CGRect values to account for the NavigationBar being translucent. It might be a good idea to mention that in the tutorial! Just a thought. But much thanks, cleared up my problem!

Sign In or Register to comment.