6

私は、RelativeLayoutとRadioGroup内のアクティブなRadioButtonを示すためにスライドするインジケーターを持つRadioGroupを使用して、Androidでタブバーを作成しようとしています。

これらはカスタマイズされたラジオボタンであり、テキストの上にアイコンが付いた長方形で、すべてのコンテンツが中央に配置され、背景にカスタムの状態セレクターが使用されます。

これが私の現在の階層です：

<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する必要がありました（理想的ではありませんが、このプロジェクトではおそらく正常に機能するはずです）。インジケーターの高さをボタンの高さと一致させます。RadioGroupがコンテンツをラップし、親ビューの垂直方向の中央に配置されるように設定されていることを確認してください。インジケーターをalignTopとtoRightOfRadioGroupに設定します。次に、ボタンクリックリスナーの場合：

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();
}
4

2 に答える 2

1

これが私の考えです。以下は、いくつかのより詳細な手順です。

アイデアは、サンプルにあるように、ImageViewにRadioGroup兄弟を持たせることです。ImageViewは、最初はRadioGroupの右側に配置され、その水平方向の中央の線は、最初の（または選択された）RadioButtonの1つに揃えられます。

次に、RadioButtonをクリックすると、実行時にTranslateAnimationが構築/構成され、ImageViewが、クリックされたボタンの中央の線と揃うまで垂直方向にシフトします。アニメーションはfillAfterで設定されているため、完了後もしっかりと維持されます。

手順：

  • ImageViewとRadioButtonsの高さが同じになるようにリソースを作成するか、垂直方向のパディングを操作して同じ高さになるようにします。

  • 最初にImageViewを最初のRadioButtonに揃えるには、いくつかのXMLで十分です。ImageViewでは、RadioGroupにアタッチlayout_toRightOfしlayout_alignTopます。RadioGroupからのトップパディングを考慮に入れるために、それを最初のImageViewトップパディングXML属性に追加することができます。またはトップマージンとしてより良い。

  • RadioButtonがクリックされたら、ImageVewに適用されるTranslateAnimationを作成し、0から始まるY座標のみを目的のtoY値に変更します（from / toX属性は0になります）。これは、次のような式で与えられます。

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

    ここで、 Indexは、グループ内のRadioButtonの序数位置（たとえば、0から2）です（警告：これは疑似コードであり、必ずしもIndexという名前の既存のJavaフィールドである必要はありません）。

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

于 2011-12-07T02:25:33.823 に答える
0

RadioButtonスタイルをカスタマイズして、選択した（無線についてチェックされる可能性がある）状態の背景として、9パッチバージョンのインジケーター画像を含めることができます。またはドローアブルとして

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

例えば。

<style name="TabRadioButton" parent="@android:style/Widget.CompoundButton.RadioButton">
    <item name="android:background">@drawable/tab_bg</item>
    <item name="android:drawableLeft">@drawable/tab_indicator</item>
</style>
于 2011-12-02T00:51:35.220 に答える