(Design Support Library) CollapsingToolbarLayout - La barra degli strumenti non viene bloccata sul crollo

Question

Non riesco a integrare la Libreria del supporto di progettazione nella mia applicazione. Per qualche motivo, la barra degli strumenti crolla con il CollapsingToolbarLayout e non la lascia bloccata come nell'esempio Cheesesquare di Chris Banes. https://github.com/chrisbanes/cheesesquare

Non ho fatto nulla di diverso per il mio layout. In effetti, ho sostituito i miei stili con i suoi e sono caduto nel suo layout. Mi chiedo se usare Toolbar, invece di android.support.v7.widget.Toolbar sta causando questo.

Ecco il problema.

Ecco il mio XML della sezione 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> 

Answer 1

La tua intuizione era corretta: CollapsingToolbarLayout fa affidamento su di voi utilizzando il supporto Toolbar - si utilizza per impostare l'altezza minima del CollapsingToolbarLayout (tra molte altre cose). È necessario passare all'utilizzo della versione di supporto di Toolbar per garantire la migliore esperienza con CollapsingToolbarLayout.

Answer 2

<?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> 

Answer 3

1. Usa app:layout_collapseMode="pin" per garantire che la barra stesso rimane bloccato alla parte superiore dello schermo mentre la vista collassi.
2. Ancora meglio, quando si utilizza CollapsingToolbarLayout e Toolbar insieme, il titolo apparirà automaticamente più grande quando il layout è completamente visibile, poi passare alla sua dimensione di default come è compressa.

3. Si noti che in questi casi, si dovrebbe chiamare setTitle() sul CollapsingToolbarLayout, piuttosto che sulla barra degli strumenti stesso.

   Per ulteriori dettagli sulla realizzazione visita Android Developers
   Blog o dettagli circa il pacchetto CollapsingToolbarLayout