relativelayout：将视图与同级视图组的子视图对齐

Question

我正在尝试使用RelativeLayout 和RadioGroup 在android 中制作一个选项卡栏，该RadioGroup 具有一个指示器，该指示器将滑动以指示RadioGroup 内的活动RadioButton。

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

这是我当前的层次结构：

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

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

我想过将指示器作为 RadioGroup 的成员，但由于 RadioGroup 是 LinearLayout 的扩展，因此似乎没有办法将其放置在给定 RadioButton 的边缘。

谁能想到我如何解决这个问题？或者也许有比我的动画对齐按钮技术更好的解决方案？

更新 在@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 和 RadioButton 具有相同的高度，或者使用垂直填充，使它们具有相同的高度。

• 为了最初将 ImageView 与第一个 RadioButton 对齐，一些 XML 就足够了：在 ImageView 中将 layout_toRightOf 和 layout_alignTop 附加到 RadioGroup。为了考虑 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字段/em>)。

• 将动画应用到 ImageView 并启动它。

Answer 2

您可以自定义 RadioButton 样式，以包含指示器图像的 9patch 版本作为所选（可能会检查单选按钮..）状态的背景。或者作为可绘制的

但是，这取决于您想要动画的外观。

例如。

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