>

RikuloRikulo

Blog

Back to index


Building a List View Demo using Rikulo

Introduction

As we are building up the UI infrastructure of Rikulo, there is a critical widget we can't miss: List View. On our skretch paper, the rough architecture is like this:

Before we rush to create a List View widget, we would like to simulate its left part as an application of ScrollView first. Also this gives us a chance to test the strength of the Scroller utility.

The Outcome

To scroll down the list drag with mouse or swipe with finger.

Starting with ScrollView

We start with putting down a ScrollView widget at the center of mainView.

ScrollView view = new ScrollView(direction: Dir.VERTICAL);
view.profile.text =
    "location: center center; width: 80%; height: 80%";
view.classes.add("list-view");
mainView.addChild(view);

Loading List Items

Then, we are going to fill up the list items in ScrollView. Note that if we don't give ScrollView a content height, it will adjust automatically depending on the size and position of its children.

for (int x = 0; x < 50; ++x) {
    View child = new TextView("Row ${x + 1}");

    final int height = 50;
    child.classes.add("list-item");
    child.style.cssText = "line-height: ${height}px";
    child.style.userSelect = "none"; // so it does not interrupt dragging
    child.profile.width = "flex"; // take full width
    child.top = x * height;
    child.height = height;

    view.addChild(child);
}

Snap Function

Stepping further, we can add a snap function, which tells the ScrollView to "snap to" a position based on the ending position of a scrolling. In the implementation below, we let it snap to closest border of each list item.

ScrollView view;
view = new ScrollView(direction: Dir.VERTICAL, 
snap: (Offset off) {
    final num vlimit = 50 * 50 - view.innerHeight;
    final num y = off.y >= vlimit ? vlimit : ((off.y + 25) / 50).floor() * 50;
    return new Offset(off.x, y);
});

Conclusion

Based on the nature of ScrollView, such a List View example is really easy to achieve.

In our next blog post, we are going to explore creating another example using ScrollView: a 2D scrolling panel with its scrolling linked to side bars. Please don't hesitate to leave your comment.

comments powered by Disqus

CATEGORIES