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

Possibility to align multiline skeleton view #428

Closed literallysofia closed 2 years ago

literallysofia commented 2 years ago

Hello! πŸ‘‹

I've been using this framework for a few months now and came across the following scenario while working on a project:

We have a screen with a vertical stack view aligned in the view's center. This stack has some labels with more than one line and with text center aligned. When using skeleton views on these labels, it looks kind of wrong because the last line (when not filling 100%) is always aligned to the left. Our goal was to be able to align the last line of the skeleton according to how the label's text is aligned. Forcing it to always align left poses a limitation to how we could customise skeleton views, since it's mostly UI...

That being said, I see two possible approaches: 1️⃣ Add a new property (like lastLineFillPercent and linesCornerRadius) to define the skeleton's alignment, could be left by default. Other options would be center and right. 2️⃣ Use a similar approach to number of lines, and given the text alignment of a label, apply it to the skeleton.

I feel like this feature would be a big plus! Didn't really see anyone pointing this issue which surprises me. πŸ˜… I mean, when making skeleton views (which are placeholders) for text, it really does makes sense for it to have the same alignment. Let me know how you feel. I started working on a solution, but noticed that in the contribution guidelines you asked to submit an issue first to get some input.

Juanpe commented 2 years ago

Hi @literallysofia!

Wow, TBH I didn't realize yet πŸ˜… Well, I think it could be a great feature πŸ‘πŸΌ

About the approaches...I really like the second approach more than the first one πŸ‘ŒπŸΌ

iOSDias commented 2 years ago

@Juanpe Hello, did you realize first approach? It is necessary to make multiline center align according to design