Subview in Scrollview Fluent layout

Question

I'm new at using Fluent layout for a Xamarin.iOS project and I now stumbled on a problem that I don't know how to solve.

The situation is like this:

I have a scrollview as the mainView and some texts inside that, and I now want to add another view (let's call it "subView") containing other texts. Why I want the "subView" is because I have a "Hide/Show" button that are suppose to Hide or Show the "subView".

Where'm I suppose to add the constraints for positioning the stuff inside "subView"? Inside subView.AddConstraints(), or in mainView.AddConstraints?

I don't know how to do this, can somebody please help me?

Example of what im doing

Answer 1

Try to use this code:

CGRect rect = new CGRect(0, UIApplication.SharedApplication.StatusBarFrame.Height, UIScreen.MainScreen.ApplicationFrame.Width , UIScreen.MainScreen.ApplicationFrame.Height);
UIScrollView Mainscrollview = new UIScrollView(rect) { BackgroundColor = UIColor.Gray };
View.AddSubview(Mainscrollview);
this.View.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();

var someLablel = new UILabel();
var button = new UIButton { BackgroundColor = UIColor.Gray };
var blueView = new UIView { BackgroundColor = UIColor.Blue };
Mainscrollview.AddSubviews( someLablel,button, blueView);

Mainscrollview.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();


Mainscrollview.AddConstraints(
     someLablel.AtTopOf(Mainscrollview, 50),
     someLablel.AtLeftOf(Mainscrollview, 10),
     someLablel.AtRightOf(Mainscrollview, 10),
     someLablel.Height().EqualTo(50),

     button.AtBottomOf(someLablel, 10),
     button.WithSameLeft(someLablel),
     button.WithSameRight(someLablel),
     button.WithSameHeight(button),

     blueView.AtBottomOf(button, 10),
     blueView.WithSameLeft(someLablel),
     blueView.WithSameRight(someLablel),
     blueView.AtBottomOf(Mainscrollview, 10)
);

//*do as above*
//blueView.AddSubviews(SubViewLabel1, Another , more);
//blueView.SubviewsDoNotTranslateAutoresizingMaskIntoConstraints();
//blueView.AddConstraints( );

PS:

As what i said above, FluentLayout is used to describe the relationship between parenet view and subview or subview and subview (with the same parent view). We can't relate subview to it's super super view (e,g ,subviewLabel and Mainscrollvew in the pic). And What's the most important is the Constraints we add must be sufficient, which means the view must get its position and size with those Constraints.

Answer 2

Where'm I suppose to add the constraints for positioning the stuff inside "subView"? Inside subView.AddConstraints(), or in mainView.AddConstraints?

Views are assigned the constraints which lay out their direct subviews, so the controls inside subView should be laid out with subView.AddConstraints(). If subView is a subview of mainView, then it should be laid out with mainView.AddConstraints().

EDIT: An example:

mainView.Add(subView);
subView.Add(someOtherView);

var myPadding = 12f;

mainView.AddConstraints(new FluentLayout[]
{
    subView.AtTopOf(mainView, myPadding),
    subView.AtLeftOf(mainView, myPadding),
    subView.AtRightOf(mainView, myPadding),
    subView.AtBottomOf(mainView, myPadding)
});

subView.AddConstraints(new FluentLayout[]
{
    someOtherView.AtTopOf(subView, myPadding),
    someOtherView.AtLeftOf(subView, myPadding),
    someOtherView.AtRightOf(subView, myPadding),
    someOtherView.AtBottomOf(subView, myPadding)
});

Hiding and showing views is a separate issue - you would need to destroy and recreate separate constraints when an action is taken that shows or hides subView, or use MvvmCross to bind certain constraints to ViewModel properties, which you can find instructions on here.