web-dev-qa-db-fra.com

(Bibliothèque de support de conception) CollapsingToolbarLayout - La barre d'outils n'est pas épinglée lors de l'effondrement

J'ai du mal à intégrer la bibliothèque de support de conception dans mon application. Pour une raison quelconque, la barre d'outils s'effondre avec CollapsingToolbarLayout et ne la laisse pas épinglée comme dans l'exemple Cheesesquare de Chris Banes. https://github.com/chrisbanes/cheesesquare

Je n'ai rien fait de différent dans ma mise en page. En fait, j'ai remplacé mes styles par les siens et j'ai abandonné sa mise en page. Je me demande si l'utilisation de la barre d'outils au lieu d'Android.support.v7.widget.Toolbar est à l'origine de cela.

Voici le problème.

The Problem

Voici mon XML de la section AppBar.

<Android.support.design.widget.CoordinatorLayout
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/main_content"
    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="@dimen/detail_backdrop_height"
        Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        Android:fitsSystemWindows="true">

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

            <ImageView
                Android:id="@+id/backdrop"
                Android:layout_width="match_parent"
                Android:layout_height="match_parent"
                Android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

    ...

</Android.support.design.widget.CoordinatorLayout>
androidandroid-support-libraryandroid-toolbarandroiddesignsupportandroid-collapsingtoolbarlayout
23
aindurti

Votre intuition était correcte: CollapsingToolbarLayout dépend de vous en utilisant le support Toolbar - il l'utilise pour définir la hauteur minimale du CollapsingToolbarLayout (parmi beaucoup d'autres choses). Vous devez passer à l'utilisation de la version de prise en charge de Toolbar pour garantir la meilleure expérience avec CollapsingToolbarLayout.

21
ianhanniballake
<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context=".UserDetail" >

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/app_bar_layout"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:fitsSystemWindows="true"
        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="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp" >

            <ImageView
                Android:id="@+id/imageView_list"
                Android:layout_width="match_parent"
                Android:layout_height="275dp"
                app:layout_collapseMode="parallax"
                Android:fitsSystemWindows="true"
                Android:scaleType="fitXY"
                Android:src="@drawable/default_profile" />

            <Android.support.v7.widget.Toolbar
                Android:id="@+id/toolbar"
                Android:layout_width="match_parent"
                Android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"               
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />


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

    <Android.support.v4.widget.NestedScrollView
        Android:id="@+id/scroll"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        Android:clipToPadding="false" >

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



            <TableLayout
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_gravity="center_horizontal"
                Android:layout_margin="15dp"
                Android:shrinkColumns="1"
                Android:stretchColumns="*" >

                <TableRow
                    Android:id="@+id/tableRow1"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="5dp" >
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow2"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/CurrentAddress"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Current Address:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_CurrentAddress"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:inputType="textMultiLine"
                        Android:text="Current Address"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow3"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/PermanentAddress"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Permanent Address:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_PermanentAddress"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:inputType="textMultiLine"
                        Android:text="Permanent Address"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow4"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/Email"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Email:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_Email"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Email Address"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow5"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/PhoneNumber"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Phone Number:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_PhoneNumber"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Phone Number"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow6"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/BirthDate"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Date of Birth:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_BirthDate"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="BirthDate"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow7"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/Gender"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Gender:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_Gender"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Gender"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow8"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/Education"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Education:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_Education"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Education"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow9"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/Qualification"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Qualification:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_Qualification"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="Qualification"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow10"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/BloodGroup"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="BloodGroup:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_BloodGroup"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="BloodGroup"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>

                <TableRow
                    Android:id="@+id/tableRow11"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_marginTop="10dp" >

                    <TextView
                        Android:id="@+id/MaritalStatus"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="MaritalStatus:"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="bold" />

                    <TextView
                        Android:id="@+id/txt_MaritalStatus"
                        Android:layout_width="wrap_content"
                        Android:layout_height="wrap_content"
                        Android:text="MaritalStatus"
                        Android:textColor="#000000"
                        Android:textSize="15sp"
                        Android:textStyle="normal" />
                </TableRow>
            </TableLayout>

          <!--   <Button
                Android:id="@+id/addContact"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:text="Add To Contact"
                Android:textStyle="bold"
                Android:visibility="invisible" /> -->
        </LinearLayout>
    </Android.support.v4.widget.NestedScrollView>

   <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_margin="16dp"
        app:layout_anchor="@id/app_bar_layout"
        app:layout_anchorGravity="bottom|right|end"
        Android:clickable="true"
        Android:src="@drawable/addtocontact"
        style="@style/FabStyle"
        />

</Android.support.design.widget.CoordinatorLayout>
14
Bhavinkumar Patel
  1. Utilisez app:layout_collapseMode="pin" Pour vous assurer que la barre d'outils elle-même reste épinglée en haut de l'écran pendant que la vue s'effondre.
  2. Encore mieux, lorsque vous utilisez CollapsingToolbarLayout et la barre d'outils ensemble, le titre apparaîtra automatiquement plus grand lorsque la mise en page est entièrement visible, puis passera à sa taille par défaut lors de sa réduction.

  3. Notez que dans ces cas, vous devez appeler setTitle() sur le CollapsingToolbarLayout, plutôt que sur la barre d'outils elle-même.

    Pour plus de détails sur la mise en œuvre, visitez Développeurs Android
    Blog     ou détails sur le package CollapsingToolbarLayout

3
Keyur Lakhani