Question

我正在尝试使用RelativeLayout和一个RadioGroup创建一个标签栏，该组有一个指示符，该指示符将滑动以指示RadioGroup中的活动RadioButton。

这些是定制的单选按钮，它们是有效的矩形，文本上有一个图标，所有内容都居中，它使用自定义状态选择器作为背景。

这是我目前的等级制度：

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

我的想法是当点击一个单选按钮时，我会将指示器对齐到顶部＆amp;所选单选按钮的底部（并为其设置动画）。但是，似乎layout_align<Edge>仅适用于兄弟元素，而不适用于另一个视图组的成员，即我可以与RadioGroup本身对齐，但不能与其中的RadioButton对齐。

我想把指标作为RadioGroup的成员，但由于RadioGroup是LinearLayout的扩展，似乎没有办法将它放在给定RadioButton的边缘。

有谁能想到我如何解决这个问题？或者也许比我的animate-align-to-button技术有更好的解决方案？

更新有了@superjos的帮助，我设法很好地解决了这个问题。

我必须给每个按钮一个已知的高度，而不是使用wrap_content（不理想，但对于这个项目它可能应该工作正常）。使指示器高度与按钮的高度相匹配。确保将RadioGroup设置为包装内容并在父视图中垂直居中。将指标设置为RadioGroup的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();
}

Answer 1

这是我的想法。以下是一些更详细的步骤。

我们的想法是让ImageView拥有一个RadioGroup兄弟，就像你的样本一样。 ImageView最初位于RadioGroup的右侧，其水平中线与第一个（或任何选择的）RadioButton中的一个对齐。

然后，在RadioButton单击时，在运行时构建/配置TranslateAnimation，以便让ImageView垂直移动，直到其中间线与单击的按钮对齐。动画设置为 fillAfter ，以便在完成后保持稳定。

步骤：

创建资源，使ImageView和RadioButtons具有相同的高度，或者使用垂直填充，以便它们具有相同的高度。
要最初将ImageView与第一个RadioButton对齐，一些XML 可以就足够了：在ImageView中将layout_toRightOf和layout_alignTop附加到RadioGroup。为了考虑RadioGroup的top-padding，您可以将其添加到初始的ImageView顶部填充XML属性中。或者更好地作为最高利润。
单击RadioButton时，创建将应用于ImageVew的TranslateAnimation，仅更改从0开始到其目标的Y坐标为Y值（而from / toX属性将为0）。这是通过如下公式给出的：
```
toY = (ClickedRadioButton.Index - LastClickedRadioButton.Index) * RadioButton.Heigth
```
这里 Index 是组内RadioButton的序号位置（例如从0到2）（警告：这是伪代码，不一定是名为 Index <的现有Java字段/ em>的）。

将动画应用于ImageView并启动它。

Answer 2

您可以自定义RadioButton样式，以包含9 patched版本的指标图像作为所选（可能检查无线电..）状态的背景。或者作为可绘制的

但是，这取决于你想要动画的样子。

例如。

<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>

RelativeLayout：将视图与兄弟视图组的子视图对齐

2 个答案: