|
|
Posted on 2013-01-14 11:04 TWaver 閱讀(1418) 評論(0) 編輯 收藏
一款優秀的產品體現在細節，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，初始為居中）
1 node.setLocation(100, 100);
2 node.setAnchorPosition(Position.LEFT_TOP);
相對位置的三個要素
（position, offset, anchor position）
對于相對位置，TWaver Android引入了第三個要素（position），twaver中網元可以組合，每個節點由一個主體（body）和一堆附件（attachments）組成，其中附件的位置就是相對與主體，稱為相對位置，以文本標簽為例，可以放置在主體的底部，中間或者其他
下面的代碼設置文本相對位置為節點的左上角，掛載點位置為右下角 1 node.setStyle(Styles.LABEL_POSITION, Position.LEFT_TOP);
2 node.setStyle(Styles.LABEL_ANCHOR_POSITION, Position.RIGHT_BOTTOM); 再加上前面提到的掛載點位置，兩者組合可以實現81種位置，詳見LabelPositionDemo  推而廣之，對于線形元素，81種位置同樣適用，且支持沿線旋轉等等 
外觀的細節
前面位置和組合是否讓你興奮，又或者是頭暈，好吧，我可以說些更直觀的東西——外觀 漸變 － 彩虹
漸變旋轉，偏移，再加上一尾彩虹色，是否讓可愛的Demo頓時文藝 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的告警冒泡樣式頗受好評，如果將這種冒泡推而廣之，作用于所有附件，你是否感到興奮呢，看看TWaver Android中的冒泡效果 設置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 
圓角，陰影
圓角，陰影本是平常的東西，雖然申請不了圓角矩陣的專利，但我們可以稍微做好些，TWaver Android中圓角普遍被應用，而陰影效果也不錯
更多
細節很多，這只是冰山一角，從模型，外觀到交互設計，方方面面等待你去體驗，最后靜待TWaver Android的正式發布……
|