Android 접 이식 Toolbar 사용 완전 분석(Collapsing Toolbar Layout)

간단 한 소개
다양한 응용 프로그램 에서 이러한 효 과 를 자주 볼 수 있 습 니 다.Toolbar 는 투명 하고 배경 그림 과 큰 제목 이 있 습 니 다.페이지 가 위로 미 끄 러 지면 서 제목 은 Toolbar 에 점점 축소 되 었 고 배경 그림 은 어느 정도 미 끄 러 진 후에 Toolbar 의 색 으로 변 했 습 니 다.이런 효 과 는 바로 접 이식 효과 입 니 다.사실 이러한 효 과 는 GitHub 에서 이미 많은 오픈 소스 라 이브 러 리 가 구현 되 었 지만 Google 은 디자인 라 이브 러 리 라 이브 러 리 에서 도 이러한 컨트롤 을 제공 하여 이러한 효 과 를 편리 하 게 실현 할 수 있 게 해 주 었 습 니 다.이 컨트롤 은 Collapsing ToolbarLayout 입 니 다.증강 형 FrameLayout 입 니 다.그렇다면 이 글 은 이 컨트롤 의 사용 방법 과 주의사항 을 상세히 소개 한다.
효과.
본 고 는 하나의 데모 와 결합 하여 시연 을 한다.다음은 최종 적 인 디 스 플레이 효과,즉 접 이식 Toolbar 의 효과 이다.

끌어들이다
이 컨트롤 을 사용 하려 면 Android Design Library 라 이브 러 리 라 이브 러 리 라 이브 러 리 를 도입 해 야 합 니 다.또한,이 컨트롤 에 적응 하기 위해 서 는 app 의 테 마 를 수정 해 야 합 니 다.따라서 app copat 라 이브 러 리 도 필요 합 니 다.build.gradle 파일 에 다음 과 같이 도입 해 야 합 니 다.

dependencies {
 compile 'com.android.support:cardview-v7:24.1.0' //cardview
 compile 'com.android.support:design:24.1.0'
 compile 'com.android.support:appcompat-v7:24.1.0'
}

본 논문 의 내용 은 모두 공식 문 서 를 바탕 으로 관심 이 있 는 독 자 는 공식 문서 에 가서 더 볼 수 있다(자체 사다리 준비).
지식 비축
이어서 필 자 는 이 컨트롤 의 용법 을 한 걸음 한 걸음 소개 했다.우선,이 컨트롤 의 상용 xml 속성 을 알 아 보 겠 습 니 다.
1.상용 xml 속성 소개
1)contentScrim:Toolbar 가 어느 정도 수축 되 었 을 때 보 여 주 는 주체 색 입 니 다.툴 바 색상 입 니 다.
2)title:title Enable 이 true 로 설정 되 었 을 때 toolbar 가 펼 쳐 졌 을 때 큰 제목 을 표시 하고 toolbar 가 수축 되 었 을 때 toolbar 위의 작은 제목 으로 표 시 됩 니 다.
3)scrimAnimation Duration:이 속성 은 toolbar 가 수축 할 때 색상 이 변 하 는 애니메이션 의 지속 시간 을 제어 합 니 다.즉,색상 이 contentScrim 에서 지정 한 색상 으로 변 하 는 애니메이션 에 필요 한 시간 입 니 다.
4)expanded Title Gravity:toolbar 가 펼 쳐 질 때 title 이 있 는 위 치 를 지정 합 니 다.이와 유사 한 것 은 expanded TitleMargin,collapsed Title Gravity 등 속성 도 있다.
5)collapsed TitleTextAppearance:toolbar 가 수축 할 때 제목 글꼴 의 스타일 을 지정 합 니 다.유사 한 것 은 expanded TitleTextAppearance 도 있 습 니 다.
2.흔히 볼 수 있 는 표지 위치
일반 개발 에서 Collapsing Toolbar Layout 는 레이아웃 파일 에 따로 나타 나 지 않 고 다른 컨트롤 인 Coordinator Layout 의 하위 요소 로 나타 납 니 다.그러면 Coordinator Layout 는 무엇 입 니까?사실 Coordinator Layout 라 는 컨트롤 은 매우 강하 고 하위 요소 에 대해 다양한 기능 을 실현 할 수 있 습 니 다.흔히 볼 수 있 는 용법 은 바로 하위 요소 A 에 layot 를 설정 하 는 것 입 니 다.scrollFlags 의 속성 을 설정 하고 다른 하위 요소 B 에 layot 를 설정 합 니 다.behavior=”@string/appbar_scrolling_view_behavior'의 속성 입 니 다.이 하위 요소 B 는 보통 미 끄 러 질 수 있 는 컨트롤 입 니 다.예 를 들 어 RecyclerView,Nested ScrollView 등 이 있 습 니 다.그러면 하위 요소 B 가 미 끄 러 질 때 하위 요소 A 는 layout 에 따라scrollFlags 의 속성 값 이 다 르 기 때문에 Collapsing ToolbarLayout 에 layot 를 설정 해 야 합 니 다.scrollFlags 속성 입 니 다.
layout_scrollFlags
layotscrollFlags 는 몇 가지 속성 을 선택 할 수 있 습 니까?
*scroll:미 끄 러 지 려 는 모든 컨트롤 은 이 플래그 위 치 를 설정 해 야 합 니 다.이 플래그 위 치 를 설정 하지 않 으 면 View 는 고정 되 지 않 습 니 다.
*enterAlways:이 플래그 위 치 를 설정 한 후 View 가 화면 에서 미 끄 러 지면 손가락 이 아래로 내 려 가면 View 가 바로 나타 납 니 다.이것 은 다른 사용 장면 입 니 다.
*enterAlways Collapsed:minHeight 를 설정 하고 이 플래그 위 치 를 설정 하면 view 는 최소 고도 로 화면 을 진행 합 니 다.미끄럼 컨트롤 이 상단 까지 미 끄 러 질 때 만 완전한 높이 로 확 대 됩 니 다.
*exit Until Collapsed:위로 미 끄 러 질 때 현재 View 를 축소 합 니 다.하지만 view 는 상단 에 고정 시 킬 수 있 습 니 다.
직접 언어 로 묘사 하 는 것 은 너무 추상 적 일 수 있 습 니 다.다음은 실제 효과 로 이 몇 개의 표지 위치의 구체 적 인 역할 을 보 여 드 리 겠 습 니 다.
layout_collapseMode
위 에서 언급 한 Collapsing ToolbarLayout 는 FrameLayout 로 내부 에 여러 개의 키 요소 가 있 고 서브 요소 도 서로 다른 표현 을 할 수 있다.예 를 들 어 위의 GIF 그림 에서 toolbar 는 크기 조정 후 상단 에 고정 되 어 있 고 imageview 는 레이아웃 이 구 르 면서 구 르 며 상대 적 으로 구 르 는 과정 이 존재 합 니 다.그래서 이 하위 요 소 는 layot 를 추가 할 수 있 습 니 다.collapse Mode 표지 위 치 는 서로 다른 행동 을 한다.사실 여기 도 두 가지 표지 만 있 는데 각각:
*pin:이 플래그 가 있 는 View 는 페이지 를 스크롤 하 는 과정 에서 상단 에 머 물 러 있 습 니 다.예 를 들 어 Toolbar 는 상단 에 고정 할 수 있 습 니 다.
*parallax:이 플래그 가 있 는 View 는 페이지 와 동시에 스크롤 할 수 있 음 을 표시 합 니 다.이 표지 의 위치 와 연 결 된 속성 은:layot 입 니 다.collapseParallax Multiplier,이 속성 은 시차 인자 로 이 View 와 페이지 의 스크롤 속도 에 차이 가 있 음 을 나타 내 며 상대 적 으로 스크롤 효 과 를 가 져 옵 니 다.
3.자주 사용 하 는 등급 관계
위 에서 말 했 듯 이 Collapsing ToolbarLayout 는 일반적으로 Coordinator Layout 의 하위 요소 로 나타 나 는데 사실은 위의 효 과 를 실현 하려 면 또 다른 컨트롤 이 필요 합 니 다.AppBarLayout.이 컨트롤 도 Design 라 이브 러 리 의 컨트롤 로 모든 하위 요 소 를 AppBar 로 사용 하 는 역할 을 합 니 다.일반적으로 접 이식 Toolbar 를 실현 하려 면 다음 과 같은 등급 관 계 를 사용 할 수 있다.

<android.support.design.widget.CoordinatorLayout...>
 <android.support.design.widget.AppBarLayout...>
  <android.support.design.widget.CollapsingToolbarLayout...>
   <!-- your collapsed view -->
   <View.../>
   <android.support.v7.widget.Toolbar.../>
  </android.support.design.widget.CollapsingToolbarLayout>
 </android.support.design.widget.AppBarLayout>

 <!-- Scroll view -->
 <android.support.v7.widget.RecyclerView.../>
</android.support.design.widget.CoordinatorLayout>

위의 등급 관 계 를 보면 가장 바깥쪽 의 한 층 은 Coordinator Layout 이다.그것 은 두 개의 키 요소 가 있 는데 그것 이 바로 AppBarLayout 와 RecyclerView(미 끄 러 질 수 있 는 컨트롤)이 고 AppBarLayout 는 Collapsing Toolbar Layout,Collapsing Toolbar Layout 의 하위 요 소 는 각각 접 힌 View(그림 일 수도 있 고 레이아웃 일 수도 있 음)와 우리 의 Toolbar 이다.
예 ①
이상 의 지식 비축 이 있 으 면 우 리 는 코드 를 쓰기 시작 할 수 있 습 니 다.우리 의 목 표 는 위의 gif 그림 의 효 과 를 실현 하 는 것 입 니 다.
1、activitymain.xml 파일 에서(주:아래 설명 은 설명 하기 편 하도록):

<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.support.design.widget.AppBarLayout
  android:layout_width="match_parent"
  android:layout_height="200dp"
  android:fitsSystemWindows="true">

  <android.support.design.widget.CollapsingToolbarLayout
   android:id="@+id/collapsing_toolbar_layout"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   app:contentScrim="?attr/colorPrimary"  <!--toolbar         -->
   app:expandedTitleMarginEnd="10dp"   <!--      Margin -->
   app:expandedTitleMarginStart="10dp"
   app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title" <!--      -->
   app:layout_scrollFlags="scroll|exitUntilCollapsed">   


   <ImageView
    android:id="@+id/iv"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scaleType="centerCrop"
    app:layout_collapseMode="parallax"    <!--  imageView              -->
    app:layout_collapseParallaxMultiplier="0.5"/> <!--     -->

   <android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    app:layout_collapseMode="pin" />  <!--toolbar         -->
  </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"> <!--       Behavior,                -->

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

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

  </LinearLayout>
 </android.support.v4.widget.NestedScrollView>
</android.support.design.widget.CoordinatorLayout>

연 관 된 item카드.xml 레이아웃 파일:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
 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="100dp"
 android:layout_margin="5dp"
 app:cardElevation="5dp"
 app:contentPaddingTop="2dp"
 app:contentPaddingBottom="2dp">

 <TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="Learn and Share Android"
  android:textSize="20sp"
  android:layout_gravity="center"/>

</android.support.v7.widget.CardView>

2.MainActivity.java 파일 에서 처리 하기:

 private ImageView iv;
 private CollapsingToolbarLayout collapsingToolbarLayout;
 private Toolbar toolbar;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsing_toolbar_layout);
  iv = (ImageView) findViewById(R.id.iv);
  toolbar = (Toolbar) findViewById(R.id.toolbar);

  setSupportActionBar(toolbar);
  toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
  collapsingToolbarLayout.setTitle("DesignLibrarySample");
  collapsingToolbarLayout.setCollapsedTitleTextColor(Color.WHITE);
  collapsingToolbarLayout.setExpandedTitleColor(Color.WHITE);
  iv.setImageResource(R.mipmap.ic_bg);
 }

위 에 서 는 collapsingToolbarLayout 에 제목 과 줄 일 때 제목 의 색상,펼 칠 때 제목 의 색상 등 을 설정 합 니 다.위의 간단 한 예 를 통 해 위 gif 그림 에 표 시 된 접 이식 Toolbar 의 효 과 를 실현 할 수 있 습 니 다.
여기 서 먼저 요약 합 니 다:Coordinator Layout 가 부모 레이아웃 인 상황 에서 미끄럼 컨트롤 에 layot 를 설정 합 니 다.behavior=”@string/appbar_scrolling_view_behavior"플래그 비트(이 Behavior 시스템 및 구현 을 도와 줍 니 다),이 플래그 비트 가 있 는 컨트롤 이 미 끄 러 질 때 scroll 를 촉발 합 니 다.flags 플래그 비트 의 다른 컨트롤 이 미 끄 러 집 니 다.이때 imageview 의 layotcollapse Mode 는 parallax 이기 때문에 시차 가 있 는 방식 으로 상대 적 으로 미 끄 러 집 니 다.toolbar 는 pin 의 태그 위 치 를 설정 하기 때문에 수축 한 후에 화면 상단 에 고정 합 니 다.
예 ②
예 ① 에서 저 희 는 Collapsing ToolbarLayout 에 설 치 된 scrollflags 는"scroll|exit Until Collapsed"입 니 다.그러면 표지 위 치 를 다른 것 으로 바 꾸 면 어떤 효과 가 있 을까요?
activitymain.xml 에서 다음 과 같이 수정 합 니 다.

<android.support.design.widget.CollapsingToolbarLayout
 ...
 app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways">

그리고 다른 것 은 변경 하지 않 습 니 다.효 과 는 다음 과 같 습 니 다.

분명 한 것 은 효과 에 변화 가 생 겼 습 니 다.여기 서 toolbar 는 일치 하지 않 고 미끄럼 에 따라 화면 밖으로 미 끄 러 졌 습 니 다.또한 손가락 이 아래로 미 끄 러 지면 toolbar 는 점점 나타 나 최소 높이 를 유지 하고 맨 위로 돌아 가면 toolbar 는 원래 의 모습 으로 펼 쳐 집 니 다.
그렇다면 상기 예 를 바탕 으로 위 에'enterAlways Collapsed'라 는 표지 가 하나 빠 지면 어떻게 될 까?이 플래그 비트 의 역할 에 대해 서도 설명 되 었 습 니 다.toolbar 를 제어 하여 최소 높이 로 화면 에 들 어가 고 미끄럼 컨트롤 이 맨 위로 미 끄 러 질 때 완전한 높이 로 펼 치 는 것 입 니 다.이 플래그 가 없 으 면 우리 손가락 이 아래로 내 려 갈 때 toolbar 도 점점 나타 나 지만 위의 gif 그림 과 달리 toolbar 는 계속 펼 쳐 져 원래 의 모습 으로 변 한다.즉,imageview 가 나타난다.그림 은 여기 서 놓 지 않 고 독자 가 스스로 검증 할 수 있 습 니 다~
상기 두 가지 작은 예 를 통 해 우 리 는 Collapsing Toolbar Layout 에 대해 어느 정도 인식 을 가지 게 되 었 고 사용 방법 도 배 웠 습 니 다.이 를 사용 하면 우리 의 응용 을 더욱 아름 답 게 만 들 수 있 습 니 다.그렇다면 마지막 으로 필자 가 개발 하 는 과정 에서 만난 구덩이 에 대해 서 는 주의사항 을 말씀 드 리 겠 습 니 다.
주의 사항
1.Android Design Support Library 의 사용 은 특정한 주제 에 맞 춰 야 합 니 다.보통 AppCompat 의 테 마 를 사용 하면 되 고 테 마 를 사용자 정의 하여 AppCompat 의 테 마 를 계승 할 수 있 습 니 다.그렇지 않 으 면 잘못 보고 할 수 있 습 니 다.또한 Android Studio 를 사용 하면 테마 관련 코드 는 styles.xml(v21)파일 에서 해당 하 는 수정 을 해 야 합 니 다.그렇지 않 으 면 Android 5.0 이상 의 기 계 를 사용 하여 테스트 를 하면 오류 가 발생 할 수 있 습 니 다.
2.AppCompat 의 테 마 를 사 용 했 기 때문에 우리 의 Activity 는 AppCompat Activity 에서 계승 해 야 합 니 다.
3.필자 가 이전에 design support library 를 사 용 했 던 버 전 번 호 는 23.1.0 입 니 다.이 버 전에 서 Collapsing Toolbar Layout 는 collapsed Title TextAppearance 속성 을 설정 하지 않 았 고 제목 은 정상적으로 표시 할 수 있 지만 24.1.0 버 전,즉 위 에 사 용 된 버 전 입 니 다.collapsed Title TextAppearance 속성 이 설정 되 어 있 지 않 으 면 toolbar 가 수축 되면그 표제 문 자 는 매우 작 아 졌 다.그래서 우 리 는 collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"이라는 속성 을 설정 해 야 정상 이 될 수 있 습 니 다.
4.Collapsing Toolbar Layout 에 title 을 설정 하지 않 으 면 Action Bar 자체 의 제목 으로 응용 프로그램의 이름 을 표시 합 니 다.이것 은 set SupportAction Bar(toolbar)함수 가 호출 되 었 기 때 문 입 니 다.
마지막 으로 코드 를 첨부 한 주소:DesignSupportLibrarySample
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.