Alignment issue fix

[KazaiMazai]

What has happened?

There were cases, when selection view was not aligned appropriately at first appearance. For example, when SegmentedPicker was embedded into NavigationView and selection view itself was something like:

VStack {
    Spacer()
    Color.black.frame(height: 1)

}

Actually, there are two issues:

1. Incorrect selection view alignment
   2 Incorrect selection view size

Both occured at first rendering of selection view in different alignment positions and could be cured by selecting and re-selecting different items.

Solution

1. Incorrect selection view alignment

New parameter - selectionAlignment of VerticalAlignment type was introduced.
It allows to specify exactly how the selection view should be vertically aligned to segment content items and fixes unwanted jumps of the selection view.

Default value is VerticalAlignment.center which is recommended config for capsule-style selection.
However, for underline-style selections, VerticalAlignment.bottom is recommended.

(See the Readme for example)

2. Incorrect selection view size

This is another first-render type of issues.
The way we get content view sizes with geometry reader doesn't seems to be 100% exact.

Button(
    content(...)
) 
.background(GeometryReader { proxy in
    Color.clear.onAppear { frames[index] = proxy.frame(in: .global) }
})

I don't see any workarounds here other than to trigger segment view re-selection to get the correct appearance.

@State var selectedIndex: Int?

var body: some View {
    SegmentedPicker(...)
        .onAppear {
            selectedIndex = 0
         }
}

(See the Readme for example)