wake-up-neo.net

CollapsingToolbarLayout | Probleme beim Blättern und Layout 2

Verwandte Fragen

CollapsingToolbarLayout | Bildlauf- und Layoutprobleme

Backgroud

Ich möchte zwei verschiedene Fragmente verwenden, die es mir ermöglichen, das Layout basierend auf Ausrichtung und Bildschirmgröße zu ändern

  1. Header Image (Derzeit nur eine ImageView)
  2. Scrollbarer Inhalt 

Probleme

  1. Die CollapsingToolbarLayout erlaubt mir nicht, die Toolbar zu erweitern, um fullHeader Image zu sehen.

    • Es zeigt einen Großteil des Bildes, aber nicht alle. Top ist geschnitten, aber der Boden ist sichtbar.

  2. Die Toolbar ist auf Pin gesetzt, wird aber beim Scrollen ausgeblendet

    • Nur der Header Image sollte verschwinden, stattdessen wird meine gesamte Appbar ausgeblendet 

  3. Beim Scrollen zur Anzeige des Expanded Toolbar gibt es eine leere Ansicht, bis der Expanded Toolbar seine maximale Höhe erreicht.

    • Nachdem sowohl der Expanded Toolbar als auch die Toolbar selbst verborgen sind

  4. Der Up Arrow erscheint nicht in der 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

Frage 1

Fügen Sie Android:fitsSystemWindows="true" zu Ihrer AppBarLayout, CollapsingToolbarLayout und zu Ihrer ImageView hinzu.

Ich vermute, ein Teil Ihres Bildes befindet sich unterhalb der Statusleiste (weil diese Zeilen fehlen), weshalb Sie den oberen Rand des Bildes nicht sehen können.

Frage 2

collapseMode="pin" wirkt sich nur darauf aus, wie die Symbolleiste auf das Zusammenfallen reagiert (weshalb sie collapseMode und nicht scrollFlags heißt).

In fast all / Fällen, wenn Sie CollapsingToolbarLayout verwenden, sollten Sie scroll|exitUntilCollapsed für Ihre scrollFlags verwenden. Dadurch bleibt die ausgeblendete Symbolleiste auch beim Scrollen nach unten sichtbar.

Frage 3

Dies liegt an der Verwendung von scroll|enterAlways. Ändern Sie Ihre Flaggen gemäß Punkt 2

Frage 4

Wie in der Antwort auf Ihre verwandte Frage erwähnt, müssen Sie getSupportActionBar().setDisplayHomeAsUpEnabled(true); aufrufen, um die Aufwärts-Schaltfläche anzuzeigen:

 @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

Entfernen Sie diese beiden Linien aus Imageview 

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

Entfernen Sie app:contentScrim="?attr/colorPrimary" aus Ihrem Layout-XML im CollapsingToolBarLayout-Tag. Es wird die Zurück-Schaltfläche in der Symbolleiste angezeigt

0
Anish Bhandari