Android Support Design CollapsingToolbarLayout 사용하기[3]

Android Support Design CollapsingToolbarLayout 사용하기[3]  안녕하세요. 이번 포스트에서는 CollapsingToolbarLayout 사용에 대해서 포스트를 해보려 합니다. 이 View 는 Toolbar 를 애니메이션을 통해 확장 시켜주는 View 입니다. 아래 스크린샷을 통해서 동작을 확인해 보시면 될것 같습니다. 실제로 구현해서 애니메이션 보면 더 좋을것 같구요 ^^ 아래와 같이 첫번째 화면이 처음 화면 입니다. 스크롤을 하면 글씨가 작아 지고 이동을해서 툴바 타이틀 영역으로 이동 합니다. 이동하면서 FloatingActionButton 로 애니메이션을 통해서 사라지게 됩니다.   사용준비 CollapsingToolbarLayout 을 사용하기 위해서는 마찬가지로 design 라이브러리를 추가합니다. 1 2 3 4 5 dependencies {     compile fileTree(dir: 'libs', include: ['*.jar'])     compile 'com.android.support:appcompat-v7:22.2.1'     compile 'com.android.support:design:22.2.1' } Colored by Color Scripter cs 사용방법 android.support.design.widget.CoordinatorLayout 레이아웃이 Base 레이아웃 인것 같습니다. android.support.design.widget.CoordinatorLayout android.support.design.widget.AppBarLayout android.support.design.widget.CollapsingToolbarLayout android.support.v7.widget.Toolbar 위와 같은 계층을 잘 지켜서 사용 해야 될것 같습니다. 또한 기본 ScrollView 가 아닌 android.support.v4.widget.NestedScrollView 를 사용해야 CoordinatorLayout 랑 연동이 되는 것 같습니다. 기본 ScrollView 로 테스트 해보니 동작 하지 않습니다. android.support.design.widget.FloatingActionButton 도 사용 되고 있네요 . CoordinatorLayout 을 사용하기 위해서는 xml 코드가 핵심 입니다. java 코드로 동작하는것은 거의 없는듯 합니다 . java 코드로는 툴바 타이틀을 지정해주는 정도 인것 같습니다. 아래 코드를 보시고 하나하나 추가하면서 어떻게 동작 하는지 확인해 보면 도움 될것 같습니다. 1. xml 코드 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 <?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:id="@+id/root"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:fitsSystemWindows="true">       <android.support.design.widget.AppBarLayout         android:id="@+id/app_bar"         android:layout_width="match_parent"         android:layout_height="192dp"         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"             android:fitsSystemWindows="true"             app:layout_scrollFlags="scroll|exitUntilCollapsed"             app:contentScrim="?attr/colorPrimary">               <ImageView android:layout_width="match_parent"                 android:layout_height="match_parent"                 android:src="@drawable/bg_material"                 android:scaleType="centerCrop"                 android:fitsSystemWindows="true"                 app:layout_collapseMode="parallax"/>               <android.support.v7.widget.Toolbar                 android:id="@+id/toolbar"                 android:layout_width="match_parent"                 android:layout_height="?attr/actionBarSize"                 app:layout_collapseMode="pin" />           </android.support.design.widget.CollapsingToolbarLayout>       </android.support.design.widget.AppBarLayout>       <android.support.v4.widget.NestedScrollView         android:layout_width="match_parent"         android:layout_height="match_parent"         app:layout_behavior="@string/appbar_scrolling_view_behavior">           <LinearLayout             android:layout_width="match_parent"             android:layout_height="match_parent"             android:paddingTop="36dp"             android:paddingLeft="16dp"             android:paddingRight="16dp"             android:paddingBottom="16dp"             android:orientation="vertical">               <TextView                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:text="@string/lorem_ipsum" />               <TextView                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginTop="16dp"                 android:text="@string/lorem_ipsum" />               <TextView                 android:layout_width="match_parent"                 android:layout_height="wrap_content"                 android:layout_marginTop="16dp"                 android:text="@string/lorem_ipsum" />           </LinearLayout>       </android.support.v4.widget.NestedScrollView>       <android.support.design.widget.FloatingActionButton         android:id="@+id/fab"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:src="@drawable/ic_check_white_24dp"         android:layout_margin="16dp"         android:theme="@style/FabTheme"         app:layout_anchor="@+id/app_bar"         app:layout_anchorGravity="bottom|right|end"         />   </android.support.design.widget.CoordinatorLayout> cs   2. 액티비티 코드   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 public class MainActivity extends AppCompatActivity {         @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);           initLayout();     }       /**      * 레이아웃 초기화      */     private void initLayout(){           Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);         setSupportActionBar(toolbar);           CollapsingToolbarLayout ctl = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar);         ctl.setTitle("Details");     }   } Colored by Color Scripter cs 부연설명 이 레이아웃이 xml 코드만으로 동작 하다보니 어느정도의 약속이 있는듯 합니다.  1. FloatingActionButton 1 2 app:layout_anchor="@+id/app_bar" app:layout_anchorGravity="bottom|right|end" cs 위 속성을 제거 하니 FloatingActionButton 사라지는 동작이 연동이 되지 않습니다. 2.NestedScrollView 1 app:layout_behavior="@string/appbar_scrolling_view_behavior" cs 위 속성이 있어야 정상 동작합니다. 3. 계층 주의  xml 코드로만 작성 되다보니 약속된 속성들이 많은 것 같습니다. 저또한 좀더 살펴봐야 될것 같습니다.  계층 주의 해서 사용 해야겠네요.