Coordinator Layout에서 머리를 숨길 때의 지식을 얻습니다.

11644 단어 Android
CoordinatorLayout에서 화면을 스크롤할 때 눈썹을 숨길 수 있습니다.
최근 한 앱 화면에서 이 동작을 수행하면서'이렇게 하면 머리가 잘 숨겨진다'라거나'여기서 이렇게 하면 포석이 무너지지 않는다'는 등 다양한 시도오류를 하면서 흥분된 마음을 담아 썼다.

머리글 숨기기


스크롤 후 머리글을 숨기는 UI를 만드는 기본 지식입니다.
어쨌든 이 내용만 파악하면 이런 일을 할 때 할 수 있다고 느낀다.

레이아웃 스크롤

CoordinatorLayout 스크롤할 때 눈썹을 숨기려면 스크롤 부분NestedScrollView 또는 RecyclerView이 있어야 합니다.
여기는 ScrollView 또는 ListView 상태에서.그렇게 생각하는 사람도 있겠지.
참고서CoordinatorLayout를 먼저 보러 가도 이 근처에 기록이 없어요. AppBarLayout에 쓰여 있어서 처음 하는 사람이라고 생각할 수도 있어요.
그리고'이 판을 먼저 굴린 다음에 눈썹을 숨긴다'는 경우는'굴리고 싶은 판식'을 아이의'자판에 숨기고 싶은 눈썹CoordinatorLayout'의 자판에 걸어보자.자기가 썼지만 이해하기 어렵다.

머리글 숨기기


숨길 머리글 부분은 AppBarLayout 요소에 있어야 합니다.
그리고 이것AppBarLayout은 반드시 CoordinatorLayout의 바로 아래에 있어야 한다.AppBarLayout 내에 눈썹을 설정하고 다음과 같은 설정app:layout_scrollFlags 속성을 설정하면 설정한 값에 따라 스크롤할 때AppBarLayout가 숨겨져 좋은 레이아웃입니다.
<AppBarLayout ...>
    <ToolBar ...
        app:layout_scrollFlags="scroll|enterAlways"
    />
</AppBarLayout>

위쪽 샘플이면 아래로 굴러가면 앱바르 라유튜브가 숨고 위로 굴러가면 앱바르 라유튜브가 나온다.layout_scrollFlags에서 지정할 수 있는 로고는 여기.를 사용하십시오.

기본을 통제한 기초 위에서


스크롤을 만들 때 눈썹을 숨기는 레이아웃에 대한 기본 지식은 다음과 같습니다.
다만, 스크롤된 레이아웃의 등급은 깊은 곳에 있고,include는 다른 레이아웃 파일을 만들고 있습니다. 세션의 상황을 잘 숨기고 있습니까?이런 곳은 시도해 보지 않으면 모른다.
다음 그림의 레이아웃에서 Toolbar 응용을 숨기는 것을 목표로 합니다
이런 상황에 관해서 나는 몇 가지를 시험해 보았는데, 참고로 여러분께 열거해 드리겠습니다.

성공 사례


스크롤 버전 xml과 눈썹 버전 xml이 같지 않습니다


//TODO 레이아웃(숨겨진 머리글 표시)
res/layout/activity_main.xml
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                ...
                app:layout_scrollFlags="scroll|enterAlways"/>  

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

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

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

</LinearLayout>

res/layout/view_pager.xml
<android.support.v4.widget.NestedScrollView
    android:id="@+id/pager"
    android:layout_below="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <!-- 中略 -->

</android.support.v4.widget.NestedScrollView>

AppBarLayout에서 굴러갈 때 숨기고 싶은 것과 숨기고 싶지 않은 것.


res/layout/activity_main.xml
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

            <android.support.v7.widget.Toolbar
                ...
                app:layout_scrollFlags="scroll|enterAlways"/>  

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

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

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

        <include layout="@layout/view_pager" 
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

</LinearLayout>

res/layout/view_pager.xml
<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_below="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</android.support.v4.view.ViewPager>

실패 예


애플이 발표했다숨기고 싶지 않은 것.숨기고 싶은 것


res/layout/activity_main.xml
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/AppTheme.AppBarOverlay">

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

            <android.support.design.widget.TabLayout
                android:id="@+id/tab"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways">

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

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

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

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

</LinearLayout>

res/layout/view_pager.xml
<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_below="@+id/app_bar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

</android.support.v4.view.ViewPager>

위에서 말한 바와 같이 스크롤할 때 머리글을 숨기는 동작을 실행하지 않습니다.
이 경우 앱 배어Layout 내 맨 위에 숨겨지지 않으려는 뷰를 더 높은 층으로 옮겨야만 해결할 수 있다고 생각한다.
(※ 글쎄요, 이렇게 UI가 된 상황에서 맨 위에 숨겨지지 않으려는 뷰와 아래 Layout은 여러 가지 책임이 있기 때문에 같은 레이아웃 파일에 넣으면 이상하겠죠)

입을 다물다


이런 느낌으로 두 개의 성공 예, 한 개의 실패 예를 소개했다.
앞으로 계속 추진하면 Behavior가 직접 창작한 이야기가 되겠지만 앞으로다.

좋은 웹페이지 즐겨찾기