Как сделать так, чтобы FAB не перемещался в ViewPager, но оставался частью фрагмента внутри?

Фон

В соответствии с рекомендациями по дизайну материалов (здесь), если вы используете ViewPager с FAB (плавающей кнопкой действия) для фрагментов внутри, FAB не должен перемещаться как часть фрагментов, но либо исчезнет, ​​либо сменится другим, либо оживится во что-то другое.

Короче, вместо этого:

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsNVRkV3FZMktvMWc/components-buttons-fab-behavior_06_xhdpi_009.webm

вы должны сделать это:

https://material-design.storage.googleapis.com/publish/material_v_4/material_ext_publish/0B6Okdz75tqQsVlhxNGJCNTEzNFU/components-buttons-fab-behavior_04_xhdpi_009.webm

Эта проблема

Я не вижу ни одного примера или учебника о том, как лучше всего это сделать.

Я имею в виду наличие FAB для каждого фрагмента (или некоторых из них) в ViewPager, в то время как каждый будет управляться своим фрагментом (логика и то, как это выглядит), но FAB на самом деле не будет двигаться как часть фрагмента при скольжении. между фрагментами в ViewPager.

Даже в качестве примеров приложений я нигде не вижу такого поведения. Приложение для контактов имеет одинаковый FAB для обоих фрагментов, а в номеронабирателе FAB просто перемещается.

Есть даже приложения, которые используют плохое поведение (например, Solid-Explorer). На ютубе есть ФАБ (на фрагменте "Аккаунт"), но он в шапке, так что там может и ок.

Вопрос

Как реализовать правильное поведение? Вы действительно поместили бы FAB как часть действия вместо фрагментов?

Может быть, учебник и / или образец об этом?

Может быть, когда ViewPager начнет прокручиваться, я мог бы отсоединить FAB и прикрепить его к активности, анимировать при прокрутке, а когда прокрутка закончится, я мог бы скрыть его и показать один из другого фрагмента?


person android developer    schedule 03.08.2015    source источник
comment
FAB должен быть частью фрагмента, а не действия. Что касается анимации, я думаю, что это должен сделать PageTransform   -  person Blackbelt    schedule 03.08.2015


Ответы (1)


Некоторое время назад я столкнулся с той же проблемой с просмотрщиком и потрясающим, и я решил это следующим образом:

  • Прикрепите фаб к активности над просмотром пейджера
  • Добавьте OnPageChangeListener к ViewPager и сохраните позицию onPageSelected(int position) в глобальной переменной в вашей деятельности.
  • В onPageSelected запускаем аним своего фаба (можно как xml так и программно, я делал с xml) и меняем его colorTint
  • В onClick(View v) вашего OnClickListener, когда вы получаете идентификатор fab (или представление) вашего fab, чтобы определить, какое действие вы должны выполнить, вы можете создать оператор switch с позицией, которую вы получили ранее в onPageSelected

ИЗМЕНИТЬ

Это два моих файла anim.xml, которые я пытался создать по аналогии с рекомендациями для Android:

Анимация, чтобы заставить исчезнуть старую фабрику:

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
xmlns:android="http://schemas.android.com/apk/res/android">
<scale
    android:interpolator="@android:anim/accelerate_decelerate_interpolator"
    android:fromXScale="1.0"
    android:toXScale="0.0"
    android:fromYScale="1.0"
    android:toYScale="0.0"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fillAfter="false"
    android:duration="200" />

<rotate
    android:duration="200"
    android:interpolator="@android:anim/linear_interpolator"
    android:pivotX="50%"
    android:pivotY="50%"
    android:fromDegrees="360"
    android:toDegrees="270" />
</set>

Анимация для показа нового:

<?xml version="1.0" encoding="utf-8"?>
<set android:shareInterpolator="false"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <scale
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"
        android:fromXScale="0.0"
        android:toXScale="1.0"
        android:fromYScale="0.0"
        android:toYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fillAfter="false"
        android:duration="200" />

    <rotate
        android:duration="200"
        android:interpolator="@android:anim/linear_interpolator"
        android:pivotX="50%"
        android:pivotY="50%"
        android:fromDegrees="270"
        android:toDegrees="360" />
</set>
person Giorgio Antonioli    schedule 03.08.2015
comment
Интересно, однако, можете ли вы избежать включения FAB в деятельность? - person android developer; 03.08.2015
comment
@androiddeveloper да, вы также можете поместить его во фрагмент, содержащий пейджер (который содержит другие фрагменты). Но поместить FAB в каждый фрагмент viewpager означает, что у вас есть несколько FAB, и я не думаю, что это хороший способ реализовать это. Можно еще подождать других отзывов о хорошей реализации. - person Giorgio Antonioli; 03.08.2015
comment
Я имел в виду фрагменты внутри viewPager, но я понимаю, что вы имеете в виду. Вы говорите то, о чем я думал, что это, вероятно, невозможно, и что контейнер ViewPager должен так или иначе обрабатывать FAB. - person android developer; 03.08.2015
comment
@androiddeveloper да, я думаю, что контейнер должен содержать как viewpager, так и fab - person Giorgio Antonioli; 03.08.2015