web-dev-qa-db-fra.com

CollapsingToolbarLayout | Problèmes de défilement et d’agencement 2

Questions connexes

CollapsingToolbarLayout | Problèmes de défilement et d’agencement

Backgroud

Je veux utiliser 2 fragments différents qui me permettront de changer la mise en page en fonction de l'orientation et de la taille de l'écran

  1. Header Image (Actuellement, il s'agit d'une ImageView)
  2. Contenu à défilement 

Problèmes

  1. La CollapsingToolbarLayout ne me permet pas d’élargir la Toolbar pour voir le fullHeader Image

    • Il montre une majorité de l'image, mais pas tous. Top est coupé, mais le fond est visible.

  2. La Toolbar est définie sur Pin mais elle est masquée lors du défilement

    • Seul le Header Image devrait disparaître, mais tout mon Appbar est masqué. 

  3. Lorsque vous faites défiler pour afficher le Expanded Toolbar, une vue est vide jusqu'à ce que le Expanded Toolbar atteigne sa hauteur maximale.

    • Après que le Expanded Toolbar et le Toolbar soient devenus cachés

  4. Le Up Arrow n'apparaît pas dans la Toolbar

Code

Layout.xml

<Android.support.design.widget.CoordinatorLayout 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:fitsSystemWindows="true">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <Android.support.design.widget.CollapsingToolbarLayout
            Android:id="@+id/collapsing_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="16dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|enterAlways">

            <ImageView
                Android:id="@+id/header"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:background="@drawable/download"

                Android:scaleType="centerCrop" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/anim_toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"

                app:layout_collapseMode="pin" />

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

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

    <Android.support.v4.widget.NestedScrollView
        Android:layout_width="fill_parent"
        Android:layout_height="fill_parent"
        Android:layout_below="@+id/anim_toolbar"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <fragment
            Android:id="@+id/detail"
            Android:name="<package>.<fragment_name>"
            Android:layout_width="match_parent"
            Android:layout_height="match_parent" />

    </Android.support.v4.widget.NestedScrollView>

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

OnCreate

@Override
protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.test);

    final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
    setSupportActionBar(toolbar);

    CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
    collapsingToolbar.setTitle("Avengers: Age of Ultron");

}

1  2  3 

4  5  6 

androidxmlmaterial-designandroid-design-libraryandroid-collapsingtoolbarlayout
19
Christopher Rucinski

Question 1

Ajoutez Android:fitsSystemWindows="true" à votre AppBarLayout, CollapsingToolbarLayout et à votre ImageView.

J'imagine qu'une partie de votre image se trouve sous la barre d'état (ces lignes étant manquantes), c'est pourquoi vous ne pouvez pas voir le haut de l'image.

Question 2

collapseMode="pin" affecte uniquement la manière dont la barre d'outils réagit à la réduction (d'où son nom collapseMode et non scrollFlags).

Dans presque tous cas en utilisant CollapsingToolbarLayout, vous devriez utiliser scroll|exitUntilCollapsed pour votre scrollFlags - la barre d'outils réduite sera visible même lorsque vous faites défiler l'écran vers le bas.

Question 3

Ceci est dû à l'utilisation de scroll|enterAlways. Changez vos drapeaux selon le n ° 2

Question 4

Comme indiqué dans la réponse à votre question, vous devez appeler getSupportActionBar().setDisplayHomeAsUpEnabled(true); pour afficher le bouton Haut:

 @Override
 protected void onCreate(Bundle savedInstanceState) {

  super.onCreate(savedInstanceState);
  setContentView(R.layout.test);

  final Toolbar toolbar = (Toolbar) findViewById(R.id.anim_toolbar);
  setSupportActionBar(toolbar);
  getSupportActionBar().setDisplayHomeAsUpEnabled(true);

  CollapsingToolbarLayout collapsingToolbar =
      (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);
  collapsingToolbar.setTitle("Avengers: Age of Ultron");
}
32
ianhanniballake

Supprimer ces deux lignes de Imageview 

 Android:scaleType="centerCrop"
            Android:fitsSystemWindows="true"
0
paramatma sharan upadhyay

Supprimez app:contentScrim="?attr/colorPrimary" de votre schéma XML dans la balise CollapsingToolBarLayout. Il affichera le bouton de retour dans la barre d’outils

0
Anish Bhandari