5

메인 페이지에서 스 와이프하기 위해 3 조각으로 구성된 FragmentPagerAdapter 설정이있는 앱을 가지고 있습니다.조각 사이를 스 와이프 할 때 ActionBar 색을 변경하는 방법 (머티리얼 디자인)?

조각 사이를 스 와이프 할 때 설정을 시도하려고 했으므로 작업 표시 줄의 색상이 바뀝니다 (페이드 인 및 페이드 아웃).

그러나 어떻게해야하는지 잘 모르겠습니다. 조각 사이를 스 와이프 할 때 어떤 메소드가 호출됩니까? I.E 작업 표시 줄의 색을 변경하는 코드는 어디에 두어야합니까?

또한 페이드 인 및 아웃 효과를 어떻게 얻을 수 있습니까 (그래서 다른 색으로 한 색이 희미 해집니다)?

정말 고맙겠습니다. 사전에

감사

건배 코리 :

답변

13

?

찾고 계시는 분은 ViewPager.OnPageChangeListener.onPageScrolled입니다. 그러면 다음과 같이 표시됩니다.

  • 위치 현재 표시되는 첫 번째 페이지의 위치 인덱스입니다.
  • positionOffset 위치의 페이지로부터의 오프셋을 나타내는 [0, 1]의 값입니다.
  • positionOffsetPixels 위치의 오프셋을 나타내는 값 (픽셀 단위).

그러나 처음 두 매개 변수 만 있으면됩니다. 당신은 각 조각에 특정 색상을 바인딩하고 현재 페이지와 다음 페이지 색상을 모두 검색 한 다음 positionOffset 비율을 사용하여 블렌드하여 새로운 ActionBar 배경을 만들 수 있습니다.

Google의 새로운 SlidingTabStrip 예에서 비율에 따라 두 가지 색상을 혼합하는 데 유용한 알고리즘을 찾을 수 있습니다.

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

} 

당기면 다음은 간단한 예이다 0.0은 제 2 색을 반환, 0.5은 심지어 혼합 반환하고 1.0는 제 1 색을

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

를 반환 모두 함께

@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

난 그 일부를 당신을 도움이되기를 바랍니다!

+1

안녕하세요. 도와 줘서 고마워. 코리 :) – Fishingfon

+1

좋고 유용한 답변. 감사합니다 – webo80

+1

이것은 재미있어 보입니다 ... –

1

당신은 당신의 FragmentPagerAdapter이 ViewPager.OnPageChangeListener를 구현 할 수 있습니다.

그런 다음, 재정의 색상 변화 애니메이션으로

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

을 onPageSelected. 나는 그것을 시도하지 않았다, 그러나 이것은 또 다른 유래 문제에서이다 :

당신이 조각 사이에 슬쩍 때 호출되는 어떤 방법

Android objectAnimator animate backgroundColor of Layout