web-dev-qa-db-fra.com

Barres système translucides et marge de contenu dans KitKat

J'essaie de profiter des nouvelles barres système translucides KitKat pour obtenir une image plein écran en arrière-plan de mon application.

J'ai des problèmes pour trouver les bons paramètres pour obtenir le comportement que je souhaite. En ce moment, j'ai un ViewPager avec trois Fragment chacun composé d'un RelativeLayout contenant un ImageView (pour l'image d'arrière-plan) et un TextView pour le contenu.

Ce que je recherche, c'est que le contenu s'intègre parfaitement dans la partie de l'écran disponible pour les interactions et que l'image prenne toute la partie visible de l'écran.

Si j'utilise simplement Android:Theme.Holo.Light.NoActionBar.TranslucentDecor comme mon thème, il semble bien en mode portrait, mais la barre de navigation chevauche le contenu en mode paysage (voir les captures d'écran ci-dessous).

First attempt - portrait. Looks good.First attempt - landscape. nav bar overlaps the content

Après la recommandation dans la documentation , j'ai ajouté Android:fitsSystemWindows = true à mon thème, mais qui génère des artefacts étranges (voir ci-dessous) Second attempt - portrait. Artifacts!!Second attempt - landscape. Artifacts!!

Comment puis-je le faire se comporter comme dans le deuxième exemple, mais être beau, sans les artefacts visuels?

androidandroid-layoutuser-interfaceandroid-4.4-kitkat
22
Krzysztof Kozmic

Je sais que c'est vieux, mais je viens de rencontrer le même problème et j'ai trouvé une solution facile, donc je voulais le partager au cas où cela serait rencontré par quelqu'un sur Google.

Il semble qu'il existe un Android lorsqu'un ViewPager (en particulier un ImageSwitcher) est placé dans une mise en page ayant l'attribut Android:fitsSystemWindows="true". Pour une raison quelconque, les fenêtres du système semblent être dessinées sur elles. : /

Quoi qu'il en soit, j'ai trouvé un correctif. Pour mon activité, j'avais une mise en page XML comme suit:

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    <!-- NOT HERE! Android:fitsSystemWindows="true" -->
    Android:layout_width="match_parent"
    Android:layout_height="match_parent">

    <ImageSwitcher
        Android:id="@+id/background_image_switcher"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:padding="0dp"
        Android:layout_margin="0dp"
        Android:background="@color/background_dark_navy"
        Android:inAnimation="@Android:anim/fade_in"
        Android:outAnimation="@Android:anim/fade_out"
        >

        <ImageView
            style="@style/BlurredBackgroundImage"
            />
        <ImageView
            style="@style/BlurredBackgroundImage"
            />

    </ImageSwitcher>

    <FrameLayout
        Android:fitsSystemWindows="true" <!-- Here!!! -->
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

        <!-- Fitted content here -->

    </FrameLayout>

L'astuce était de ne pas contenir l'ImageSwitcher dans une mise en page avec le Android:fitsSystemWindows="true", mais pour déplacer à la place le Android:fitsSystemWindows="true" attribut à intérieur FrameLayout contenant le contenu réel dont j'avais besoin pour l'adapter (le texte du titre dans votre cas). Malheureusement, cela permet à la vue de ImageSwitcher/ViewPager d'être légèrement coupée par les fenêtres du système, mais si l'image est utilisée comme une image d'arrière-plan, cela n'a pas trop d'importance et est un bien meilleur compromis que les artefacts ou le maintien de tous des différentes dimensions/styles qui peuvent ou non avoir désactivé la navigation (comme la réponse actuellement sélectionnée).

J'espère que ça aidera quelqu'un!

7
Rican7

Ma solution était de désactiver la navigation translucide en mode paysage. Vous obtenez toujours une barre d'état translucide, mais cela résout le problème où la barre de navigation est opaque et se chevauche dans le paysage.

res/values-v19/styles.xml (ces valeurs sont dans mon thème) 

<item name="Android:windowTranslucentStatus">true</item>
<item name="Android:windowTranslucentNavigation">@bool/translucentNavBar</item>

res/values-v19/bools.xml (activer la navigation translucide) 

<bool name="translucentNavBar">true</bool>

res/values-land-v19/bools.xml (désactiver la navigation translucide dans le paysage) 

<bool name="translucentNavBar">false</bool>

res/values-sw600dp-land-v19/bools.xml (activer la navigation translucide pour les tablettes en mode paysage) 

<bool name="translucentNavBar">true</bool>
39
Tanner Perrien

J'ai rencontré des problèmes similaires, mais je n'utilisais pas un ViewPager, donc cela peut ne pas fonctionner. J'ai résolu en faisant quelques emboîtements comme Gabe l'a décrit: seul le ViewGroup interne est fitSystemWindows = "true", le ViewGroup externe qui affiche l'arrière-plan est donc autorisé à s'étendre sous les barres translucides. Ensuite, j'appelle également requestFitSystemWindows () sur les changements d'orientation. Encore une fois, votre ViewPager pourrait compliquer les choses et ma solution ne fonctionnera pas, mais j'espère que cela vous aidera.

3
danh32

Mettez un autre ViewGroup à l'intérieur de celui avec l'image et fitsSystemWindows à true

2
Gabe