当前位置: 代码迷 >> Android >> 关切细节-TWaver Android
  详细解决方案

关切细节-TWaver Android

热度:183   发布时间:2016-05-01 12:02:26.0
关注细节-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)组成,其中附件的位置就是相对与主体,称为相对位置,以文本标签为例,可以放置在主体的底部,中间或者其他
下面的代码设置文本相对位置为节点的左上角,挂载点位置为右下角

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的正式发布……


  相关解决方案