Whatsapp 프로필보기 구현

Question

Whatsapp에서 누군가 프로필을 볼 때 화면이 2 개의 섹션으로 나뉩니다. 실제 사진과 아래의 옵션. 그림을 아래로 당길 때 화면의 3/4 정도를 채우기 위해 아래로 미끄러 져 나오지 만 그림을 위로 밀어 넣으면 그림이 표시되는 부분이 ActionBar로 사라지고 옵션이 화면을 채 웁니다 (무슨 VerticleScrollView 것). 내 질문은, 당신은 어떻게 그 기능을 구현합니까? 어떤 구성 요소의 조합이 사용되고 있으며 어떻게 사용됩니까?

Answer 1

CollapsingToolbarLayout을 사용할 수 있습니다. 예 XML 구조와 같은 :

<?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" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:fitsSystemWindows="true"> 

<android.support.design.widget.AppBarLayout 
    android:id="@+id/profileactivity_appbar" 
    android:layout_width="match_parent" 
    android:layout_height="400dp" 
    android:fitsSystemWindows="true" 
    android:theme="@style/AppTheme3.AppBarOverlay"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/profileactivity_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/profileactivity_fullimage" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:scaleType="centerCrop" 
      android:fitsSystemWindows="true" 
      app:layout_collapseMode="parallax" 
      app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed" /> 

     <android.support.v7.widget.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>