search

bradmartin / nativescript-wear-os

Consolidated repo for WearOS with NativeScript
Apache License 2.0
34 stars 7 forks source link

Wear OS ListView items don't hug the edge of the screen (circular watch face) #6

Open finger563 opened 5 years ago

finger563 commented 5 years ago

Instead they follow a linear path between the center of the left side of the screen and the middle of the top or bottom of the screen. The WearOS app list view has each item following an arc that makes the items hug the side of the screen

finger563 commented 5 years ago

I think this is because of this line which manually moves the children over using a linear function. Based on the wear os documentation I think WearableRecyclerView::setEdgeItemsCenteringEnabled(boolean) should be used instead?

finger563 commented 5 years ago

Looking further - maybe not :/ see this post about needing a custom function

finger563 commented 5 years ago

After much fiddling I've found that the code below allows you to control how much the items hug the side of the screen and that the value below of curveFactor = 0.5 approximately matches the behavior of the wearOS app menu when scaling is not applied, and curveFactor = 1.5 approximately matches the behavior of the wearOS app menu when scaling is applied

var middle = parent.getWidth() / 2.0;
var curveFactor = 0.5;
var start = 1.0 - curveFactor * Math.abs(yRelativeToCenterOffset - 0.5);
var x = (start - Math.sin(yRelativeToCenterOffset * Math.PI)) * middle;
child.setX(x);
Erudition commented 2 years ago

I noticed this linear path too. Would love for this to be PR'd