AppceleratorでUI要素の中心を上/左から中央に変更するにはどうすればよいですか？

Question

私は以下の機能を持つスライダを持っています。このスライダには、円表示の半径を小さくする必要があります。半径の変更は機能しますが、左と上の位置が「中央」で静的で変更されないため、ラベル/円は右に「移動」します。

ラベルの中央の位置が同じで（左上隅ではない）変更するにはどうすればよいですか？私はanchorPoint、animatedCenterとcenterを試しましたが、目に見える効果はありません。今は、スライダが半径の変更をトリガしているので、アニメーションがありません。

function showRadar(e){ 
    //$.radarIcon.anchorPoint = {x:0.5, y:0.5}; //no effect 
    //$.radarIcon.animatedCenter = {x:0.5, y:0.5}; //no effect 
    $.radarIcon.height = e.source.value; 
    $.radarIcon.width = e.source.value; 
    $.radarIcon.borderRadius = e.source.value/2; 
    $.radarIcon.center = {x:30, y:400}; //no effect 
} 

Answer 1

ちょうど別のビューで円を包む：

"Window" : { 
    backgroundColor: "white" 
} 
"Label" : { 
    width: Ti.UI.SIZE, 
    height: Ti.UI.SIZE, 
    color: "#000" 
} 

"#circle" : { 
    width: 100, 
    height: 100, 
    borderRadius: 50, 
    backgroundColor: "red" 
} 
"#container" : { 
    width: 200, 
    height: 200 
} 

index.js

function showRadar(e) { 
    $.circle.height = e; 
    $.circle.width = e; 
    $.circle.borderRadius = e/2; 
} 

var i = 100; 

$.circle.addEventListener("click", function() { 
    showRadar(i); 
    if (i < 200) { 
     i += 20; 
    } 
}) 
$.index.open(); 

index.tss

のindex.xml

<Alloy> 
    <Window> 
     <View id="container"> 
      <View id="circle"/> 
      <Label id="lbl" text="test"/> 
     </View> 
    </Window> 
</Alloy> 

を

円をクリックするとサイズが大きくなり、テキストは中央に配置されます。私は外側のコンテナの最大幅を200に設定しているので、大きくなることはありません。