I've created an App I call eTabber and it show guitar tabs in Android, iOS en UWP. I currently working on the iOS version and it seems to scale totally different from the Android version. That is not what I expected at all. Here are two samples. It is a complex application using a ChordPro parser that parses a text file containing ChordPro text. It then passes control to a TabContainer class that evaluates the ChordPro tree and creates a Xamarin.Forms control with content coming from code. The Andoid version has a bit too much spacing but further look allright. The iOS version doesn't look good at all.
To make a bit more clear what is what. The colored images show a ColumnLayout (which is one of my own layout classes) in Green and a FlexLayout in Yellow. The ColumnLayout is working fine b.t.w.
Here's the Android layout:
and here's the iOS layout:
Here's the code for the word with or without a Chord (the black background blocks).
private void HandleBlocks(ILine line, Layout<View> layout, IEnumerable<Block> blocks, bool inline = false) { if (!blocks.Any()) { var label = CreateLabel(line, string.Empty, UseColor); layout.Children.Add(label); } else { foreach (var block in blocks) { switch (block.GetType().Name) { case nameof(Chord): HandleChord(line, layout, (Chord)block); break; case nameof(Word): HandleWord(line, layout, (Word)block, inline); break; default: break; } } } } private void AddSpace(ILine line, Layout<View> layout) { Label label = CreateLabel(line, string.Empty, UseColor); label.Padding = new Thickness(0, 0, 2, 0); layout.Children.Add(label); } private void HandleWord(ILine line, Layout<View> layout, Word word, bool inline) { foreach (var syllabe in word.Syllables) { var chordLayout = new StackLayout { Orientation = StackOrientation.Vertical, Spacing = 0, StyleClass = new List<string> { "WordContainer" } }; if (syllabe.Chord != null) { HandleChord(line, chordLayout, syllabe.Chord); } else { if (!inline) { var emptyLabel = CreateLabel(line, string.Empty, UseColor); chordLayout.Children.Add(emptyLabel); } } var label = CreateLabel(line, syllabe.Text ?? string.Empty, UseColor); chordLayout.Children.Add(label); layout.Children.Add(chordLayout); } AddSpace(line, layout); } private void HandleChord(ILine line, Layout<View> layout, Chord chord) { var text = chord.Text == null ? string.Empty : $" {chord.Text}"; var label = CreateLabel(line, text, bold: true, textColor: ChordColor); layout.Children.Add(label); }