Come cambia il colore ActionBar quando si scorre tra i frammenti (Material Design)?

Question

Ho un'app che sto facendo, che ha una installazione di FragmentPagerAdapter con 3 frammenti per scorrere tra la pagina principale.

Ho cercato di ottenerlo impostato in modo da passare il dito tra i frammenti, la barra di azione cambia colore (si dissolve in entrata e in uscita).

Tuttavia, non sono sicuro di come dovrei farlo. Quale metodo viene chiamato quando scorri tra i frammenti? I. E dove devo inserire il codice per cambiare il colore della barra delle azioni?

E anche come otterrei l'effetto di dissolvenza in entrata e in uscita (in modo da sfumare un colore in un altro)?

Sarei davvero grato se qualcuno mi aiuti.

Grazie in anticipo

Acclamazioni Corey :)

Answer 1

Quale metodo viene chiamato quando si scorrere tra i frammenti?

Stai cercando ViewPager.OnPageChangeListener.onPageScrolled. Questo vi darà:

• posizione indice di posizione della prima pagina attualmente visualizzata.
• positionOffset Valore da [0, 1) che indica l'offset dalla pagina in posizione.
• positionOffsetPixels Valore in pixel che indica l'offset dalla posizione.

Anche se sono necessari solo i primi due parametri. Quello che vorresti fare è associare un colore particolare a ciascuno dei tuoi frammenti, recuperare sia la pagina corrente che i colori della pagina successiva, quindi fondili insieme usando il rapporto positionOffset per creare il tuo nuovo sfondo ActionBar.

Un utile algoritmo per miscelare due colori in base a un rapporto è disponibile nel nuovo esempio di Google SlidingTabStrip.0.0 restituirà il secondo colore, 0.5 restituirà un ancora si fondono, e 1.0 tornerà il primo colore

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

Ecco un semplice esempio:

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

} 

Tirandola tutti insieme

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

Risultati

http://gfycat.com/CautiousBewitchedJabiru

Spero che ti aiuta un po '!

Answer 2

Si potrebbe rendere il vostro FragmentPagerAdapter implementa ViewPager.OnPageChangeListener.

Poi, override onPageSelected

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

Per quanto riguarda l'animazione cambiamento di colore. Non ho provato, ma questo è un altro problema da StackOverflow:

Android objectAnimator animate backgroundColor of Layout