22

Ich habe Probleme bei der Integration der Design Support Library in meine Anwendung. Aus irgendeinem Grund kollabiert die Symbolleiste mit der CollapsingToolbarLayout und lässt sie nicht wie im Cheesesquare-Beispiel von Chris Banes fixiert. https://github.com/chrisbanes/cheesesquare(Design-Support-Bibliothek) CollapsingToolbarLayout - Toolbar wird beim Minimieren nicht fixiert

Ich habe nichts anderes zu meinem Layout getan. Tatsächlich habe ich meine Stile durch seine ersetzt und in sein Layout eingefügt. Ich frage mich, ob die Verwendung von Toolbar anstelle von android.support.v7.widget.Toolbar dies verursacht.

Hier ist das Problem.

The Problem

Hier ist meine XML des AppBar Abschnitt.

<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> 
+1

Was ist Ihre Ansicht mit 'App: layout_behavior = "@ Zeichenfolge/appbar_scrolling_view_behavior"'? – ianhanniballake

+0

Wie hast du das GIF gemacht? –

Antwort

20

Ihre Intuition war richtig: CollapsingToolbarLayout auf Sie angewiesen ist die Unterstützung mit Toolbar -, dass die Mindesthöhe des CollapsingToolbarLayout (unter vielen anderen Dingen) zu setzen verwendet. Sie sollten zur Verwendung der Unterstützungsversion von Toolbar wechseln, um die beste Erfahrung mit CollapsingToolbarLayout zu gewährleisten.

13
<?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> 
+3

Unendlich vielen Dank – Campino

+0

Dies hat den Trick, vielen Dank! – Roman

+0

Muss dem FloatingActionButton Breite und Höhe hinzufügen. Der Rest ist perfekt :) – jobbert

3
  1. Verwenden app:layout_collapseMode="pin", um sicherzustellen, dass die Toolbar sich dem oberen Rand des Bildschirms, während die Ansicht kollabiert gepinnt bleibt.
  2. Noch besser ist, wenn Sie CollapsingToolbarLayout und Toolbar zusammen verwenden, wird der Titel automatisch größer erscheinen, wenn das Layout vollständig sichtbar ist, dann Übergang auf die Standardgröße als es kollabiert ist.
  3. Beachten Sie, dass in diesen Fällen Sie setTitle() auf der CollapsingToolbarLayout nennen sollte, anstatt sich auf die Toolbar selbst.

    Für weitere Informationen über die Umsetzung Besuch Android Developers
    Blog
    oder Informationen über Paket CollapsingToolbarLayout

Verwandte Themen