Look at the effect

Download the Pure Writing app and see this list effect. It feels special. Linyuan and envy fish, as back and net!

Ideas and trample pits

In effect, it looks as if the list item has been rotated to become a parallelogram.

I used Rotation, Clip, etc. They all ended up being too emotional.

In fact, if you think about it, the View we render on the screen is actually rectangular, even if the shape is irregular, there are four invisible corners filling the View.

So this item is really just a rectangle with a parallelogram inside it. Clear thinking, look at the specific operation.

implementation

Let’s see what happens first

Draw the parallelogram by customizing the View:

path? .moveTo(0f, 90f) path? .lineTo(sWidth, 4f) path? .lineTo(sWidth, (sHeight - 90)) path? .lineTo(0f, (sHeight - 4))Copy the code

The list is arranged in sequence without spacing. Black, gray, dark gray background is to distinguish. Normally, it can be white or transparent.

Problem a

I think that’s about it. It’s the distance between the purple, yellow, and cyan because it’s a rectangle filling problem, it’s a little bit wide. TopMargin = ApplicationContext.dp2px (-30) layoutParams.topmargin = applicationContext.

Question 2

From the effect, the first and last items do not know parallelogram, but trapezoid. So we can’t use custom parallelogram views for all of our lists. The first and last entries directly use solid-colored TextViews.

too young too simple a.

This what, direct BBQ…

If you look closely, the first one works because the second parallelogram has the same color as the first one, and when you move it up you get the trapezoid effect. The last one that uses the same TextView will also overwrite the previous one as it moves up. So the last entry should also be a custom trapezoid with the same Angle as the parallelogram above:

path? .moveTo(0f, 90f) path? .lineTo(sWidth, 4f) path? .lineTo(sWidth, sHeight) path? .lineTo(0f, (sHeight))Copy the code

Luckily, it didn’t turn over

conclusion

Some seemingly simple actually not difficult things are always easy to be ignored, or unimaginable. Due to the limited level, there were many detours in the middle and a lot of time was wasted. At this moment in my mind, I feel a group of wise words rushing past. The road ahead is long, I see no end, I will search up and down, together with you!

Incline lists, which will be implemented next with Compose and Flutter.