Comment créer un ActionBar comme Google Play qui se faufile lors du défilement

Comment faire pour rendre ActionBar transparent ou translucide comme Google Play qui apparaît ou disparaît lors du défilement avec windowActionBarOverlay ?

Vérifiez les captures d’écran suivantes

** entrez la description de l'image ici **

Voici le code que j’ai utilisé dans l’application que je travaille

Vous devrez utiliser la fonction OnScrollChanged dans votre ScrollView . ActionBar ne vous permet pas de définir l’opacité, définissez donc un arrière-plan pouvant être dessiné sur la barre d’actions et vous pouvez modifier son opacité en fonction de la quantité de défilement dans la vue de défilement. J’ai donné un exemple de workflow

La fonction définit l’alpha approprié pour la vue locationImage en fonction de sa fenêtre WRT.

this.getScrollY() vous donne combien le scrollView a fait défiler

 public void OnScrollChanged(int l, int t, int oldl, int oldt) { // Code ... locationImage.setAlpha(getAlphaForView(locationImageInitialLocation- this.getScrollY())); } private float getAlphaForView(int position) { int diff = 0; float minAlpha = 0.4f, maxAlpha = 1.f; float alpha = minAlpha; // min alpha if (position > screenHeight) alpha = minAlpha; else if (position + locationImageHeight < screenHeight) alpha = maxAlpha; else { diff = screenHeight - position; alpha += ((diff * 1f) / locationImageHeight)* (maxAlpha - minAlpha); // 1f and 0.4f are maximum and min // alpha // this will return a number betn 0f and 0.6f } // System.out.println(alpha+" "+screenHeight +" "+locationImageInitialLocation+" "+position+" "+diff); return alpha; } 

EDIT: J'ai ajouté un exemple de travail à https://github.com/ramanadv/fadingActionBar , vous pouvez y jeter un coup d'oeil.

entrer la description de l'image ici

S’il vous plaît vérifier cette bibliothèque https://github.com/ManuelPeinado/FadingActionBar qui implémente l’effet de la barre d’action de fondu cool que vous voulez

Cette bibliothèque aide à l’animation https://github.com/ksoichiro/Android-ObservableScrollView

Google DeveloperDocumentation officiel

entrer la description de l'image ici

barre d’action en mode superposition.

Activer le mode superposition

Pour activer le mode de superposition pour la barre d’action, vous devez créer un thème personnalisé qui étend un thème de barre d’action existant et définissez la propriété android: windowActionBarOverlay sur true.

Pour Android 3.0 et supérieur uniquement

Si votre minSdkVersion est défini sur 11 ou plus, votre thème personnalisé doit utiliser le thème Theme.Holo (ou l’un de ses descendants) comme thème parent. Par exemple:

     

Pour Android 2.1 et supérieur

Si votre application utilise la bibliothèque de support pour la compatibilité sur les périphériques exécutant des versions inférieures à Android 3.0, votre thème personnalisé doit utiliser le thème Theme.AppCompat (ou l’un de ses descendants) comme thème parent. Par exemple:

     

Spécifier la mise en page supérieure

Lorsque la barre d’action est en mode superposition, elle risque de masquer certains éléments de votre mise en page qui doivent restr visibles. Pour vous assurer que ces éléments restnt en permanence sous la barre d’action, ajoutez une marge ou un remplissage au haut de la ou des vues en utilisant la hauteur spécifiée par actionBarSize. Par exemple:

  ...  

Il existe une documentation officielle sur la façon d’atteindre cet effet: https://developer.android.com/training/basics/actionbar/overlaying.html

Edit: Il existe une bibliothèque open source ObservableScrollView avec beaucoup de démos open source avec différents effets ActionBar, y compris ceux que vous avez mentionnés. C’est une excellente ressource: https://github.com/ksoichiro/Android-ObservableScrollView .

Si vous utilisez un CoordinatorLayout dans votre layout XML, vous devriez vérifier cet article décrivant comment gérer les parchemins et faire réagir les autres vues.

Il y a un exemple d’accomplissement de ce que vous avez demandé, si vous ajoutez votre imageview en tant qu’enfant du CollapsingToolbarLayout, toute la magie est gérée automatiquement et vous pouvez même certains parameters comme la couleur de défilement, la hauteur minimum pour commencer à réduire, etc.

Utiliser l’écouteur de défilement AbsListView que nous pouvons réaliser pour listview sans utiliser d’autres bibliothèques compliquées ou ScrollView

définir l’écouteur de défilement pour afficher la liste

 public class PagedScrollListener implements AbsListView.OnScrollListener { private ActionBar mActionBar; private View mTopHideView; // represent header view @Override public void onScrollStateChanged(final AbsListView view, final int scrollState) { mScrollState = scrollState; } @Override public void onScroll(final AbsListView view, final int firstVisibleItem, final int visibleItemCount, final int totalItemCount) { if (mActionBar != null && mTopHideView != null && mListView != null) { Log.i(TAG, getScrollY() + ""); int currentY = getScrollY(); final int headerHeight = mTopHideView.getHeight() - mActionBar.getHeight(); final float ratio = (float) Math.min(Math.max(currentY, 0), headerHeight) / headerHeight; final int newAlpha = (int) (ratio * 255); Log.i(TAG, newAlpha + " alpha"); mActionBarDrawaqble.setAlpha(newAlpha); }} public void setActionBarRefernce(ActionBar actionBar, View topHideView, float actionBarHeight, ListView listView) { mActionBar = actionBar; mActionBarHeight = actionBarHeight; mTopHideView = topHideView; mListView = listView; mActionBarDrawaqble = new ColorDrawable(ContextCompat.getColor(mContext, R.color.google_plus_red)); mActionBar.setBackgroundDrawable(mActionBarDrawaqble); mActionBarDrawaqble.setAlpha(0); } public int getScrollY() { View c = mListView.getChildAt(0); if (c == null) { return 0; } int firstVisiblePosition = mListView.getFirstVisiblePosition(); int top = c.getTop(); int headerHeight = 0; if (firstVisiblePosition >= 1) { headerHeight = mTopHideView.getHeight(); } return -top + firstVisiblePosition * c.getHeight() + headerHeight; } } 

// Note: N’oubliez pas d’appeler la méthode ** setActionBarRefernce ** de l’écouteur personnalisé

Sur webView:

 @JavascriptInterface public void showToolbar(Ssortingng scrollY, Ssortingng imgWidth) { int int_scrollY = Integer.valueOf(scrollY); int int_imgWidth = Integer.valueOf(imgWidth); Ssortingng clr; if (int_scrollY<=int_imgWidth-actionBarHeight) { clr = Integer.toHexString(int_scrollY * 255 / (int_imgWidth-actionBarHeight)); }else{ clr = Integer.toHexString(255); } toolbar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#"+clr+"9CCC65"))); }