关注细节－TWaver Android

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

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

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

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

1node.setLocation(100,100);
2node.setAnchorPosition(Position.LEFT_TOP);
相对位置的三个要素
（position, offset, anchor position）对于相对位置，TWaver Android引入了第三个要素（position），twaver中网元可以组合，每个节点由一个主体（body）和一堆附件（attachments）组成，其中附件的位置就是相对与主体，称为相对位置，以文本标签为例，可以放置在主体的底部，中间或者其他下面的代码设置文本相对位置为节点的左上角，挂载点位置为右下角

1node.setStyle(Styles.LABEL_POSITION,Position.LEFT_TOP);
2node.setStyle(Styles.LABEL_ANCHOR_POSITION,Position.RIGHT_BOTTOM);
关注细节－TWaver Android

再加上前面提到的挂载点位置，两者组合可以实现81种位置，详见LabelPositionDemo
关注细节－TWaver Android

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

关注细节－TWaver Android

外观的细节

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

渐变－彩虹

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

关注细节－TWaver Android

定义彩虹渐变
1int[]rainbowColors=newint[]{0x00000000,0xFFFF0000,0xFFFFFF00,0xFF00FF00,0xFF00EAFF,0xFF000390,0xFFFF00C6,0x00000000};
2float[]rainbowPositions=newfloat[]{0f,0.12f,0.28f,0.45f,0.6f,0.75f,0.8f,1f};
3GradientlinearGradient=newGradient(Gradient.LINEAR,rainbowColors,rainbowPositions);
4GradientradialGradient=newGradient(Gradient.RADIAL,rainbowColors,rainbowPositions);
5GradientsweepGradient=newGradient(Gradient.SWEEP,rainbowColors,rainbowPositions);

冒泡样式

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

关注细节－TWaver Android

设置lable的冒泡效果

1GradientlinearGradient=Gradient.LINEAR_GRADIENT_VERTICAL;
2intbackgroundColor=Defaults.GROUP_BACKGROUND_COLOR;
3node1.setStyle(Styles.LABEL_OUTLINE,1);
4node1.setStyle(Styles.LABEL_PADDING,newInsets(5));
5node1.setStyle(Styles.LABEL_BACKGROUND_COLOR,backgroundColor);
6node1.setStyle(Styles.LABEL_CORNER_RADIUS,10);
7node1.setStyle(Styles.LABEL_OFFSET,newPoint(0,10));
8node1.setStyle(Styles.LABEL_BACKGROUND_SHADER,linearGradient);
9

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

关注细节－TWaver Android

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

外观的细节

渐变－彩虹

冒泡样式

更多相关文章

随机推荐

关注细节－TWaver Android

外观的细节

渐变 － 彩虹

冒泡样式

更多相关文章

随机推荐

渐变－彩虹