2011-11-18 17 views
5

RelativeLayoutとRadioGroupを使ってアンドロイドでタブバーを作成しようとしています.RadiaGroup内のアクティブなRadioButtonを示すインジケータが表示されます。RelativeLayout:兄弟ビューグループの子にビューを揃える

カスタマイズされたラジオボタンは、効果的な矩形であり、すべてのコンテンツが中央に配置され、背景に対してカスタムの状態セレクタを使用するテキスト上のアイコンを備えています。ここで

は私の現在の階層です:

<RelativeLayout>  // Main view of the tab bar 
    <RadioGroup>   // The buttons 
    <RadioButton /> 
    <RadioButton /> 
    <RadioButton /> 
    </RadioGroup> 
    <ImageView />  // The indicator 
</RelativeLayout> 

私が持っていたアイデアは、ラジオボタンがクリックされたとき、私は選択したラジオボタンの上部&下にインジケータを揃える(と、それをアニメーション)でしょうでした。しかし、layout_align<Edge>は他のビューグループのメンバーではなく、兄弟要素でのみ動作します。つまり、RadioGroup自体にアライメントできますが、その内部のRadioButtonにアライメントすることはできません。

RadioGroupのメンバーとしてインジケーターを置くことを考えましたが、RadioGroupはLinearLayoutの拡張であるため、指定したRadioButtonの端に配置する方法はないようです。

この問題をどのように解決できるか考えてもらえますか?または、私のアニメーションに合わせたボタンの技術よりも優れた解決策がありますか?

更新 @superjosヘルプで、私はこれをかなりうまく処理できました。

私は各ボタンにwrap_contentの代わりに既知の高さを与えなければなりませんでした(理想的ではありませんが、このプロジェクトではうまくいくはずです)。インジケータの高さをボタンの高さに合わせます。ラジオグループがコンテンツをラップするように設定され、親ビューに垂直に中央揃えされていることを確認します。インジケータをalignTopに、toRightOfをラジオグループに設定します。その後、ボタンのリスナーをクリックします。

int prevY, newY; 
int prevButtonIndex, newButtonIndex; 

public void moveIndicator(button, indicator, index) { 
    prevY = newY; 
    newY = prevY + (index - prevButtonIndex) * button.getHeight(); 
    TranslateAnimation animation = new TranslateAnimation(0, 0, prevY, newY); 
    animation.setDuration(500); 
    animation.setFillAfter(true); // stay at final animation position 
    indicator.setAnimation(); 
    animation.start(); 
} 
+0

素晴らしい!実装も良好に見えます! – superjos

答えて

1

これは私の考えです。以下に、より詳細な手順を示します。

アイデアは、サンプルにあるようにImageViewにラジオグループ兄弟を持たせることです。 ImageViewは当初RadioGroupの右側に配置され、その水平中央のは、最初の(または選択した)RadioButtonの1つに揃えられています。

次に、ラジオボタンをクリックすると、実行中にTranslateAnimationが構築/設定され、クリックされたボタンの中央の線に合わせてImageViewが垂直に移動します。アニメーションはfillAfterに設定されています。

ステップ:ImageViewのとラジオボタンが同じ高さを持っているか、あるいはそれらが同じ高さを有する結果となるように垂直パディングで動作するように

  • があなたのリソースを作成します。

  • は当初、最初のRadioButtonにいくつかのXML でしで十分にImageViewのを整列するには:ImageViewの中でラジオグループへlayout_toRightOflayout_alignTopを添付してください。 RadioGroupのトップパディングを考慮に入れるために、ImageGroupのトップパディングXML属性の初期値に追加することができます。または、最上位マージンとして優れています。

  • RadioVuttonをクリックすると、ImageVewに適用されるTranslateAnimationを作成し、0からその送り先までのY座標のみをY値に変更します(/ toX属性は0になります)。擬似コードであり、必ずしも既存:インデックス(警告(例えば、0〜2)グループ内のRadioButtonの順序位置であるここ

    toY = (ClickedRadioButton.Index - LastClickedRadioButton.Index) * RadioButton.Heigth 
    

    :それは、次のような式で与えられます。 Javaフィールドはインデックス)。

  • ImageViewにアニメーションを適用して開始します。

+0

ほとんどの場合、これは使用するソリューションかもしれないようです。アルゴリズムはほとんどの部分で機能しますが(setFillAfter(true)を設定する必要がありますが)、開始座標0を使用すると、アニメーションは常に現在の開始点ではなく元の開始点から開始します。私は 'getTop()'、 'getBaseline()'、 'getLocation()[1]'を使って試しました。しかし、それらはうまくいかず、出発点が第1位または最下位の位置になる。どのようにこれを調整するための任意のアイデア? –

+0

問題は、描画位置が変更されるだけであるように見えます。これを修正するために、実際のlayout_marginTopの変更を、アニメーションが完了したときにチェックされたボタンに基づくオフセットであるインジケータに適用します。これは正常に動作しますが、唯一の問題は、アニメーションが完了したときにちらつきが発生することです。レイアウトパラメータの変更を単にアニメーション化する方法はありますか? –

+0

_new_ [プロパティアニメーション](http://developer.android.com/guide/topics/graphics/prop-animation.html)フレームワークは、多くの(すべて?)Viewプロパティ、WPF /アニメーションへのプロパティのSilverlightバインディングそれはAPI 11以来存在していますが、私はそれを使ったことはありません。 – superjos

0

あなたが選択した(ラジオをチェックされる可能性があります。)状態の背景として表示画像の9patchedバージョンを含めるようにRadioButtonのスタイルをカスタマイズすることができます。またはdrawableとして

ただし、アニメーションをどのように表示するかによって異なります。

たとえば、

+0

インジケータは、基本的に、エッジの1つからボタンの中心を指し、ボタンがクリックされると、あるボタンのエッジの中心から別のボタンの中心に直線的にスライドする三角形です。私は、ボタン自体の上にドロウアブルとしてそれを置くことは、私にその効果をもたらすだろうか分からない。 –

関連する問題