Как изменить цвет ActionBar при прокрутке между фрагментами (Material Design)?

У меня есть приложение, которое я делаю, в котором есть настройка FragmentPagerAdapter с 3 фрагментами для пролистывания на главной странице.

Я пытался настроить его так, чтобы при пролистывании фрагментов панель действий меняла цвет (появлялась и исчезала).

Однако я не уверен, как мне это сделать. Какой метод вызывается при свайпе между фрагментами? I.E, где я должен поместить код, чтобы изменить цвет панели действий?

А также, как мне получить эффект постепенного появления и исчезновения (чтобы один цвет плавно переходил в другой)?

Я был бы очень признателен за помощь.

заранее спасибо

Здоровья Кори :)


person Fishingfon    schedule 08.11.2014    source источник


Ответы (2)


Какой метод вызывается при свайпе между фрагментами?

Вы ищете ViewPager.OnPageChangeListener.onPageScrolled< /а>. Это даст вам:

  • position Индекс позиции первой отображаемой страницы.
  • positionOffset Значение от [0, 1), указывающее смещение от страницы в позиции.
  • positionOffsetPixels Значение в пикселях, указывающее смещение от позиции.

Хотя вам понадобятся только первые два параметра. Что вам нужно сделать, так это привязать определенный цвет к каждому из ваших фрагментов, получить цвета текущей и следующей страницы, а затем смешать их вместе, используя соотношение positionOffset, чтобы создать новый фон ActionBar.

Полезный алгоритм смешивания двух цветов на основе соотношения можно найти в новом SlidingTabStrip пример. 0.0 вернет второй цвет, 0.5 вернет равномерную смесь, а 1.0 вернет первый цвет.

static int blendColors(int from, int to, float ratio) {
    final float inverseRation = 1f - ratio;
    final float r = Color.red(from) * ratio + Color.red(to) * inverseRation;
    final float g = Color.green(from) * ratio + Color.green(to) * inverseRation;
    final float b = Color.blue(from) * ratio + Color.blue(to) * inverseRation;
    return Color.rgb((int) r, (int) g, (int) b);
}

Вот простой пример:

Фрагмент цвета

public class ColorFragment extends Fragment {

    private static final String KEY_COLOR = "colorfragment:color";

    /** Empty constructor as per the {@link Fragment} docs */
    public ColorFragment() {
    }

    public static ColorFragment newInstance(int color) {
        final Bundle args = new Bundle();
        args.putInt(KEY_COLOR, color);
        final ColorFragment fragment = new ColorFragment();
        fragment.setArguments(args);
        return fragment;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        final FrameLayout rootView = new FrameLayout(getActivity());
        rootView.setBackgroundColor(getArguments().getInt(KEY_COLOR));
        return rootView;
    }

    public int getColor() {
        return getArguments().getInt(KEY_COLOR);
    }

}

Собираем все вместе

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Set the ActionBar background
    final ColorDrawable actionBarBackground = new ColorDrawable();
    getSupportActionBar().setBackgroundDrawable(actionBarBackground);
    ...
    final PagerAdapter pagerAdapter = ...;
    ...
    // Bind your data to your PagerAdapter
    ...
    final ViewPager pager = ...;
    pager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            super.onPageScrolled(position, positionOffset, positionOffsetPixels);
            if (position >= pagerAdapter.getCount() - 1) {
                // Guard against ArrayIndexOutOfBoundsException
                return;
            }
            // Retrieve the current and next ColorFragment
            final ColorFragment from = (ColorFragment) pagerAdapter.getItem(position);
            final ColorFragment to = (ColorFragment) pagerAdapter.getItem(position + 1);
            // Blend the colors and adjust the ActionBar
            final int blended = blendColors(to.getColor(), from.getColor(), positionOffset);
            actionBarBackground.setColor(blended);
        }

    });
    pager.setAdapter(pagerAdapter);
}

Результаты

http://gfycat.com/CautiousBewitchedJabiru

Я надеюсь, что это поможет вам немного!

person adneal    schedule 08.11.2014
comment
Эй, это было идеально! Большое спасибо за вашу помощь. Кори :) - person Fishingfon; 08.11.2014
comment
Хороший и полезный ответ. Спасибо - person webo80; 14.12.2014
comment
ViewPage setOnPageChangeListener устарел, вместо этого используйте метод addOnPageChangeListener - person FingerSmith; 02.06.2017

Вы можете сделать свой FragmentPagerAdapter реализующим ViewPager.OnPageChangeListener.

Затем переопределите onPageSelected

@Override
public void onPageSelected(int position) {
    // get the action bar here and change color
}

Что касается анимации смены цвета. Я не пробовал, но это из другой проблемы stackoverflow:

Android objectAnimator анимировать фонЦвет макета

person Mathbl    schedule 08.11.2014