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가 직접 창작한 이야기가 되겠지만 앞으로다.
Reference
이 문제에 관하여(Coordinator Layout에서 머리를 숨길 때의 지식을 얻습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/tacksman/items/f19891506e55668ffc06텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)