如何实现这一布局采用折叠式工具

Question

https://i.stack.imgur.com/j1sPI.png

Please see the link for layout

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 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.CoordinatorLayout 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/recycler" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:padding="20dp" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbar" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:contentScrim="#80000000" 
      android:fitsSystemWindows="true" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <RelativeLayout 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       app:layout_collapseMode="pin"> 

       <ImageView 
        android:id="@+id/user_profile_empty" 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/secondaryPhotoWidth" 
        android:scaleType="centerCrop" 
        android:visibility="gone" /> 

       <android.support.v4.view.ViewPager 
        android:id="@+id/photo_pager" 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/secondaryPhotoWidth" /> 

       <com.ogaclejapan.smarttablayout.SmartTabLayout xmlns:android="http://schemas.android.com/apk/res/android" 
        xmlns:app="http://schemas.android.com/apk/res-auto" 
        android:id="@+id/viewpagertab" 
        android:layout_width="wrap_content" 
        android:layout_height="@dimen/Profile.List.Item.Edit.Margin.Left" 
        android:layout_alignBottom="@+id/photo_pager" 
        android:layout_alignRight="@+id/photo_pager" 
        android:layout_gravity="bottom" 
        android:layout_marginBottom="@dimen/Profile.List.Item.Edit.Margin.Left" 
        android:layout_marginRight="@dimen/Profile.List.Item.Edit.Margin.Left" 
        android:layout_marginTop="@dimen/Profile.List.Item.Edit.Margin.Left" 
        app:stl_customTabTextLayoutId="@layout/custom_tab_circle" 
        app:stl_dividerColor="@color/transparent" 
        app:stl_dividerThickness="0dp" 
        app:stl_indicatorColor="@color/Sapio.RED" 
        app:stl_indicatorCornerRadius="@dimen/Profile.List.Item.Edit.Margin.Left" 
        app:stl_indicatorInterpolation="linear" 
        app:stl_indicatorThickness="@dimen/Profile.List.Item.Edit.Margin.Left" 
        app:stl_underlineColor="@color/transparent" 
        app:stl_underlineThickness="0dp" /> 

      </RelativeLayout> 

       <!--<android.support.v7.widget.Toolbar--> 
        <!--android:id="@+id/MyToolbar"--> 
        <!--android:layout_width="match_parent"--> 
        <!--android:layout_height="80dp"--> 
        <!--app:layout_collapseMode="parallax"/>--> 

       <RelativeLayout 
        android:id="@+id/likeIgnore_name_view" 
        android:layout_width="match_parent" 
        android:layout_height="@dimen/secondaryPhotoWidth"> 

       <LinearLayout 
        android:id="@+id/like_ignor_view_upper" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentRight="true" 
        android:layout_alignParentBottom="true" 
        android:layout_marginBottom="20dp" 
        android:layout_marginRight="15dp" 
        android:orientation="horizontal"> 

        <ImageView 
         android:id="@+id/skip_button" 
         android:layout_width="45dp" 
         android:layout_height="45dp" 
         android:src="@drawable/close" /> 

        <ImageView 
         android:id="@+id/superLikeImage" 
         android:layout_width="45dp" 
         android:layout_height="45dp" 
         android:layout_marginLeft="@dimen/Default.PaddingMargin.Small" 
         android:src="@drawable/super_like" /> 

        <ImageView 
         android:id="@+id/like_button" 
         android:layout_width="45dp" 
         android:layout_height="45dp" 
         android:layout_marginLeft="@dimen/Default.PaddingMargin.Small" 
         android:src="@drawable/heart" /> 

       </LinearLayout> 

       <LinearLayout 
        android:id="@+id/nameView" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_alignParentLeft="true" 
        android:layout_alignParentBottom="true" 
        android:layout_marginBottom="20dp" 
        android:layout_marginLeft="25dp" 
        android:orientation="horizontal"> 

        <LinearLayout 
         android:id="@+id/nameView_margin" 
         android:layout_width="80dp" 
         android:layout_height="wrap_content" 
         android:orientation="horizontal" 
         android:visibility="visible" /> 

        <LinearLayout 
         android:layout_width="wrap_content" 
         android:layout_height="wrap_content" 
         android:orientation="vertical"> 

         <TextView 
          android:id="@+id/name" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_gravity="center" 
          android:paddingLeft="@dimen/abc_action_bar_subtitle_bottom_margin_material" 
          android:paddingRight="@dimen/abc_action_bar_subtitle_bottom_margin_material" 
          android:layout_weight="1" 
          android:gravity="center" 
          android:singleLine="true" 
          android:text="abc,31" 
          android:textColor="@color/Header.Text" 
          android:textSize="@dimen/Registration.Button.TextSize" 
          android:textStyle="bold" /> 

         <TextView 
          android:id="@+id/distance" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_gravity="center" 
          android:paddingLeft="@dimen/abc_action_bar_subtitle_bottom_margin_material" 
          android:paddingRight="@dimen/abc_action_bar_subtitle_bottom_margin_material" 
          android:layout_weight="1" 
          android:gravity="center" 
          android:singleLine="true" 
          android:text="abc,31" 
          android:textColor="@color/Header.Text" 
          android:textSize="@dimen/Registration.Button.TextSize" /> 


        </LinearLayout> 


       </LinearLayout> 

       <Button 
        android:id="@+id/refine_matches_view" 
        style="@style/TextAppearanceThin" 
        android:layout_width="wrap_content" 
        android:layout_height="30dp" 
        android:layout_alignParentLeft="true" 
        android:layout_gravity="center_vertical" 
        android:layout_marginLeft="15dp" 
        android:layout_marginTop="20dp" 
        android:background="@drawable/filter_shape" 
        android:gravity="center" 
        android:minHeight="0dp" 
        android:text="@string/filter" 
        android:textAllCaps="false" 
        android:textColor="@android:color/white" 
        android:textSize="@dimen/LoginScreen.Button.TextSize" 
        android:visibility="visible" /> 

       <ImageButton 
        android:id="@+id/more_button" 
        android:layout_width="wrap_content" 
        android:layout_height="30dp" 
        android:layout_alignParentRight="true" 
        android:layout_marginRight="15dp" 
        android:layout_marginTop="20dp" 
        android:background="@drawable/ic_more_vert_white_36dp" 
        android:gravity="center" 
        android:minHeight="0dp" 
        android:src="@drawable/filter_shape" 
        android:visibility="visible" /> 

      </RelativeLayout> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/MyToolbar" 
       android:layout_width="match_parent" 
       android:layout_height="80dp" 
       app:layout_collapseMode="parallax"/> 

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

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

    <ImageView 
     android:id="@+id/user_photo" 
     android:layout_width="80dp" 
     android:layout_height="80dp" 

     android:layout_marginLeft="15dp" 
     android:gravity="center_vertical" 
     android:scaleType="fitCenter" 
     android:src="@drawable/match_bg" 
     android:visibility="visible" 
     app:elevation="10dp" 
     app:layout_anchor="@id/nameView" 
     app:layout_anchorGravity="bottom"/> 


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

<include 
    android:id="@+id/empty_profile_view" 
    layout="@layout/section_empty_list" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" /> 

</RelativeLayout> 

请帮我实现上述类型从layout.As我试图如上和滚动的图像视图时，走在里面的工具栏和一半的图像视图不可见。

Answer 1

其实appbar已经有了高度，这就是为什么它使所有的视图进入其本身。

所以，只需要将app：elevation =“0dp”赋给appbar布局即可。它让所有其他观点自由地保持自身。

Answer 2

你可以关注此链接。
http://www.journaldev.com/13927/android-collapsingtoolbarlayout-example

<?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="com.journaldev.collapsingtoolbarlayout.ScrollingActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/app_bar_height" 
     android:fitsSystemWindows="true" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/toolbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 


      <ImageView 
       android:id="@+id/expandedImage" 
       android:layout_width="match_parent" 
       android:layout_height="200dp" 
       android:scaleType="centerCrop" 
       android:src="@drawable/photo" 
       app:layout_collapseMode="parallax" 
       app:layout_collapseParallaxMultiplier="0.7" /> 

      <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/AppTheme.PopupOverlay" /> 

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

    <include layout="@layout/content_scrolling" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/fab_margin" 
     app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|end" 
     app:srcCompat="@android:drawable/ic_dialog_info" /> 

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

希望你会从它helpe。