|
|
Posted on 2013-01-14 11:04 TWaver 閱讀(1411) 評(píng)論(0) 編輯 收藏
一款優(yōu)秀的產(chǎn)品體現(xiàn)在細(xì)節(jié)，UI產(chǎn)品更是如此，精確到每個(gè)像素，平衡性能與效果的最佳點(diǎn)，是我們追求的目標(biāo)，細(xì)節(jié)的實(shí)現(xiàn)過(guò)程會(huì)有困難，結(jié)果卻讓人興奮，TWaver Android的開發(fā)正是如此，所以我忍不住想分享一些細(xì)節(jié)點(diǎn)。
位置的細(xì)節(jié)
位置與坐標(biāo)是圖形界面的基礎(chǔ)，TWaver Android中使用了絕對(duì)與相對(duì)坐標(biāo)結(jié)合的思路，采用漫游模式交互，代碼上與以往twaver產(chǎn)品會(huì)有所不同，這里列舉部分特點(diǎn)。
絕對(duì)位置的兩個(gè)要素
（location, anchor position）
位置是圖形元素最基本的信息，自然想到的是點(diǎn)（Point）作為位置（location），比如說(shuō)你的位置在(250, 360)，但人不是大頭針，物體總是有尺寸，一個(gè)點(diǎn)代表不了位置的全部信息，比如人的位置是算腳尖還是腳跟呢？于是我們引入掛載點(diǎn)位置（anchorPosition）參數(shù)，可以是左上角，中心或者其他位置，于是在TWaver Android中，你會(huì)看到位置的兩個(gè)要素：位置（location）和掛載點(diǎn)（anchor position）
下面示意圖中，兩個(gè)網(wǎng)元相同的位置（100, 100），但掛載點(diǎn)不同，一個(gè)在中心，另一個(gè)在左上角。
下面的代碼的作用是，設(shè)置網(wǎng)元位置（100, 100），掛載點(diǎn)位置為左上角（left top，初始為居中）
1 node.setLocation(100, 100);
2 node.setAnchorPosition(Position.LEFT_TOP);
相對(duì)位置的三個(gè)要素
（position, offset, anchor position）
對(duì)于相對(duì)位置，TWaver Android引入了第三個(gè)要素（position），twaver中網(wǎng)元可以組合，每個(gè)節(jié)點(diǎn)由一個(gè)主體（body）和一堆附件（attachments）組成，其中附件的位置就是相對(duì)與主體，稱為相對(duì)位置，以文本標(biāo)簽為例，可以放置在主體的底部，中間或者其他
下面的代碼設(shè)置文本相對(duì)位置為節(jié)點(diǎn)的左上角，掛載點(diǎn)位置為右下角 1 node.setStyle(Styles.LABEL_POSITION, Position.LEFT_TOP);
2 node.setStyle(Styles.LABEL_ANCHOR_POSITION, Position.RIGHT_BOTTOM); 再加上前面提到的掛載點(diǎn)位置，兩者組合可以實(shí)現(xiàn)81種位置，詳見LabelPositionDemo  推而廣之，對(duì)于線形元素，81種位置同樣適用，且支持沿線旋轉(zhuǎn)等等 
外觀的細(xì)節(jié)
前面位置和組合是否讓你興奮，又或者是頭暈，好吧，我可以說(shuō)些更直觀的東西——外觀 漸變 － 彩虹
漸變旋轉(zhuǎn)，偏移，再加上一尾彩虹色，是否讓可愛的Demo頓時(shí)文藝 1 int[] rainbowColors = new int[]{0x00000000, 0xFFFF0000, 0xFFFFFF00, 0xFF00FF00, 0xFF00EAFF, 0xFF000390, 0xFFFF00C6, 0x00000000};
2 float[] rainbowPositions = new float[]{0f, 0.12f, 0.28f, 0.45f, 0.6f, 0.75f, 0.8f, 1f};
3 Gradient linearGradient = new Gradient(Gradient.LINEAR, rainbowColors, rainbowPositions);
4 Gradient radialGradient = new Gradient(Gradient.RADIAL, rainbowColors, rainbowPositions);
5 Gradient sweepGradient = new Gradient(Gradient.SWEEP, rainbowColors, rainbowPositions); 冒泡樣式
twaver的告警冒泡樣式頗受好評(píng)，如果將這種冒泡推而廣之，作用于所有附件，你是否感到興奮呢，看看TWaver Android中的冒泡效果 設(shè)置lable的冒泡效果
1 Gradient linearGradient = Gradient.LINEAR_GRADIENT_VERTICAL;
2 int backgroundColor = Defaults.GROUP_BACKGROUND_COLOR;
3 node1.setStyle(Styles.LABEL_OUTLINE, 1);
4 node1.setStyle(Styles.LABEL_PADDING, new Insets(5));
5 node1.setStyle(Styles.LABEL_BACKGROUND_COLOR, backgroundColor);
6 node1.setStyle(Styles.LABEL_CORNER_RADIUS, 10);
7 node1.setStyle(Styles.LABEL_OFFSET, new Point(0, 10));
8 node1.setStyle(Styles.LABEL_BACKGROUND_SHADER, linearGradient);
9 
圓角，陰影
圓角，陰影本是平常的東西，雖然申請(qǐng)不了圓角矩陣的專利，但我們可以稍微做好些，TWaver Android中圓角普遍被應(yīng)用，而陰影效果也不錯(cuò)
更多
細(xì)節(jié)很多，這只是冰山一角，從模型，外觀到交互設(shè)計(jì)，方方面面等待你去體驗(yàn)，最后靜待TWaver Android的正式發(fā)布……
|