FluentLayout / Cirrious.FluentLayout

FluentLayout for Xamarin.iOS - sample uses MvvmCross
Microsoft Public License
148 stars 54 forks source link

AddConstraints with scale factor #26

Closed xleon closed 6 years ago

xleon commented 8 years ago

For ipad resolutions It would be very practical to be able to specify an scale factor when adding constraints. ie:

View.AddConstraints(2, // <- scale
    view1.AtTopOf(View, 30),
    view1.AtRightOf(View, 30)
)

That way, 30 would be 30 * 2 = 60 This factor would be applied to all margins.

The use case: I found myself doing this on every screen:

about.AtTopOf(aboutBackground, 15 * Multiplier),
about.AtBottomOf(aboutBackground, 15 * Multiplier),
about.AtLeftOf(aboutBackground, 15 * Multiplier),
about.AtRightOf(aboutBackground, 15 * Multiplier),

info.AtBottomOf(View, 10 * Multiplier),
info.WithSameWidth(View),
info.Height().EqualTo(15 * Multiplier),

And that´s not very pretty

gshackles commented 8 years ago

I like the idea but I'm not sold on the API described here. I'll have to put a little more thought into it, but finding something a bit more fluent would fit in better with the goals of the library, and clean things up a bit.

xleon commented 8 years ago

You´re right, It kind of looks like a hack. I was thinking about creating a "FluentLayoutGroup" to keep track of all the layouts instead of having the user doing so. Then we could add methods like "SetScale()", etc.

This could also open new doors, like ie: var topLayout = layoutGroup.GetLayoutsFor(view).Top() or var widthLayout = layoutGroup.GetLayoutsFor(view).Width() so the user don´t need to work with identifiers

xleon commented 8 years ago

FluentLayoutGroup could have methods like HideView(view, animated), ShowView(view, animated). Given than a view can have more than one constraint. If we want to hide/show a view, we need to activate/deactivate all those constraints. FluentLayoutGroup could handle that and other things.

This would open doors to inherit from it and create a FluentStackPanel, etc (I´m currently starting this)

gshackles commented 8 years ago

Yeah something like that is what I'm currently thinking about. Before spending too much time implementing anything I think the right move is to put some real thought into what the API would look like and see what makes sense. In particular, I'd like to see if it makes sense to push this in the 2.x release or if it makes more sense as part of a larger 3.0 release where we can really move things around and make breaking changes.

xleon commented 8 years ago

Well, I would include small fixes like FullSizeOfin version 2.x. And doing Group Layouts would allow you to remove extensions like VerticalStackPanelConstraints and AdvancedVerticalStackPanelConstraints. They would also make identifiers useless or almost useless. So for that kind of things I would move it to version 3.0.

Regarding the API, what are your thoughts? Here I go with some ideas:

FluentLayoutGroup

var group = new FluentLayoutGroup(View)
    .AddLayout(whatever.AtTopOf(View))
    .AddLayouts(username.Below(whatever, 10), username.WithSameCenterX(View))
    .WithMarginScale(2.0)
    .SetAnimation(duration: 0.4, delay:0.0, options:UIViewAnimationOptions.CurveEaseIn, completed:() => { Mvx.Trace("finish")})
    .Build(); // will add constraints to "View"

group.Hide(animated:true); // will deactivate all constraints
group.Hide(username, animated:true); // deactivate username view constraints
group.Show(animated:true);  // will activate all constraints
group.Show(username, animated:false); // activate the constraints of user name view
group.LayoutsFor(username).Top().Constant = 450;
group.LayoutsFor(username).Width().Constant = 200;
group.Animate(); // useful after changing constants 
group.Dispose();

FluentStackPanel : FluentLayoutGroup

var stackPanel = new FluentStackPanel(scrollView)
    .SetDirection(FluentStackPanelDirection.Horizontal)
    .AddView(something)
    .AddViews(one, two, three)
    .SetMargins(new Margins())
    .SetMarginsFor(specificView, new Margins())
    .Build();  // will add constraints to "scrollView"

FluentSlider : FluentStackPanel

var helpWalkthrough = new FluentSlider(scrollView)
    .AddViews(slide1, slide2, slide3, slide4, slide5)
    .OnPageChange(pageNumber => { Mvx.Trace("current page is " + pageNumber); })
    .Build();    

Last one could be far away from the library purpose, but if we finally do group layouts it could be fairly easy. Just thinking out loud...

gshackles commented 6 years ago

Closing this out since it's been idle for over a year, but still happy to consider improvements around this down the line as ideas come up 😄