Translucide/Transparent barre d'état + CoordinatorLayout + Barre + Fragment
J'ai d'installation suivants:
- Je suis en utilisant AppCompat
- MainActivity, qui est titulaire d'un fragment et a une barre d'outils, qui se cache lorsque vous faites défiler vers le bas
Fragment
avecRecyclerView
- tous les points de vue qui doivent s'adapter à l'écran ont la fonction
android:fitsSystemWindows="true"
dans le fichier xml du layout
Le problème est, je ne peux pas obtenir la barre d'état transparente dans ce cas. Ce que je fais est la suivante:
- Créer de l'activité et de l'appel setContent
-
Alors j'essaie d'adapter l'activité de programmation pour obtenir un translucides de la barre d'outils comme suit:
@TargetApi(Build.VERSION_CODES.LOLLIPOP) public void themeNavAndStatusBar(Activity activity) { if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP) return; Window w = activity.getWindow(); w.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS); w.setFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION, WindowManager.LayoutParams.FLAG_TRANSLUCENT_NAVIGATION); w.setFlags( WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS, WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS); w.setNavigationBarColor(activity.getResources().getColor(android.R.color.transparent)); w.setStatusBarColor(activity.getResources().getColor(android.R.color.transparent)); }
-
Remplacez l'espace réservé à l'activité (
@+id/frame_container
) avec le fragment
La barre de statut est solide de couleur dans ce cas, et les points de vue ne sont pas établis en dessous... Pourquoi?
Ce que je veux
Je veux une barre d'outils, qui est un défilement de l'écran et cachant complètement alors que le contenu en dessous de cette barre d'outils doit fitScreen et être tiré derrière la transparence de la barre de navigation.
Dispositions
Voici mon activité principale:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/clMain"
android:fitsSystemWindows="true"
android:background="?attr/main_background_color"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBarLayout"
android:fitsSystemWindows="true"
android:background="@null"
app:elevation="0dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:elevation="4dp"
android:theme="?actionBarThemeStyle"
app:popupTheme="?actionBarPopupThemeStyle"
app:layout_scrollFlags="scroll|enterAlways">
<LinearLayout
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/ivToolbarDataSource"
android:layout_gravity="center_vertical"
android:layout_marginRight="2dp"
android:layout_width="24dp"
android:layout_height="24dp" />
<TextView
android:id="@+id/tvToolbarTitle"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
android:theme="?actionBarThemeStyle"
android:layout_gravity="center_vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
<TextView
android:id="@+id/tvToolbarSubTitle"
style="@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle"
android:theme="?actionBarThemeStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</android.support.v7.widget.Toolbar>
<!-- BUG: http://stackoverflow.com/questions/30541409/coordinatorlayoutappbarlayout-does-not-draw-toolbar-properly -->
<View
android:layout_width="fill_parent"
android:layout_height="1dp"/>
</android.support.design.widget.AppBarLayout>
<FrameLayout
android:id="@+id/frame_container"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="32dp"
android:src="@drawable/ic_local_offer_white_24dp"
app:backgroundTint="?attr/colorPrimary"
app:borderWidth="0dp"
app:fabSize="normal"
app:rippleColor="?attr/colorPrimaryDark"
app:layout_anchorGravity="bottom|right|end"
app:layout_behavior="com.test.classes.ScrollAwareFABBehavior"/>
</android.support.design.widget.CoordinatorLayout>
Et voici mon fragment, qui seront placés dans les principaux d'activité:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/srlImages"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v7.widget.RecyclerView
android:id="@+id/rvImages"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>
<TextView
android:id="@+id/tvEmpty"
android:gravity="center"
android:layout_centerInParent="true"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
MODIFIER - les Captures d'écran
- Je utiliser une lumière/obscurité thème de base et de thème tout à la main (parce que l'utilisateur peut sélectionner n'importe quelle couleur primaire/couleur d'accent), il ne faut pas l'esprit que la barre d'outils est blanc (c'est la valeur par défaut du thème de la couleur d'arrière-plan et la couleur primaire). J'ai ajouté une bordure noire en tant que bien de sorte que vous voyez où l'activité se termine...
- Première Capture d'écran): Affiche la barre d'outils, rien ne défile
- Seconde Capture d'écran: j'ai juste commencé à scrolling => la barre d'outils maintenant défiler loin
- Troisième Capture d'écran: le contenu principal doit désormais faire défiler en dessous de la barre de navigation...
En fin de compte, je vais bien sûr faire de la barre d'outils et barre de navigation semi-transparent pour un meilleur effet visuel...
- Pourriez-vous poster une image? Vous devriez probablement fitsSystemWindows à false pour le CoordinatorLayout (au moins).
- J'ai ajouté les captures d'écran pour montrer le problème...
- Ensemble fitsSystemWindows à false pour le CoordinatorLayout et à la frame_container .
Vous devez vous connecter pour publier un commentaire.
tl;dr Ensemble
android:fitsSystemWindows="false"
au moins à la racineCoordinatorLayout
et à l'intérieur fragment de récipient,@frame_container
.Cela pourrait ne pas être la solution finale (c'est à dire il y a peut être d'autres
fitsSystemWindows
pour changer) alors, dites-moi si vous avez des problèmes.pourquoi
Quand il s'agit de la barre d'état, je pense
fitsSystemWindows
comme suit:fitsSystemWindows="false"
: dessine la vue normalement, sous la barre d'état, car les indicateurs de la fenêtre que vous avez défini.fitsSystemWindows="true"
: dessine la vue normalement, sous la barre d'état en raison de la fenêtre indicateurs que vous avez mis, mais ajoute un haut rembourrage sorte que le contenu est tiré en dessous de la barre d'état, et ils ne se chevauchent pas.En fait, à mon avis, le blanc que vous voyez n'est pas la barre d'état de couleur, mais plutôt votre
CoordinatorLayout
arrière-plan. C'est en raison defitsSystemWindows="true"
sur le coordonnateur: il dessine l'arrière-plan de l'ensemble de la fenêtre, mais ajoute supérieure de rembourrage pour le contenu, de sorte intérieure points de vue ne sont pas couverts par la barre d'état.Ce n'est pas ce que vous voulez. Votre contenu intérieur doit être couverts par la barre d'état, et donc vous devez définir
fitsSystemWindows="false"
à la coordinateur (afin de ne pas appliquer la crème de remplissage) et probablement pour le contenu lui-même.Une fois que vous obtenez la façon dont il fonctionne,
il est facile à déboguer et obtenir l'effet que vous recherchez. En fait, il ne l'est pas. Les années passent, mais j'ai encore passer des heures à essayer de comprendre le droit fitsSystemWindows combinaison, parce que la plupart des points de Vue (dans les bibliothèques de prise en charge au moins) remplacer le comportement par défaut que j'ai énoncé ci-dessus, dans les moyens qui sont pour la plupart pas intuitif. Voir ce post pour un petit guide sur la façon de l'utiliser.android:fitsSystemWindows="false"
est que la barre d'outils trop est maintenant derrière la barre d'état.android:fitsSystemWindows="true"
et danscoordinateLayout
ensembleapp:statusBarBackground="@android:color/transparent"
Modifier votre styles.xml (v21) , ajoutez le style suivant
Vous pouvez changer le thème parent selon votre goût, mais maintenant déclarer ce thème dans votre AndroidManifest.xml fichier pour une activité particulière comme ceci :
Cela permettra à votre contenu visible sous le transparent actionbar.
Maintenant utiliser ce qui suit pour aligner votre barre d'outils en dessous de la Barre d'état correctement, appelez dans votre oncreate:
Obtenir la barre d'état de hauteur à l'aide d'suivantes :
Supprimer les informations suivantes auprès de votre coordonnateur de la mise en page tags :
Maintenant afin de l'effondrement de la barre d'outils ou de le cacher, vous pouvez vous référer au tutoriel suivant :
Assurez-vous que vous utilisez la version suivante de la conception de la bibliothèque de prise en charge, comme il est exempt de bugs :
Après la lecture de vos descriptions au sujet de votre question, je pensais que les styles de Google Photos correspond à vos besoins.
OK, il y a juste quelques conseils pour votre question. Après mon test, ça fonctionne.
<item name="android:windowTranslucentStatus">true</item>
dans votrele style de la version Android de niveau est supérieur à 19(à savoir KitKat)
<item name="android:windowTranslucentNavigation">true</item>
dans votrele style de la version Android de niveau est supérieur à 19(à savoir KitKat)
Toolbar
en douceur lorsque le contenu défile jusqu'et pour montrer
Toolbar
en douceur lorsque le contenu défile vers le bas, vousbesoin d'ajouter
app:layout_collapseMode="parallax"
dans votreToolbar
s'attributs basés sur les codes.Bien sûr, vousnécessité de coordonner les
Toolbar
avecCollapsingToolbarLayout
CoordinatorLayout
etAppBarLayout
.Pour moi, la raison n'était pas qu'il ne fonctionne pas en soi, mais que j'utilise le matériel de tiroir de la bibliothèque de Mike Penz et cette bibliothèque fait de l'utiliser en plein écran + offset + personnalisé arrière-plan de la barre d'outils, donc j'ai eu à résoudre le problème en respectant le fait que l'installation particulière...
Je vais récompenser les points à l', à mon avis, le plus instructif réponse si...
fitsSystemWindows
drapeau. Il y a aussi le CollapsingToolbar exemple github.com/mikepenz/MaterialDrawer/blob/develop/app/src/main/...que certains utilisateurs ont dit, par la mise en
android:fitsSystemWindows="false"
, la mise en page se chevauchent ci-dessousstatusbar
.Je l'ai résolu par la mise en
android:fitsSystemWindows="true"
et dansCoordinatorLayout
tag réglageapp:statusBarBackground="@android:color/transparent"
.J'ai eu le même problème et ma solution a été d'ajouter android:fitsSystemWindows="true" à la DrawerLayout
J'ai eu des questions pertinentes dépendent android:fitsSystemWindows réglage.
Une fois que la fausse:
Collations a été établi en vertu de la barre de Navigation
Une fois remplies:
Barre d'état n'avait aucune arrière-plan transparent
Solution était très simple...
Juste pour ajouter android:layout_marginBottom="48dp". pour CoordinatorLayout comme ça:
Théoriquement barre de Navigation doit avoir une taille fixe "48dp", mais dans des versions futures potentiellement, il peut changer (comme la barre d'État obtenu plus mince en 1dp en Guimauve), je ne voudrais pas compter sur taille fixe.
En outre mieux l'obtenir et appliquer sur le moment de l'exécution.
Si Vous utilisez Google Map, comme moi, Vous voulez peut-être savoir ActionBar/taille de la Barre d'outils et la barre de navigation au moment de l'exécution:
dans onCreate utiliser ce code:
Et ce qui est important. Si Vous avez quelques couches supplémentaires comme tiroir etc mettre de l'encapsulation de l'CoordinatorLayout à l'intérieur plutôt qu'à l'extérieur car sinon il va faire d'autres points de vue à l'intérieur de court par la marginBottom