Juanpe / SkeletonView

☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting
MIT License
12.51k stars 1.1k forks source link

Fix last line text alignment when using padding insets #477

Closed inickt closed 2 years ago

inickt commented 2 years ago

Summary

Fixes #470. In addition to center, it turns out right alignment was also broken when some padding insets were set.

The solution was more straightforward than I thought. I passed in the paddingInsets so we could correctly determine how to align the last line relative to the superlayer. Since the left and right padding could be different, we couldn't derive this from the existing properties.

I simplified the math I originally used to figure out the right and center alignment values. If it is still confusing, I'd be happy to split the calculations over a couple lines and annotate with comments.

I tested by modifying the demo app. I am not too familiar with the project and whether this could be something easily unit tested.

Screenshots

Right Alignment | Parameters | Before | After | | --- | --- | --- | | Left Padding: 0
Right Padding: 0
Percent: 50 | | | | Left Padding: 100
Right Padding: 100
Percent: 50 | | | | Left Padding: 100
Right Padding: 0
Percent: 50 | | | | Left Padding: 0
Right Padding: 100
Percent: 50 | | | | Left Padding: 50
Right Padding: 100
Percent: 100 | | |
Center Alignment | Parameters | Before | After | | --- | --- | --- | | Left Padding: 0
Right Padding: 0
Percent: 50 | | | | Left Padding: 100
Right Padding: 100
Percent: 50 | | | | Left Padding: 0
Right Padding: 0
Percent: 100 | | | | Left Padding: 100
Right Padding: 0
Percent: 100 | | | | Left Padding: 0
Right Padding: 100
Percent: 100 | | | | Left Padding: 50
Right Padding: 100
Percent: 100 | | | | Left Padding: 100
Right Padding: 100
Percent: 100 | | |

Requirements

inickt commented 2 years ago

Thanks for maintaining such a great project!