简体   繁体   中英

Curved ListView divider

I am trying to create a listview of photos. Problem is that I want my listview row to have curved divider.

I've tried getting custom imageview shape, but that wasn't working well because the divider was a straight line, and there was lots of white space.

Secondly i've tried to get divider as a .png but that also gave me nothing but lots of white space. So how could I achieve something like this (Yellow line is divider):

在此输入图像描述

I have a simple idea:
Made a couple of "semy wavy" PNGs with transparent areas.
The 2 will be the upper and lower half (the curvature has to be small enough and the stroke wide enough to cut the wave in 2 halves longitudinally).

You'll end up with two rectangles (say a "header" and a footer).
When two rows are displayed, the top part of the second completes the curve of the first one.

Something like so:

在此输入图像描述 (upper part)

Your ImageView

在此输入图像描述 (lower part)

This is when 2 rows meet:

在此输入图像描述

The black part represents the second row ImageView.

Well, maybe it's not as curvy as you would desire, but no even such a bad result, in my opinion.
It gives you the idea.

You can do a better artist work, if you make it more "metallic" using gradients.

[EDIT]

You might argue that the very first row and the last one would have a "cut" top and bottom, respectively.
Right observation.

But I just had an idea on how to "round" them too.

You can add a headerView with the bottom part and a footerView with the top part, and this closes the loop(s).

While these headers scroll with the rows... les jeux sont fait !

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM