web-dev-qa-db-fra.com

Superposition de contenu au-dessus d'AppBarLayout à l'aide de la nouvelle conception de matériau

Je veux réaliser quelque chose comme ça. (pas le FAB ou le Snackbar). Comment puis-je créer une mise en page, superposant le AppBarLayout? Comme ça! (Par exemple)

AppBarLayout with overlaying content

Comme Play Store:

Just like on the Play Store

Mon AppBarLayout avec CoordinatorLayout et NestedScrollView avec RelativeLayout en tant que contenu ressemble à ceci:

<Android.support.design.widget.CoordinatorLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
xmlns:tools="http://schemas.Android.com/tools"
Android:id="@+id/rootLayout"
Android:layout_width="match_parent"
Android:layout_height="match_parent">

<Android.support.design.widget.AppBarLayout
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/_118sdp"
    Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <Android.support.design.widget.CollapsingToolbarLayout
        Android:id="@+id/collapsingToolbarLayout"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:contentScrim="@color/mpc_pink"
        app:expandedTitleMarginStart="@dimen/_40sdp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <de.mypostcardstore.widgets.ItemImageView
            Android:id="@+id/header"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:scaleType="centerCrop"
            Android:src="@color/mpc_pink"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.7" />

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/article_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:minHeight="?attr/actionBarSize"
            app:contentScrim="@color/mpc_pink"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />


    </Android.support.design.widget.CollapsingToolbarLayout>

</Android.support.design.widget.AppBarLayout>

<Android.support.v4.widget.NestedScrollView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:background="?android:colorBackground"
    Android:fillViewport="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
        Android:layout_width="match_parent".....>

Ce serait génial si quelqu'un pouvait m'aider. Je ne trouve rien sur Internet ...

Merci d'avance!

androidandroid-layoutmaterial-designandroid-toolbarandroid-coordinatorlayout
27
X7S

Il suffit d'ajouter quelque chose comme

app:behavior_overlapTop="64dp"

à votre NestedScrollView et il sera placé au-dessus de la barre d’outils développée.

De plus, vous devriez ajouter quelque chose comme

app:expandedTitleMarginBottom="70dp"

à votre CollapsingToolbarLayout afin que le titre n'apparaisse pas sous votre contenu de défilement superposé.

42
Ander Webbs

C'est assez simple, vraiment. Vous pouvez y parvenir en combinant ToolBar, FrameLayout et votre affichage du contenu (il peut s'agir d'un ListView comme votre premier exemple ou quoi que ce soit).

L’idée est de donner à votre FrameLayout la même couleur que votre ToolBar, en donnant l’illusion que ToolBar soit bien plus grande qu’elle ne l’est. Il ne vous reste alors plus qu’à ce que votre contenu soit affiché en dernier (ou dans l’API 21 et au-dessus: possédez l’attribut elevation le plus élevé) pour qu’il apparaisse comme s'il flottait au-dessus de FrameLayout.

Voir mon illustration ci-dessous:

enter image description here

Maintenant que vous avez la bonne idée, voici un extrait de code XML réel permettant de faire ce genre de chose. (J'utilise cette mise en page dans l'une de mes applications):

<!-- Somewhere in your layout.xml -->

....

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/tb_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="@dimen/abc_action_bar_default_height_material"
        Android:background="?attr/colorPrimary"
        Android:minHeight="?attr/actionBarSize"
        app:contentInsetStart="72dp"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

    <!-- This is the 'faux' ToolBar I've been telling you about. This is the part that will be overlaid by the content view below. -->
    <FrameLayout
        Android:id="@+id/v_toolbar_extension"
        Android:layout_width="match_parent"
        Android:layout_height="64dp"
        Android:layout_below="@+id/tb_toolbar"
        Android:background="?attr/colorPrimary"
        Android:elevation="2dp"/>

    <!-- Normally, I use this FrameLayout as a base for inflating my fragments. You could just use put your content view here. -->
    <FrameLayout
        Android:id="@+id/ly_content"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:layout_below="@+id/tb_toolbar"
        Android:elevation="3dp"/>

....

Notez que mon ly_content a une valeur d'élévation supérieure à celle de v_toolbar_extension. C’est ce qui vous donnera l’effet souhaité de «barre d’outils superposée».

Enfin, vous voudriez ajouter cette ligne quelque part dans la fonction onCreate() de votre activité:

/* Assuming mToolbar exists as a reference to your ToolBar in XML. */
setSupportActionBar(mTbToolbar);
getSupportActionBar().setElevation(0);

Ce que les codes font, c’est définir votre élévation ToolBar à zéro; supprimer les ombres prédéfinies qui ont été données par défaut aux barres d'outils. Si vous ne le faites pas, ladite ombre créera une "couture" entre votre ToolBar et votre FrameLayout, brisant ainsi l'illusion que ces deux-là soient identiques.

p.s. , Il est également important de donner à votre vue du contenu un remplissage de chaque côté. Ainsi, la vue de votre contenu ne couvrira pas toute la largeur de l'écran (ce qui rendrait cet effet inutile).

Note: / Je vois quelques bonnes réponses ici qui mentionnaient l'absence de FrameLayout et au lieu de cela, augmentaient ToolBar. En théorie, cela pourrait fonctionner aussi bien que la solution proposée, vous pourriez avoir des problèmes lorsque vous essayez de manipuler le défilement; En faisant cela, vous ne pourrez pas séparer ToolBar et son extension. Vous serez obligé de rendre Toolbar statique ou de faire défiler tous les ToolBar (cela rend le défilement un peu bizarre).

Ajoutez à cela le fait que vous ne pouvez pas facilement affecter un dessin personnalisable à un Toolbar. Par conséquent, il est difficile de suivre l'exemple de Google Play que vous avez donné ci-dessus. Tandis que si vous utilisez ma solution, tout ce que vous avez à faire est de simplement rendre votre Toolbar transparent et d’attribuer le dessinable à FrameLayout à la place.

14
ridsatrio

J'ai eu une exigence similaire et je l'ai réalisé comme ci-dessous.

Votre thème d'activité doit s'étendre à Theme.AppCompat.Light.NoActionBar . J'ai créé un fichier XML de présentation en tant que:

<Android.support.v7.widget.Toolbar
    Android:id="@+id/toolbar_main"
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/action_bar_size_x2"
    Android:background="@color/colorPrimary"
    Android:minHeight="?attr/actionBarSize" />

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_marginLeft="15dp"
    Android:layout_marginRight="15dp"
    Android:layout_marginTop="@dimen/action_bar_size"
    Android:orientation="vertical" >

    <Android.support.v7.widget.CardView
        Android:layout_width="match_parent"
        Android:layout_height="match_parent" >

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical" >

            <TextView
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_margin="10dp"
                Android:text="@string/app_name"
                Android:textSize="24sp" />
        </LinearLayout>
    </Android.support.v7.widget.CardView>
</LinearLayout>

Et l'activité devrait ressembler à ceci:

public class MainActivity extends ActionBarActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar maintoolbar = (Toolbar) findViewById(R.id.toolbar_main);
        setSupportActionBar(maintoolbar);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
    }
}

J'ai eu une vue comme celle-ci: enter image description here

1
Akanksha Hegde

J'ai essayé d'implémenter les effets que vous avez mentionnés, appelé Card Toolbar in Android, et cela a fonctionné comme prévu. Voici ma mise en page, jetez un coup d'oeil:

<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:background="@color/background_material_light" >
<Android.support.v7.widget.Toolbar
    Android:layout_width="match_parent"
    Android:layout_height="@dimen/toolbar_double_height"
    Android:background="?attr/colorPrimary" />
<Android.support.v7.widget.CardView
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_marginLeft="@dimen/cardview_toolbar_spacer"
    Android:layout_marginRight="@dimen/cardview_toolbar_spacer"
    Android:layout_marginTop="?attr/actionBarSize"
    app:cardBackgroundColor="@Android:color/white">
    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">
        <Android.support.v7.widget.Toolbar
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize" />
        <View
            Android:layout_width="match_parent"
            Android:layout_height="1dp"
            Android:alpha="0.12"
            Android:background="@Android:color/black" />
    </LinearLayout>
</Android.support.v7.widget.CardView>
</FrameLayout>

J'espère que vous serez inspiré.

0
SilentKnight