在片段之间滑动时如何更改ActionBar的颜色(材质设计)? [英] How change ActionBar colour when swiping between fragments (Material Design)?

问题描述

我正在执行一个应用程序，该应用程序具有FragmentPagerAdapter设置，其中有3个片段可在主页上滑动.

I have an app i am doing, which has a FragmentPagerAdapter setup with 3 fragments to swipe between on the main page.

我一直在尝试进行设置，以便在片段之间滑动时，操作栏会更改颜色(淡入和淡出).

I have been trying to get it setup so as you swipe between fragments, the action bar changes color (fades in and out).

但是我不确定该怎么做. 在片段之间滑动时会调用什么方法?我应该在哪里放置代码以更改操作栏颜色?

However i am not sure how i should do this. What method is called when you swipe between fragments? I.E where should i put the code to change the action bar colour?

还有我如何获得淡入和淡出效果(因此它将一种颜色淡出为另一种颜色)?

And also how would i get the fade in and out effect (so it fades out one colour into another one)?

我真的很感谢任何人的帮助.

I would really appreciate anyones help.

预先感谢

欢呼 科里:)

推荐答案

在片段之间滑动时会调用什么方法?

What method is called when you swipe between fragments?

您正在寻找 ViewPager.OnPageChangeListener.onPageScrolled .这将为您提供:

You're looking for ViewPager.OnPageChangeListener.onPageScrolled. This will give you:

• 位置当前显示的第一页的位置索引.
• positionOffset 来自[0，1)的值，指示与位置页面的偏移量.
• positionOffsetPixels 以像素为单位的值，指示与位置的偏移量.

• position Position index of the first page currently being displayed.
• positionOffset Value from [0, 1) indicating the offset from the page at position.
• positionOffsetPixels Value in pixels indicating the offset from position.

尽管，您仅需要前两个参数.您要做的是将一种特定的颜色绑定到您的每个片段上，同时获取当前页面和下一页的颜色，然后使用positionOffset比率将它们混合在一起以创建新的ActionBar背景.

Although, you'll only need the first two parameters. What you'll want to do is bind a particular color to each of your fragments, retrieve both the current page and next page colors, then blend them together using the positionOffset ratio to create your new ActionBar background.

可以在Google的新

A useful algorithm for blending two colors based on a ratio can be found in Google's new SlidingTabStrip example. 0.0 will return the second color, 0.5 will return an even blend, and 1.0 will return the first color

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

这是一个简单的例子:

ColorFragment

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

希望对您有所帮助！

这篇关于在片段之间滑动时如何更改ActionBar的颜色(材质设计)?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！