Cómo crear una ActionBar como Google Play que se desvanece al desplazarse
¿Cómo hacer transparente o translúcido ActionBar como Google Play que se desvanece dentro o hacia fuera al desplazarse usando windowActionBarOverlay
?
Compruebe las siguientes capturas de pantalla
- GLSurfaceView - cómo hacer el fondo translúcido
- Mostrar una actividad transparente en Android?
- Marco transparente tostado
- Cómo hacer un menú transparente de lujo como el "menú compartido" en la galería de Android?
- Android, Transparente sub-GLSurfaceView en el diseño?
- Transparent InputMethod para Android
- Dibuja un círculo transparente sobre un lienzo lleno de android
- Fondo transparente
- Android WebView transparente en la parte superior de VideoView
- ¿Cómo puedo crear una actividad transparente en Android?
- La transición de elementos compartidos deja un extraño fondo blanco entre la primera actividad y la segunda actividad transparente
- Android Image Dialog / Popup mismo tamaño que la imagen y sin frontera
- Añadir un botón de imagen con fondo transparente
El siguiente es el código que usé en la aplicación que estoy trabajando
Tendrá que usar la función OnScrollChanged
en su ScrollView
. ActionBar
no le permite establecer la opacidad, así que establezca un fondo dibujable en la barra de acción y puede cambiar su opacidad en función de la cantidad de desplazamiento en la vista de desplazamiento. He dado un ejemplo de flujo de trabajo
El conjunto de funciones da el alfa apropiado para la ubicación locationImage basada en su posición WRT window.
this.getScrollY()
le indica cuánto ha desplazado el scrollView
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: He añadido un ejemplo de muestra de trabajo en https://github.com/ramanadv/fadingActionBar , puede echar un vistazo.
Por favor, compruebe esta biblioteca https://github.com/ManuelPeinado/FadingActionBar que implementa el efecto cool fading action bar que desea
Esta biblioteca ayuda a la animación https://github.com/ksoichiro/Android-ObservableScrollView
Documentación oficial de Google Developer
Barra de acción en modo de superposición.
Habilitar el modo de superposición
Para habilitar el modo de superposición para la barra de acción, debe crear un tema personalizado que amplíe un tema de barra de acción existente y establezca la propiedad android: windowActionBarOverlay en true.
Solo para Android 3.0 y versiones posteriores
Si su minSdkVersion está establecida en 11 o superior, su tema personalizado debe utilizar el tema Theme.Holo (o uno de sus descendientes) como tema principal. Por ejemplo:
<resources> <!-- the theme applied to the application or activity --> <style name="CustomActionBarTheme" parent="@android:style/Theme.Holo"> <item name="android:windowActionBarOverlay">true</item> </style> </resources>
Para Android 2.1 y versiones superiores
Si su aplicación está utilizando la compatibilidad de la biblioteca de soporte en dispositivos que ejecutan versiones inferiores a Android 3.0, el tema personalizado debe utilizar el tema Theme.AppCompat (o uno de sus descendientes) como tema principal. Por ejemplo:
<resources> <!-- the theme applied to the application or activity --> <style name="CustomActionBarTheme" parent="@android:style/Theme.AppCompat"> <item name="android:windowActionBarOverlay">true</item> <!-- Support library compatibility --> <item name="windowActionBarOverlay">true</item> </style> </resources>
Especificar el margen superior del diseño
Cuando la barra de acción está en modo de superposición, puede obscurecer algunos de su diseño que deben permanecer visibles. Para asegurarse de que dichos elementos permanezcan por debajo de la barra de acción en todo momento, agregue margen o relleno a la parte superior de las vistas usando la altura especificada por actionBarSize. Por ejemplo:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingTop="?android:attr/actionBarSize"> ... </RelativeLayout>
Hay documentación oficial sobre cómo lograr este efecto: https://developer.android.com/training/basics/actionbar/overlaying.html
Editar: Existe una biblioteca de código abierto ObservableScrollView con una gran cantidad de demos de código abierto con diferentes efectos de ActionBar, incluidos los que mencionó. Es un gran recurso: https://github.com/ksoichiro/Android-ObservableScrollView .
Utilizando el explorador de desplazamiento AbsListView que podemos lograr para listview simplemente sin usar otra biblioteca complicada o ScrollView
Fija el listener a la vista de lista
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; } }
// Nota: No olvide llamar al método ** setActionBarRefernce ** de escuchas personalizadas
Si está utilizando un CoordinatorLayout en su xml de diseño, debería retirar este artículo describiendo cómo manejar los rollos y hacer que otras vistas reaccionen a ellos.
Hay un ejemplo de lograr lo que pidió, si agrega su imagen como un niño de la CollapsingToolbarLayout toda la magia se maneja de forma automática y puede incluso algunos parámetros como el color de malla, la altura mínima para comenzar a colapsar, etc:
En webView:
@JavascriptInterface public void showToolbar(String scrollY, String imgWidth) { int int_scrollY = Integer.valueOf(scrollY); int int_imgWidth = Integer.valueOf(imgWidth); String 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"))); }
- Este SDK de Android requiere ADT versión 23.0.0 o superior. La versión actual es 22.6. ¿Desea actualizar ADT a la última versión?
- ¿Hay una manera de hacer un número de teléfono clicable en un teléfono de iphone o android para hacer una llamada en HTML?