RelativeLayout: выровнять вид по дочернему элементу группы просмотра - PullRequest
Новая
       32

RelativeLayout: выровнять вид по дочернему элементу группы просмотра

6 голосов
/ 18 ноября 2011

Я пытаюсь создать панель вкладок в Android, используя RelativeLayout и RadioGroup, у которой есть индикатор, который будет скользить, чтобы указывать на активную RadioButton внутри RadioGroup.

Это настраиваемые переключатели, которые эффективнопрямоугольники со значком над текстом, все содержимое центрировано, для чего используется пользовательский селектор состояний для фона.

Вот моя текущая иерархия: 

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

Ответы [ 2 ]

1 голос
/ 07 декабря 2011

Вот мое представление об этом. Ниже приведены некоторые более подробные шаги.

Идея состоит в том, чтобы у ImageView был брат и сестра RadioGroup, как в вашем примере. ImageView изначально расположен справа от RadioGroup, и его горизонтальная средняя линия выровнена с одной из первых (или любых других выбранных) RadioButton.

Затем, после щелчка RadioButton, TranslateAnimation создается / конфигурируется во время выполнения, чтобы позволить ImageView смещаться по вертикали, пока его средняя линия не выровняется с одной из нажатых кнопок. Анимация установлена ​​с помощью fillAfter , чтобы она оставалась твердой после ее завершения.

Шаги:

  • Создайте свои ресурсы так, чтобы ImageView и RadioButtons имели одинаковую высоту, или работайте с вертикальными отступами, чтобы они в результате имели одинаковую высоту.

  • Для первоначального выравнивания ImageView с первым RadioButton может быть достаточно XML : в ImageView присоедините layout_toRightOf и layout_alignTop к RadioGroup. Чтобы учесть верхний отступ от RadioGroup, вы можете добавить его к исходному атрибуту верхнего вида XML ImageView. Или лучше как верхнее поле.

  • При щелчке по RadioButton создайте TranslateAnimation, которая будет применяться к ImageVew, изменяя только координату Y, начиная с 0, до ее целевого значения toY (в то время как атрибут from / toX будет равен 0). Это дается формулой, такой как: 

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

    Здесь Index - порядковая позиция RadioButton в группе (например, от 0 до 2) (Предупреждение: это псевдокод, необязательно существующее поле Java с именем Index ).

  • Примените анимацию к ImageView и запустите ее.

0 голосов
/ 02 декабря 2011

Вы можете настроить стиль 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>
...