Posted By

rondog on 02/01/14


Tagged

mobile android Titanium Appcelerator ios


Versions (?)

Titanium Mobile: Circular Progress Bar


 / Published in: JavaScript
 

URL: http://developer.appcelerator.com/question/154274/is-there-a-way-to-create-circular-progress-bar#comment-201761

  • I have not tested on android
  • This is not animated as I did not need it for my needs. To make it animated, look at the second to last line in the function layer3.transform = Ti.UI.create2DMatrix().rotate(angle); You should be able to animate the rotation angle.
  1. var win = Ti.UI.createWindow({
  2. width:'100%',
  3. height:'100%'
  4. });
  5. win.open();
  6.  
  7. function circularProgressBar(options)
  8. {
  9. var opts = options;
  10. if (opts.percent == null || opts.percent > 1 || opts.percent < 0) opts.percent = 1;
  11. if (opts.size == null) opts.size = 46;
  12. if (opts.margin == null) opts.margin = 4;
  13. if (opts.backgroundColor == null) opts.backgroundColor = '#fff';
  14. if (opts.progressColor == null) opts.progressColor = '#4ba818';
  15. if (opts.topper == null) opts.topper = {};
  16. if (opts.topper.color == null) opts.topper.color = '#fff';
  17. if (opts.topper.size == null) opts.topper.size = 36;
  18. if (opts.font == null) opts.font = {};
  19. if (opts.font.visible == null) opts.font.visible = true;
  20. if (opts.font.size == null) opts.font.size = 12;
  21. if (opts.font.color == null) opts.font.color = '#900';
  22. if (opts.font.shadowColor == null) opts.font.shadowColor = '#aaa';
  23. if (opts.font.shadowRadius == null) opts.font.shadowRadius = 1;
  24. if (opts.font.shadowOffset == null) opts.font.shadowOffset = {};
  25. if (opts.font.shadowOffset.x == null) opts.font.shadowOffset.x = 0;
  26. if (opts.font.shadowOffset.y == null) opts.font.shadowOffset.y = 1;
  27.  
  28. var mainHolder = Ti.UI.createView({
  29. left: options.left,
  30. right: options.right,
  31. top: options.top,
  32. bottom: options.bottom,
  33. width: opts.size + opts.margin,
  34. height: opts.size + opts.margin,
  35. borderRadius: (opts.size + opts.margin) / 2,
  36. backgroundColor: opts.backgroundColor
  37. });
  38.  
  39. var holder = Ti.UI.createView({
  40. width: opts.size,
  41. height: opts.size,
  42. borderRadius: opts.size / 2
  43. });
  44.  
  45.  
  46. var layer1 = Ti.UI.createView({
  47. width: opts.size,
  48. height: opts.size,
  49. borderRadius: opts.size / 2,
  50. backgroundColor: opts.progressColor
  51. });
  52.  
  53. var layer2 = Ti.UI.createView({
  54. left: 0,
  55. width: opts.size / 2,
  56. height: opts.size,
  57. anchorPoint: {
  58. x: 1,
  59. y: 0.5
  60. },
  61. backgroundColor: opts.backgroundColor
  62. });
  63.  
  64. var layer3 = Ti.UI.createView({
  65. right: 0,
  66. width: opts.size / 2,
  67. height: opts.size,
  68. anchorPoint: {
  69. x: 0,
  70. y: 0.5
  71. },
  72. backgroundColor: opts.backgroundColor
  73. });
  74.  
  75. var layer4 = Ti.UI.createView({
  76. right: 0,
  77. width: opts.size / 2,
  78. height: opts.size,
  79. anchorPoint: {
  80. x: 0,
  81. y: 0.5
  82. },
  83. backgroundColor: opts.progressColor
  84. });
  85.  
  86. var topper = Ti.UI.createView({
  87. width: opts.topper.size,
  88. height: opts.topper.size,
  89. borderRadius: opts.topper.size / 2,
  90. backgroundColor: opts.topper.color
  91. });
  92.  
  93. var percentText = Ti.UI.createLabel({
  94. visible: opts.font.visible,
  95. width: Ti.UI.SIZE,
  96. height: Ti.UI.SIZE,
  97. color: opts.font.color,
  98. font: {
  99. fontSize:opts.font.size
  100. },
  101. shadowColor: opts.font.shadowColor,
  102. shadowRadius: opts.font.shadowRadius,
  103. shadowOffset: {
  104. x: opts.font.shadowOffset.x,
  105. y: opts.font.shadowOffset.y
  106. },
  107. textAlign: Ti.UI.TEXT_ALIGNMENT_CENTER,
  108. text: (opts.percent * 100) + '%'
  109. });
  110.  
  111. mainHolder.add(holder);
  112. topper.add(percentText);
  113. holder.add(layer1);
  114. holder.add(layer2);
  115. holder.add(layer3);
  116. holder.add(layer4);
  117. holder.add(topper);
  118.  
  119. var percent = opts.percent;
  120. var angle = 360 * percent;
  121. layer2.visible = (angle > 180) ? false : true;
  122. layer4.visible = (angle > 180) ? true : false;
  123. layer3.transform = Ti.UI.create2DMatrix().rotate(angle);
  124. return mainHolder;
  125. }
  126.  
  127. /* Circular Progress Bar Options
  128.  
  129.  percent: A value between 0 and 1
  130.  size: The size of the circular progress bar
  131.  margin: The margin of the circular progress bar
  132.  backgroundColor: The backgroundColor of the circular area
  133.  progressColor: The backgroundColor of the progress bar
  134.  --
  135.  topper.color: The center circle color
  136.  topper.size: The size of the center circle
  137.  ---
  138.  font.visible: Boolean to display the font or not
  139.  font.color: The font color
  140.  font.size: The fontSize
  141.  font.shadowColor: The font shadow color
  142.  font.shadowRadius: The font shadow radius
  143.  font.shadowOffset.x: The x value of the shadow shadowOffset
  144.  font.shadowOffset.y: The y value of the shadow shadowOffset
  145.  
  146.  */
  147. var circleProgress = circularProgressBar({
  148. percent:0.35,
  149. size:46,
  150. margin:4,
  151. backgroundColor:'#fff',
  152. progressColor:'#4ba818',
  153. topper: {
  154. color:'#fff',
  155. size: 36
  156. },
  157. font: {
  158. visible: true,
  159. color: '#900',
  160. size: 12,
  161. shadowColor: '#aaa',
  162. shadowRadius: 1,
  163. shadowOffset: {
  164. x: 0,
  165. y: 1
  166. }
  167. }
  168. });
  169. win.add(circleProgress);

Report this snippet  

You need to login to post a comment.