如何在Titanium Appcelerator中創建圓形進度條？

Question

我正在使用Titanium Appcelerator，我需要幫助在應用程序中創建循環進度條。任何人都可以向我解釋圓形進度條是如何工作的，以及循環方式如何在圓內填充進度..？

Answer 1

這不是一個進度條 - 它是一個「活動指標」。

它沒有顯示像進度條一樣的真實進度。使用進度條，您可以爲進度設置一個值（例如，0-100％）。這只是「旋轉」，讓用戶知道他們需要等待。

要創建活動的指標，在​​這裏看到：http://docs.appcelerator.com/titanium/2.0/#!/api/Titanium.UI.ActivityIndicator

簡單的例子：

var activityView = Ti.UI.createView({visible: false}); 
var activityIndicator = Ti.UI.createActivityIndicator({ 
    message: 'Loading...', 
    height:'auto', 
    width:'auto' 
}); 
activityView.add(activityIndicator); 
activityView.show(); 

此示例將工作，但它不是風格。我會留給你決定你想如何看。如果您希望它看起來像您發佈的圖像，請查看backgroundColor，borderRadius和視圖屬性上的透明度。

Answer 2

現在請使用合金的Widget： https://github.com/manumaticx/circularprogress

---

原來的答案

我知道這是一個有點晚，但我經過約一天的工作想通了這一點。

• 我還沒有在Android
• 測試這不是動畫片，因爲我並不需要它滿足我的需求。要使它動畫化，請查看函數layer3.transform = Ti.UI.create2DMatrix（）中的倒數第二行。您應該可以動畫旋轉角度。

變種贏= Ti.UI.createWindow（{ 寬度： '100％'， 高度： '100％' }）; win.open（）;

function circularProgressBar(options) 
{ 
    var opts = options; 
    if (opts.percent == null || opts.percent > 1 || opts.percent < 0) opts.percent = 1; 
    if (opts.size == null) opts.size = 46; 
    if (opts.margin == null) opts.margin = 4; 
    if (opts.backgroundColor == null) opts.backgroundColor = '#fff'; 
    if (opts.progressColor == null) opts.progressColor = '#4ba818'; 
    if (opts.topper == null) opts.topper = {}; 
    if (opts.topper.color == null) opts.topper.color = '#fff'; 
    if (opts.topper.size == null) opts.topper.size = 36; 
    if (opts.font == null) opts.font = {}; 
    if (opts.font.visible == null) opts.font.visible = true; 
    if (opts.font.size == null) opts.font.size = 12; 
    if (opts.font.color == null) opts.font.color = '#900'; 
    if (opts.font.shadowColor == null) opts.font.shadowColor = '#aaa'; 
    if (opts.font.shadowRadius == null) opts.font.shadowRadius = 1; 
    if (opts.font.shadowOffset == null) opts.font.shadowOffset = {}; 
    if (opts.font.shadowOffset.x == null) opts.font.shadowOffset.x = 0; 
    if (opts.font.shadowOffset.y == null) opts.font.shadowOffset.y = 1; 

    var mainHolder = Ti.UI.createView({ 
     left: options.left, 
     right: options.right, 
     top: options.top, 
     bottom: options.bottom, 
     width: opts.size + opts.margin, 
     height: opts.size + opts.margin, 
     borderRadius: (opts.size + opts.margin)/2, 
     backgroundColor: opts.backgroundColor 
    }); 

    var holder = Ti.UI.createView({ 
     width: opts.size, 
     height: opts.size, 
     borderRadius: opts.size/2 
    }); 


    var layer1 = Ti.UI.createView({ 
     width: opts.size, 
     height: opts.size, 
     borderRadius: opts.size/2, 
     backgroundColor: opts.progressColor 
    }); 

    var layer2 = Ti.UI.createView({ 
     left: 0, 
     width: opts.size/2, 
     height: opts.size, 
     anchorPoint: { 
      x: 1, 
      y: 0.5 
     }, 
     backgroundColor: opts.backgroundColor 
    }); 

    var layer3 = Ti.UI.createView({ 
     right: 0, 
     width: opts.size/2, 
     height: opts.size, 
     anchorPoint: { 
      x: 0, 
      y: 0.5 
     }, 
     backgroundColor: opts.backgroundColor 
    }); 

    var layer4 = Ti.UI.createView({ 
     right: 0, 
     width: opts.size/2, 
     height: opts.size, 
     anchorPoint: { 
      x: 0, 
      y: 0.5 
     }, 
     backgroundColor: opts.progressColor 
    }); 

    var topper = Ti.UI.createView({ 
     width: opts.topper.size, 
     height: opts.topper.size, 
     borderRadius: opts.topper.size/2, 
     backgroundColor: opts.topper.color 
    }); 

    var percentText = Ti.UI.createLabel({ 
     visible: opts.font.visible, 
     width: Ti.UI.SIZE, 
     height: Ti.UI.SIZE, 
     color: opts.font.color, 
     font: { 
      fontSize:opts.font.size 
     }, 
     shadowColor: opts.font.shadowColor, 
     shadowRadius: opts.font.shadowRadius, 
     shadowOffset: { 
      x: opts.font.shadowOffset.x, 
      y: opts.font.shadowOffset.y 
     }, 
     textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER, 
     text: (opts.percent * 100) + '%' 
    }); 

    mainHolder.add(holder); 
    topper.add(percentText);  
    holder.add(layer1); 
    holder.add(layer2); 
    holder.add(layer3); 
    holder.add(layer4); 
    holder.add(topper); 

    var percent = opts.percent; 
    var angle = 360 * percent; 
    layer2.visible = (angle > 180) ? false : true; 
    layer4.visible = (angle > 180) ? true : false; 
    layer3.transform = Ti.UI.create2DMatrix().rotate(angle); 
    return mainHolder; 
} 

/* Circular Progress Bar Options 

percent: A value between 0 and 1 
size: The size of the circular progress bar 
margin: The margin of the circular progress bar 
backgroundColor: The backgroundColor of the circular area 
progressColor: The backgroundColor of the progress bar 
-- 
topper.color: The center circle color 
topper.size: The size of the center circle 
--- 
font.visible: Boolean to display the font or not 
font.color: The font color 
font.size: The fontSize 
font.shadowColor: The font shadow color 
font.shadowRadius: The font shadow radius 
font.shadowOffset.x: The x value of the shadow shadowOffset 
font.shadowOffset.y: The y value of the shadow shadowOffset 

*/ 
var circleProgress1 = circularProgressBar({ 
    top:50, 
    percent:0.35, 
    size:46, 
    margin:4, 
    backgroundColor:'#fff', 
    progressColor:'#4ba818', 
    topper: { 
     color:'#fff', 
     size: 36 
    }, 
    font: { 
     visible: true, 
     color: '#900', 
     size: 12, 
     shadowColor: '#aaa', 
     shadowRadius: 1, 
     shadowOffset: { 
      x: 0, 
      y: 1 
     } 
    } 
}); 
win.add(circleProgress1); 

所有這一切^^^創建此：

編輯：我使用的方法來創建，這是從這個線程馬爾科姆的想法：https://developer.appcelerator.com/question/154274/is-there-a-way-to-create-circular-progress-bar