zenangst / Blueprints

:cyclone: Blueprints - A framework that is meant to make your life easier when working with collection view flow layouts.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Mosaic Layout

guidev opened this issue · comments

I'm having troubles understanding how the Mosaic Layout works...

I don't understand why the first "block" isn't aligned on the right.

simulator screen shot - iphone 8 - 2018-09-13 at 18 51 27

let mosaicLayout = VerticalMosaicBlueprintLayout(
  itemSize: CGSize.init(width: 50, height: 400),
  minimumInteritemSpacing: 15,
  minimumLineSpacing: 15,
  sectionInset: EdgeInsets(top: 15, left: 15, bottom: 15, right: 15),
  patterns: [
    MosaicPattern(alignment: .left, direction: .vertical, amount: 2, multiplier: 0.5),
    MosaicPattern(alignment: .left, direction: .horizontal, amount: 2, multiplier: 0.33),
    MosaicPattern(alignment: .left, direction: .vertical, amount: 1, multiplier: 0.5),
    MosaicPattern(alignment: .right, direction: .vertical, amount: 2, multiplier: 0.5)
])

Hey @guidev, you might have stumbled upon a bug in the layout. To me, it looks like it applies either section inset or minimumIter item spacing twice for the items in the first section.

I'm gonna great a small sample project just to try it out, btw; thanks a lot for supplying the actual layout parameters that are causing a ruckus. It will speed up debugging a lot. I'll get back to you when I have more to share.

@guidev I've pushed a branch fix/layout-bug-in-mosaic-layout which should fix the issues that you are seeing. Mind taking it for a spin just to confirm?

Thank you for your prompt reply!

Unfortunately, it doesn't seem fixed...

There's definitely 15px extra on the right of the first section!

screen shot 2018-09-13 at 21 41 43

Did you modify your layout from the example you gave me? If so, could you pass me the new one?
When I tried it, it actually looked like it was rendering correctly 🤔

This is the result that I get when using that configuration:

screen shot 2018-09-13 at 23 47 02

Hey @guidev, have you had time to dig into this any further?

Hi, here's a test project highlighting the issue.

Xcode 10 GM
Swift 4.2

https://github.com/gorillatech/Test-Mosaic

@guidev thanks mate, aiming to take a stab at it later this evening (if life allows), I'll keep you posted!

@guidev hey mate, I just tried your project and it seems like it working just fine.
This is what it looks like for me when I run the project that you linked:
(I tried it in iPhone 8 and on the iPhone 8Plus)

simulator screen shot - iphone 8 - 2018-09-14 at 20 17 52§

Could you share what version of the simulator you are running? (just to make sure)

Ok, this is weird...

I think I figured it out... I just deleted my Derived Data folder and now everything works fine.
Apparently, changing the Podfile to point to the new branch wasn't enough, Xcode didn't recompile the framework but kept using the old one.

Anyhow... thank you for your amazing support!

screen shot 2018-09-14 at 21 49 34

There's something else I wanted to ask you... Why do I have to specify an itemSize for this kind of layout? If I change the width nothing changes

@guidev fantastic! Yeah, there are two things that are hard when it comes to programming, naming things and caching 🤓 Super happy that you solved it!

Well, the item size is a bit confusing at times, I give you that. It should really just be a height for this collection as it is the only thing that really matters. To come completely clean, this is probably just an oversight on my part when developing the framework. I had this thought that all layouts should share similar initializers as they all derived from the same base class (BlueprintLayout) but... it doesn't really make that much sense as width is totally ignored. This should be fixed in the future to make the init method less confusing. Cheers for bringing it up because it does not make sense 🍻

@guidev I've made a new release with the fix so you should update your Podfile to use the latest release :)