关注细节－TWaver Android

一款优秀的产品体现在细节，UI产品更是如此，精确到每个像素，平衡性能与效果的最佳点，是我们追求的目标，细节的实现过程会有困难，结果却让人兴奋，TWaver Android的开发正是如此，所以我忍不住想分享一些细节点。

 

位置的细节

 

位置与坐标是图形界面的基础，TWaver Android中使用了绝对与相对坐标结合的思路，采用漫游模式交互，代码上与以往twaver产品会有所不同，这里列举部分特点。

 

绝对位置的两个要素

 

（location, anchor position）

 

位置是图形元素最基本的信息，自然想到的是点（Point）作为位置（location），比如说你的位置在(250, 360)，但人不是大头针，物体总是有尺寸，一个点代表不了位置的全部信息，比如人的位置是算脚尖还是脚跟呢？于是我们引入挂载点位置（anchorPosition）参数，可以是左上角，中心或者其他位置，于是在TWaver Android中，你会看到位置的两个要素：位置（location）和挂载点（anchor position）

下面示意图中，两个网元相同的位置（100, 100），但挂载点不同，一个在中心，另一个在左上角。

 

 

下面的代码的作用是，设置网元位置（100, 100），挂载点位置为左上角（left top，初始为居中）

 

 

node.setLocation(100, 100);
node.setAnchorPosition(Position.LEFT_TOP);

 

 

相对位置的三个要素

 

（position, offset, anchor position）

 

对于相对位置，TWaver Android引入了第三个要素（position），twaver中网元可以组合，每个节点由一个主体（body）和一堆附件（attachments）组成，其中附件的位置就是相对与主体，称为相对位置，以文本标签为例，可以放置在主体的底部，中间或者其他位置

 

下面的代码设置文本相对位置为节点的左上角，挂载点位置为右下角1

 

 

node.setStyle(Styles.LABEL_POSITION, Position.LEFT_TOP);
node.setStyle(Styles.LABEL_ANCHOR_POSITION, Position.RIGHT_BOTTOM);

 

 

 

再加上前面提到的挂载点位置，两者组合可以实现81种位置，详见LabelPositionDemo

 

 

推而广之，对于线形元素，81种位置同样适用，且支持沿线旋转等等

 

 

外观的细节

 

前面位置和组合是否让你兴奋，又或者是头晕，好吧，我可以说些更直观的东西——外观

 

渐变 － 彩虹

渐变旋转，偏移，再加上一尾彩虹色，是否让可爱的Demo顿时文艺

 

 

定义彩虹渐变

int[] rainbowColors = new int[]{0x00000000, 0xFFFF0000, 0xFFFFFF00, 0xFF00FF00, 0xFF00EAFF, 0xFF000390, 0xFFFF00C6, 0x00000000};
float[] rainbowPositions = new float[]{0f, 0.12f, 0.28f, 0.45f, 0.6f, 0.75f, 0.8f, 1f};
Gradient linearGradient = new Gradient(Gradient.LINEAR, rainbowColors, rainbowPositions);
Gradient radialGradient = new Gradient(Gradient.RADIAL, rainbowColors, rainbowPositions);
Gradient sweepGradient = new Gradient(Gradient.SWEEP, rainbowColors, rainbowPositions);

 

冒泡样式

twaver的告警冒泡样式颇受好评，如果将这种冒泡推而广之，作用于所有附件，你是否感到兴奋呢，看看TWaver Android中的冒泡效果

 

 

设置lable的冒泡效果

 

Gradient linearGradient = Gradient.LINEAR_GRADIENT_VERTICAL;
int backgroundColor = Defaults.GROUP_BACKGROUND_COLOR;
node1.setStyle(Styles.LABEL_OUTLINE, 1);
node1.setStyle(Styles.LABEL_PADDING, new Insets(5));
node1.setStyle(Styles.LABEL_BACKGROUND_COLOR, backgroundColor);
node1.setStyle(Styles.LABEL_CORNER_RADIUS, 10);
node1.setStyle(Styles.LABEL_OFFSET, new Point(0, 10));
node1.setStyle(Styles.LABEL_BACKGROUND_SHADER, linearGradient);
...

 

圆角，阴影

 

圆角，阴影本是平常的东西，虽然申请不了圆角矩阵的专利，但我们可以稍微做好些，TWaver Android中圆角普遍被应用，而阴影效果也不错

 

更多

 

细节很多，这只是冰山一角，从模型，外观到交互设计，方方面面等待你去体验，最后静待TWaver Android的正式发布……