如何在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