layout options about interfacss HOT 11 CLOSED

Also a great suggestion - this would clearly be a useful thing to have and I'll definitely look into adding that.

Can you elaborate on what you mean by a block like layout?

from interfacss.

Well I was imagining being able to describe layout of child objects such that that parent places them in series based on the child's size. Not unlike the default html behavior in the browser.

Some examples would be a set of UIButtons in a toolbar like container - where the toolbar container would layout the children next to each other, possibly adding space between them if they don't flex.
This probably could be done directly today with InterfaCSS as is, but required manually maintained placement. I was thinking some of the layouts possible with the CSS flex/box model.

I've though about other layouts like the W3C Grid layout.

I'm pretty good at UIKit - but my CSS knowledge is very basic, so I may not be using the correct CSS terminology.

I suspect that there would need to be two passes during the styling phase to make this work,

from interfacss.

So I suspect that if layout managers were added that there would be two passes through the view tree during applyStyling - since the styles affecting size could be changed due to style.

I suspect that in the first pass that the views' frame wouldn't be touched - but the rest of the styles would be adjusted.

from interfacss.

Back when I added support for the xml based view definition file, I actually had ideas similar to this (i.e. use of custom layouts). However, I ended up with the conclusion that there already is a component that handles such things pretty well: UICollectionView. The only missing piece would be a nice way to configure the layout (UICollectionViewFlowLayout as well as other custom/pre-defined layouts), and possibly the layout attributes for individual items. This may be something I'll revisit going forward.

from interfacss.

The UICollectionView approach might work, but I think perhaps just moves the problem. I've started experimenting here: https://github.com/tbrannam/InterfaCSS/commit/c8feae40e600f9aebe2b4061f2a585956715e65c in the develop branch -- clearly I've introduced side effects. Could you comment on the approach?

Cheers

from interfacss.

Updated https://github.com/tbrannam/InterfaCSS/commit/1a4bb649a292fbc9226ef833c4ece81cf5092836

from interfacss.

Thanks for your input on this. Support for an easier way of handling layouts is certainly an interesting area, and I've also had thoughts on using implementations of layoutSubviews to support that. However, lately I've also come to the conclusion that it sometimes is better to use existing solutions, such as UICollectionView, that people are familiar with, rather than inventing custom solutions. But there are of course aspects such as performance and ease of configurability etc to consider, which might make a custom solution more interesting. When time permits I will dive a bit deeper into this (and look at your experiment branch in more detail), but at the very minimum, I'll probably add some sort pluggable layout handling mechanism.

from interfacss.

Great. Perhaps a pluggable layout mechanism would be best, especially since there are so many potential solutions.

Maybe I give a more concrete use case of a UITableViewCell where in landscape mode I'd like label1 and label 2 to be placed on a single line. In order to implement this, I'd need a way to apply a style that measures the content of UILabel1, UILabel2, and UILabel3 and allocate space between them all. In this case, it wouldn't be appropriate to have a UICollectionView embedded in a UITableViewCell.

Perhaps I've missed something in the style markup. Can you express this with the current style language?

// portrait - similar to structure on prototypeExampleCell
+---------------------------------------------------+
| UILabel1(some variable length text)               |
|                                          UILabel3 |
| UILabel2(some variable length text)               |
+---------------------------------------------------+
// landscape
+-------------------------------------------------------------------------------------+
|                                                                                     |
| UILabel1(some variable length text) UILabel2(some variable length text)    UILabel3 |
|                                                                                     |
+-------------------------------------------------------------------------------------+

from interfacss.

Yeah, you're right, a collection view wouldn't be very suitable for that scenario. And you haven't missed anything - the landscape layout can't quite be expressed the way you want it with the current styling language.

I guess this particular case can probably be solved by using attributed strings, or autolayout and different nibs for different orientations. However, I've just added support for auto sized views now, and I'm going to take a deeper look at either using some sort of layout manager or other ways of expressing relative insets (relative to other views that parent).

from interfacss.

I'm having some success in using the hooks for customization to implement layouts outside of InterfaCSS .

from interfacss.

With the recent addition of ISSLayout, I think this issue probably can be closed.

from interfacss.