Superposition de contenu au-dessus d'AppBarLayout en utilisant la nouvelle conception de matériaux

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

AppBarLayout avec un contenu superposé

  • "La conversion au format Dalvik a échoué avec l'erreur 1" après la mise à jour vers ADT 14
  • Comment obtenir AssetManager sans référence au contexte?
  • Perte de connexion avec la base de données Firebase après mise à jour vers un nouveau SDK
  • Définition de la mise en page. "Vous devez fournir un attribut layout_width."
  • Problèmes liés à l'utilisation de Rhino sur Android
  • Les dépendances de Gradle résolvent soudainement extrêmement lentement
  • J'aime Play Store:

    Tout comme sur Play Store

    Mon AppBarLayout avec CoordinatorLayout et NestedScrollView avec RelativeLayout comme 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!

  • Eclipse charge les données de 2.3 à 4.4 chaque fois que vous ouvrez un fichier xml
  • Comment utiliser le fichier de type d'entrée dans phonegap?
  • Pourquoi mon application démarre-t-elle incroyablement lente (10s +) au premier déploiement, affichant uniquement un écran blanc sur Android 5.0?
  • Quel est le meilleur protocole de communication client serveur à utiliser dans Android et iOS?
  • Comment obtenir les contacts de WhatsApps depuis Android?
  • Comment puis-je effacer les notifications à l'aide du shell ADB?
  • 4 Solutions collect form web for “Superposition de contenu au-dessus d'AppBarLayout en utilisant la nouvelle conception de matériaux”

    Ajoutez simplement quelque chose comme

     app:behavior_overlapTop="64dp" 

    À votre NestedScrollView et sera placé au-dessus de la barre d'outils étendue.

    De plus, vous devez ajouter quelque chose comme

     app:expandedTitleMarginBottom="70dp" 

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

    C'est plutôt simple, vraiment. Vous pouvez le faire en utilisant une combinaison de ToolBar , FrameLayout et votre vue de contenu (pourrait être un ListView comme votre premier exemple ou tout).

    L'idée est de faire en sorte que votre FrameLayout possède la même couleur que votre ToolBar , ce qui donne l'illusion de ToolBar étant beaucoup plus grand qu'il ne l'est. Ensuite, tout ce qu'il reste à faire est de faire de votre vue de contenu le dernier (ou dans l'API 21 et plus haut: posséder l'attribut d' elevation le plus élevé) afin qu'il apparaisse comme s'il flottait au-dessus de FrameLayout précité.

    Voir l'illustration ci-dessous:

    Entrez la description de l'image ici

    Maintenant que vous avez la grande idée, ci-dessous est un véritable extrait XML en direct pour ce faire. (J'utilise effectivement 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 plus élevée que celle de v_toolbar_extension . C'est ce qui vous donnera l'effet désiré de la barre d'outils "superposée".

    Last but not least, vous souhaitez ajouter cette ligne quelque part dans onCreate() votre activité:

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

    Ce que ces codes font est de régler votre élévation ToolBar à zéro; En supprimant les ombres prédéfinies qui ont été données par défaut dans ToolBars. Si vous ne faites pas cela, cette ombre créera une "couture" entre votre ToolBar et votre FrameLayout , brisant ainsi l'illusion de ces deux étant les mêmes.

    Ps , Il est également important de donner à votre contenu une forme de rembourrage de chaque côté. Dans ce cas, votre vue de contenu ne couvrira pas toute la largeur de l'écran (ce qui rendrait cet effet inutile).


    Remarque: Je vois quelques bonnes réponses ici qui ont mentionné l'absence de FrameLayout et plutôt que la FrameLayout d' FrameLayout plus grande. Bien que, en théorie, cela puisse fonctionner aussi bien que ma 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 forcé de rendre la Toolbar d' Toolbar statique ou de défiler complètement la Toolbar d' Toolbar (rend le déplacement un peu bizarre).

    Ajoutez à cela, le fait que vous ne pouvez pas facilement attribuer un dessin personnalisé dans une Toolbar . Par conséquent, il est difficile de suivre l'exemple Google Play que vous avez donné ci-dessus. Bien que si vous utilisez ma solution, tout ce que vous devriez faire est de rendre votre Toolbar transparente et d'assigner le Drawable à FrameLayout à la place.

    J'ai essayé de mettre en œuvre des effets comme vous l'avez mentionné, appelé Card Toolbar in Android , et cela a fonctionné comme prévu. Voici ma mise en page, jetez un 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é.

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

    Votre thème d'activité devrait étendre Theme.AppCompat.Light.NoActionBar. J'ai créé un fichier XML de mise en page comme suit:

     <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 être comme 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: Entrez la description de l'image ici

    coAndroid est un fan Android de Google, tout sur les téléphones Android, Android Wear, Android Dev et Android Games Apps.