[android] CollapsingToolbarLayout 안에 툴바와 함께 TabLayout을 사용하는 방법?



Answers

순수한 안드로이드 솔루션을 찾기 위해 2 일 동안 노력한 끝에 나의 해결책이되었습니다.

대상 : 툴바 아래의 탭으로 두 배경 모두의 배경 이미지가 있습니다.

(TL; DR : XML 첨부 참조)

달성하고자하는 동작은 CollapsingToolbarLayout 및 TabLayout을 이미지 상단에 놓고 "헤더"를 화면 밖으로 스크롤 한 다음 TabLayout 아래에 ActionBar (툴바)를 표시하는 것입니다.

문제 :

CollapsingToolbarLayout툴바 보기를 제외하고 접을 때 모든 자식 뷰를 숨기므로 TabLayoutCollapsingToolbarLayout 외부에 있지만 AppBarLayout 내부에 있어야 화면 상단과 툴바 아래에 "도킹"됩니다. 이제는 CollapsingToolbarLayout 안에 배치 된 ImageViewTabLayout 아래에 있지 않지만 수직 위에 위치하게됩니다.

해결책:

이 문제를 해결하려면 ImageView를 더 크게 만들어서 CollapsingToolbarLayout 안에 TabLayout 을 배치해야합니다. 그러나 CollapsingToolbarLayout 외부에 TabLayout 을 배치했기 때문에 부모 뷰 ( CollapsingToolbarLayout )가 더 짧아도 ImageView 가 그려지도록해야합니다. clipChildren = "거짓" 구조로! clipChildren은 ViewGroup 이 크기보다 크면 자식 뷰를 클립하지 말고, 이제는 기본적으로 ImageView를 더 크게 만들 수 있으며 TabLayout 아래에 여전히 그려집니다. 이렇게하면 멋진 이미지 위에 CollapsingToolbarLayoutTabLayout을 둘 다 가질 수 있습니다!

내 레이아웃 xml :

<?xml version="1.0" encoding="utf-8"?>

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:clipChildren="false"  /////IMPORTANT!!!!!!
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        >

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:scaleType="centerCrop"
            android:src="@drawable/poster"
            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"
            app:popupTheme="@style/AppTheme.PopupOverlay" />
    </android.support.design.widget.CollapsingToolbarLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/main_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable" />
</android.support.design.widget.AppBarLayout>


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

Question

나는 chrisbanes/cheesesquare 보고 있는데 CollapsingToolbarLayout 안에 툴바가있는 TabLayout을 넣으려고합니다. 여기에 제 코드가 있습니다.

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/detail_backdrop_height"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/primary_dark"
            android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                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="110dip"
                android:layout_gravity="top"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

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

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

이것은 CollapsingToolbar가 열렸을 때 정확히 내가 원하는 것입니다.

그러나 내가 그것을 무너 뜨릴 때 (이미지를 끌어 와서) 나는 이런 것을 얻는다.

그리고 이것은 내가 기본 설정을 탭과 도구 모음 제목이 겹치지 않으면 툴바의 높이를 110dip으로 설정 한 이유 때문입니다. 그래서 툴바의 제목이 appbar에 올바른 위치에 있고 tablayout이 그 아래에 있도록 올바른 방법을 찾고 있습니다. 이것이 달성 될 수있는 방법이 있습니까?




Toolbar TabLayout 안에 app:layout_collapseMode="pin" 으로 놓고 TabLayoutapp:layout_scrollFlags="enterAlways"




툴바> 여백 하단을 48dp로, layout_height를? attr / actionBarSize로 설정하십시오.

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

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/primary_dark"
        android:minHeight="150dip"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginBottom="60dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            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"
            android:layout_gravity="top"
            android:layout_marginBottom="38dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

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




<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" >

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        android:fitsSystemWindows="true"
        android:minHeight="?attr/actionBarSize" >

        <include layout="@layout/YOUR-CONTENT-LAYOUT" />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways"
            android:fitsSystemWindows="false"
            app:contentScrim="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:orientation="vertical" >

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        app:layout_scrollFlags="scroll"
        android:background="@color/primary_color" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" />
</LinearLayout>




이 일을 저의 생각입니다.

AppBar 외부에 탭 레이아웃을 배치하고 세로 선형 레이아웃으로 래핑하고 다음과 같이 위치를 설정합니다.

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tabDetail"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

TabLayout을 다른 높이의 두 배로 래핑하지 않는다면. layout_anchor를 AppBar로 설정하면 TabLayout의 절반 만 AppBar에있게됩니다.

여기 내 전체 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:id="@+id/main_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.v4.view.ViewPager
    android:id="@+id/viewpagerDetail"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/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"
        app:expandedTitleMarginBottom="54dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            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="100dp"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="80dp"
    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom"
    android:orientation="vertical">

<android.support.design.widget.TabLayout
    android:id="@+id/tabDetail"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:layout_scrollFlags="scroll|exitUntilCollapsed"/>
</LinearLayout>

이러한 dp 값의 집합이 화면 크기에 맞는지는 모르겠지만 내 것과 관련이 있습니다. 누구든지 더 잘 대답하면 공유하십시오.

죄송합니다. 내 코드 또는 영어로 실수를하면. 감사합니다!




sample 프로젝트는 CollapsingToolbarLayout 내부에서 TabLayout을 사용하여 만들었습니다.

API 14-23에서 테스트되었습니다. 어떤 문제없이 작동합니다.




전에 누군가 지적했듯이 다음과 같이 보입니다 (문서에서).

설정 한 경우 탐색 버튼은 툴바의 최소 높이 내에서 수직으로 정렬됩니다.

따라서 초기 레이아웃을 기반으로 다음과 같이 할 수 있습니다.

<android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/primary_dark"
            android:minHeight="150dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginBottom="60dp"
            app:expandedTitleMarginEnd="64dp">

            <ImageView
                android:id="@+id/backdrop"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

             <android.support.design.widget.TabLayout
                android:id="@+id/tabs"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_height="?actionBarSize"
                android:layout_gravity="bottom"/>

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="110dip"
                android:layout_gravity="top"
                app:titleMarginTop="13dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

여기서 app : titleMarginTop은 Toolbar 크기에서 TabLayout 크기 - 텍스트 크기를 뺀 값을 얻는 데 필요한 간격이며 잘 정렬되어야합니다.




새로운 소재 디자인을 사용하여 탭이있는 툴바를 무너 뜨리는 것 소스 코드가있는 라이브러리 예제

새로운 소재 디자인 지원 라이브러리의 공식 축소 형 툴바 기능을 사용했습니다.

여기 축소 된보기 높이는 256dp이고 탭 높이는 56dp입니다.

나는 경로를 따라 만들었고, 이미지를 축소 된보기와 탭을 위해 두 부분으로 나눴다.

나는 고해상도 drawable xxxhdpi 로 픽셀 크기에 dp 에 따라 이미지를 잘라내어 모든 화면 크기로 조정할 수 있도록 드로어 블 폴더에 넣었다.

2000x1246 이미지가 있습니다.

상단 이미지 256dp = 2000x1024 픽셀

하단 탭 이미지 56dp = 2000x224 픽셀

다음은 소스 코드 를 사용한 전체 예제입니다.




아래 코드는 Expand / Collapse 툴바 동작을 구현합니다.

기본적으로 우리는
CoordinatorLayout 레이아웃 (FrameLayout)
AppBarLayout (물건 디자인의 많은 기능을 구현하는 수직 LinearLayout)
CollapsingToolbarLayout (툴바의 래퍼)
ImageView 및 툴바

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    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:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginEnd="64dp"
        app:expandedTitleMarginStart="48dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">


        <ImageView
            android:id="@+id/header"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/logo"
            android:minHeight="300dp"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:minHeight="?attr/actionBarSize"
            app:layout_collapseMode="pin" />


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


<android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="50dip"
            app:tabGravity="center"
            app:tabMode="scrollable"
            android:gravity="bottom"/>

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


    <FrameLayout
        android:id="@+id/fr_container_home"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

Observation
- FrameLayout is necessary app: layout_behavior = "@string/appbar_scrolling_view_behavior"
-TOOLBAR Not need backgroud, insert the color in the attribute app:contentScrim = "?Attr/ColorPrimary" from our CollapsingToolbarLayout

수업 시간에

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("YourTitle");
setSupportActionBar(toolbar);





Related