CODEWITHSUNDEEP
iosobjective-cxamarinxamarin.iosautolayout
Tinku Chacko
Tinku Chacko

Reputation: 520

Auto layout constraints for dynamic view

I am creating a custom uicontrol for IOS(xamarin.iOS). The uicontrol consists of textfield and button. I have creating custom control by extending UIView

Coplexity

The width of the textfield will be given by user and will need to be rendered on runtime.

Scenario: The user will be given a form in the application where they can enter width of the control, so for example, if the user entered 50 and hits the submit button, when custom UIcontrol is rendered in next page it should only take 50% of the total screen width.

Issue

I need to apply auto layout constraints for the text field. and I have added the constraints, only the top and left constraints are working as expected. When I rotate the device the right margin is not changing proportionally

this.AddConstraint (
              NSLayoutConstraint.Create(textField,NSLayoutAttribute.Left,NSLayoutRelation.Equal,this, NSLayoutAttribute.Left, 1 , 10)
        );

        this.AddConstraint (
            NSLayoutConstraint.Create(textField,NSLayoutAttribute.Right,NSLayoutRelation.Equal,this, NSLayoutAttribute.Left, 1 , ((UIScreen.MainScreen.Bounds.Width * editTextWidth)/100)+10)
        );

        this.AddConstraint (
            NSLayoutConstraint.Create( textField, NSLayoutAttribute.Top, NSLayoutRelation.Equal,label, NSLayoutAttribute.Top, 1, 30+10)
        );

        this.AddConstraint (
            NSLayoutConstraint.Create(textField, NSLayoutAttribute.Height, NSLayoutRelation.Equal, null, NSLayoutAttribute.NoAttribute, 0, 3 * 10)
        );

Upvotes: 0

Views: 588

Answers (1)

Kaushil Ruparelia
Kaushil Ruparelia

Reputation: 1178

I don't know how you do it in xamarin but I could explain how this can be done.

I am assuming that your starting x and y co ordinates remain the same.

The two constraints then you could add to the start are:

NSLayoutConstraint.Create(textField,NSLayoutAttribute.Left,NSLayoutRelation.Equal,this, NSLayoutAttribute.Left, 1 , 10)

NSLayoutConstraint.Create( textField, NSLayoutAttribute.Top, NSLayoutRelation.Equal,label, NSLayoutAttribute.Top, 1, 30+10)

The other two constraints you should add are the constant height and width constraints of the text field.

And when the view loads, just change the constant of the same constraints in an array which you could simple get by doing this:

constraintsArray = textfield.constraints;

This would set your constaints initially.

Now set up your view to listen for the Device orientation changes and update the constants again:

NSNotificationCenter.DefaultCenter
                .AddObserver("UIDeviceOrientationDidChangeNotification", DeviceRotated );

    private void DeviceRotated(NSNotification notification){
        switch (UIDevice.CurrentDevice.Orientation){
        case  UIDeviceOrientation.Portrait:
            constraint.constant = ((UIScreen.MainScreen.Bounds.Width * editTextWidth)/100);
            break;
        case UIDeviceOrientation.LandscapeLeft:
        case UIDeviceOrientation.LandscapeRight:
            constraint.constant = ((UIScreen.MainScreen.Bounds.Height * editTextWidth)/100);
        }
    }

Upvotes: 1

Related Questions