37

Я смотрю на chrisbanes/cheesesquare, и я пытаюсь поставить TabLayout с панели инструментов внутри CollapsingToolbarLayout, и вот мой кодКак использовать TabLayout с панелью инструментов внутри CollapsingToolbarLayout?

<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 что именно то, что я ищу:

enter image description here

Но когда я свернуть его (потянув изображение вверх) я получаю что-то вроде этого

enter image description here

И это связано с тем, что я установил на панели инструментов высоту 110dip, если оставить параметры по умолчанию, чтобы вкладки и заголовок панели инструментов перекрывались. Поэтому я ищу правильный способ сделать это, чтобы название панели инструментов было правильно размещено на панели приложений, а tablayout находится под ней. Есть ли способ, которым это может быть достигнуто?

+0

Я не уверен, так как я только начал играть с библиотекой дизайна самостоятельно, но не должно быть 'app: layout_collapseMode =" pin "' на 'TabLayout'? –

+1

@ XaverKapeller Да, я уже пробовал это, и это было логическое начало, но это не так, возможно, они еще не реализовали функцию pin/parallax полностью:/ –

+2

Я бы также попытался поставить ' TabLayout' только внутри 'AppBarLayout', а не в' CollapsingToolbarLayout'. –

ответ

20

Вот как мне удалось это сделать, я не думаю, что это самое лучшее решение, хотя, если кто-то находит лучший способ, пожалуйста, не стесняйтесь публиковать ответ.

<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="206dip" 
      android:background="@color/primary_dark" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" 
      android:fitsSystemWindows="true" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginStart="48dp" 
      app:expandedTitleMarginBottom="20dp" 
      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" 
       app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
       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> 
</android.support.design.widget.CoordinatorLayout> 
+3

Это работает, но содержимое, похоже, не хочет прокручивать назад, когда оно скрыто. – JMRboosties

+1

Это правильный ответ, и упомянутая ошибка JMRboosties была исправлена ​​в 22.2.1. https://code.google.com/p/android/issues/detail?id=178656 – Amagi82

+0

Как сделать TabLayout выше CardViews, когда behaviour_oplopTop = "32dp" указано для viewpager? –

-2

Попробуйте поставить Toolbar внутри CollapsingToolbar с app:layout_collapseMode="pin" и TabLayout снаружи app:layout_scrollFlags="enterAlways"

14

Оказывается, что, поскольку AppBarLayout расширяет LinearLayout, вы можете иметь два CollapsingToolBarLayouts (распространяется FrameLayout) в нем. То, что я сделал, есть первый дом CollapsingToolBarLayout содержимое я хотел исчезнуть, и дал ему флаг AppBarLayout:

приложения: layout_scrollFlags = «свиток | exitUntilCollapsed»

Для второго CollapsingToolbarLayout, что на самом деле имели язычки, Я установил это флаги прокрутки:

приложения: layout_scrollFlags = «Спиральный | enterAlways»

окончательный XML выглядит следующим образом, и это дает мне то, что я хочу.

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical"> 

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

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

     <android.support.design.widget.CollapsingToolbarLayout 
      android:id="@+id/collapsing_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:contentScrim="?attr/colorPrimary" 
      app:expandedTitleMarginBottom="@dimen/quadruple_margin" 
      app:layout_collapseParallaxMultiplier="0.7" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

      <RelativeLayout 
       android:id="@+id/header_view" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:animateLayoutChanges="true" 
       android:background="@color/black_40"> 

       <!-- YOUR CONTENT HERE --> 

      </RelativeLayout> 

      <android.support.v7.widget.Toolbar 
       android:id="@+id/action_bar" 
       android:layout_width="match_parent" 
       android:layout_height="@dimen/abc_action_bar_default_height_material" 
       app:contentInsetLeft="@dimen/triple_margin" 
       app:contentInsetStart="@dimen/triple_margin" 
       app:layout_collapseMode="pin" 
       app:popupTheme="@style/Theme.AppCompat.NoActionBar" 
       app:theme="@style/Theme.AppCompat.NoActionBar" /> 
     </android.support.design.widget.CollapsingToolbarLayout> 

     <android.support.design.widget.CollapsingToolbarLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      app:layout_scrollFlags="scroll|enterAlways"> 

      <android.support.design.widget.TabLayout 
       android:id="@+id/tabs" 
       android:layout_width="match_parent" 
       android:layout_height="48dp" 
       android:layout_gravity="bottom" 
       android:layout_marginTop="@dimen/half_margin" 
       app:layout_scrollFlags="enterAlways" 
       app:tabBackground="@color/transparent" 
       app:tabGravity="center" 
       app:tabMode="scrollable" 
       app:tabSelectedTextColor="@color/white" 
       app:tabTextColor="@color/grey_400" /> 
     </android.support.design.widget.CollapsingToolbarLayout> 
    </android.support.design.widget.AppBarLayout> 
</android.support.design.widget.CoordinatorLayout> 
+2

Это также хорошая идея :) –

+0

Это работает отлично. Но не получается приложение: tabBackground = «@ color/transparent» во втором CollapsingToolbarLayout – Arya

+0

@AthiraSanthosh @ color/transparent - это цвет, который вы должны определить в своих res/values ​​/ colors.xml так: <цвет имя = «прозрачный»> # 00000000 –

0

В приведенном ниже коде реализовано действие Развернуть/свернуть панель инструментов.

В основном мы будем иметь
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 

В классе

0

Я разместил TabLayout вне AppBarLayout и завернул ViewPager и TabLayout вместе в LinearLayout.

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="210dp" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    android:background="@color/profile_header_bg_color" 
    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" 
     android:background="@color/profile_header_bg_color"> 

     <ImageView 
      android:layout_width="match_parent" 
      android:paddingTop="60dp" 
      android:layout_height="210dp" 
      android:background="@color/profile_header_bg_color" 
      android:id="@+id/user_details" 
      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:theme="@style/ThemeOverlay.AppCompat.Light" 
      android:background="@color/profile_header_bg_color" 
      app:layout_collapseMode="pin"/> 

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

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

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

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

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

1

Вот моя идея сделать это.

I место расположения вкладок вне 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> 

Я не уверен, если это набор значения йра будет соответствовать вашему размеру экрана, но это делать с моим. Если кто-нибудь лучше ответит, пожалуйста, поделитесь.

Извините, если я ошибаюсь в своем коде или моем английском. Спасибо!

0

<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> 

-1

Я был в состоянии получить эту работу, помещая TabLayout внутри второй CollapsingToolbarLayout с флагом прокрутки набора для ввода Всегда Рухнул.

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

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/event_guide_collapsingToolbarLayout" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:contentScrim="?attr/colorPrimary" 
     app:expandedTitleMarginBottom="80dp" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <ImageView 
      android:id="@+id/event_guide_banner_image" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@drawable/darkened_placeholder" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax" /> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/event_guide_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.CollapsingToolbarLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_scrollFlags="scroll|enterAlwaysCollapsed"> 

     <android.support.design.widget.TabLayout 
      android:id="@+id/event_guide_tabbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="?attr/colorPrimary" 
      android:theme="@style/BaseTheme" 
      app:layout_scrollFlags="scroll|exitUntilCollapsed" /> 

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

<android.support.v4.widget.SwipeRefreshLayout 
    android:id="@+id/event_guide_swipe_refresh" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:background="@color/light_gray" 
    android:paddingLeft="@dimen/activity_horizontal_margin" 
    android:paddingRight="@dimen/activity_horizontal_margin" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" 
    tools:context="com.meetball.activity.EventGuideActivity"> 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/event_guide_recycler_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scrollbars="none" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

0
<?xml version="1.0" encoding="utf-8"?> 
<ui.screen.ProfileView 
    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.CoordinatorLayout 
     android:id="@+id/content" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:orientation="vertical"> 

     <android.support.v4.view.ViewPager 
      android:id="@+id/profile_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/profile_appbar_layout" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:background="@android:color/transparent" 
      app:elevation="2dp"> 

      <android.support.design.widget.CollapsingToolbarLayout 
       android:id="@+id/collapsing_toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       app:contentScrim="?attr/colorPrimary" 
       app:layout_scrollFlags="scroll|exitUntilCollapsed" 
       app:expandedTitleTextAppearance="@android:color/transparent" 
       app:elevation="2dp"> 

       <LinearLayout 
        android:id="@+id/profile_user_layout" 
        android:layout_width="match_parent" 
        android:layout_height="192dp" 
        android:background="?attr/colorPrimary" 
        android:clipChildren="false" 
        android:clipToPadding="false" 
        android:orientation="vertical" 
        android:paddingBottom="24dp" 
        android:paddingLeft="24dp" 
        android:paddingRight="24dp" 
        android:paddingTop="64dp" 
        app:layout_collapseMode="parallax"> 

        <LinearLayout 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" 
         android:clipChildren="false" 
         android:orientation="horizontal"> 

         <FrameLayout 
          android:layout_width="96dp" 
          android:layout_height="96dp" 
          android:clipChildren="false"> 

          <de.hdodenhof.circleimageview.CircleImageView 
           android:id="@+id/profile_user_photo" 
           android:layout_width="86dp" 
           android:layout_height="86dp" 
           android:src="@mipmap/ic_launcher" 
           app:border_width="1dp" 
           app:border_color="@color/white" /> 

          <View 
           android:id="@+id/profile_user_medal" 
           android:layout_width="24dp" 
           android:layout_height="24dp" 
           android:background="@drawable/medal" 
           android:layout_marginRight="6dp" 
           android:layout_marginTop="2dp" 
           android:layout_gravity="top|right" /> 

         </FrameLayout> 

         <LinearLayout 
          android:id="@+id/profile_user_details" 
          android:layout_width="wrap_content" 
          android:layout_height="wrap_content" 
          android:layout_weight="1" 
          android:orientation="vertical" 
          android:layout_marginLeft="16dp"> 

          <TextView 
           android:id="@+id/profile_user_name" 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:text="Kateřina Bíla" 
           android:textColor="@color/white" 
           android:textSize="24sp" /> 

          <TextView 
           android:id="@+id/profile_user_completed_activities" 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:text="Dokoncene 4 z 5" 
           android:textColor="@color/white" 
           android:textSize="16sp" /> 

          <LinearLayout 
           android:layout_width="match_parent" 
           android:layout_height="wrap_content" 
           android:orientation="horizontal"> 

           <TextView 
            android:id="@+id/profile_user_progress_text" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content" 
            android:textSize="20sp" 
            android:textColor="@color/white" 
            android:text="50%" /> 

           <com.rey.material.widget.ProgressView 
            android:id="@+id/profile_user_progress_bar" 
            android:layout_width="match_parent" 
            android:layout_height="6dp" 
            android:visibility="visible" 
            android:layout_gravity="center_vertical" 
            android:layout_marginLeft="8dp" 
            android:paddingRight="16dp" 
            app:pv_progressMode="determinate" 
            app:pv_circular="false" 
            app:pv_autostart="true" 
            app:lpd_strokeSize="3dp" 
            app:lpd_strokeColor="@color/red" 
            app:lpd_strokeSecondaryColor="@color/white" 
            app:lpd_maxLineWidth="62dp" 
            app:lpd_minLineWidth="31dp" 
            app:pv_progressStyle="@style/ProfileTotalProgressBar" 
            app:pv_progress="0.5" /> 


          </LinearLayout> 


         </LinearLayout> 
        </LinearLayout> 


       </LinearLayout> 

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

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

      <FrameLayout 
       android:layout_width="match_parent" 
       android:layout_height="48dp" 
       app:elevation="2dp"> 

       <android.support.design.widget.TabLayout 
        android:id="@+id/profile_tab_layout" 
        android:layout_width="match_parent" 
        android:layout_height="48dp" 
        android:layout_gravity="top" 
        android:background="?attr/colorPrimary" 
        app:tabTextColor="@color/white_87" 
        app:tabGravity="fill" 
        app:tabIndicatorColor="@color/white" 
        app:tabIndicatorHeight="4dp" 
        app:tabMode="fixed" 
        app:tabSelectedTextColor="@color/white" 
        app:tabTextAppearance="@style/TabTextAppearance" 
        app:elevation="2dp" /> 

      </FrameLayout> 

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

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

</ui.screen.ProfileView> 

Это работает для меня, но только на устройствах с апи 19+

2

рушится панель инструментов с вкладками с помощью новой поддержки дизайн материал библиотеки пример с исходным кодом

Я использовал официальную рушительную панель инструментов новой материи al design support library.

здесь рухнул высоту взгляда 256dp и высота вкладок является 56dp

я сделал следующий путь, я вырезать изображение на две части один для свернутого зрения и один для вкладок.

я вырезанные изображения в соответствии с dp to pixel размеров с высоким разрешением растяжимой xxxhdpi и положить в растяжимой папку, она будет регулируемые для всех размеров экрана

У меня 2000x1246 изображение

верхнее изображение 256dp = 2000x1024 пикселя

нижней вкладки изображение 56dp = 2000x224 пикселей

Вот полный пример с source code

enter image description here

+1

Хорошая идея, хотя я полагаю, не параллакс. –

0

Как кто-то указывал ранее, это выглядит, как это происходит потому, что (из документации):

Кнопка навигации вертикально в пределах минимальной высоты панели инструментов, если он установлен.

Таким образом, на основе первоначального макета вы можете сделать что-то вроде этого:

<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> 

Где приложение: titleMarginTop этого расстояния необходимо, чтобы получить размер панели инструментов размера минус TabLayout минус размер текста и он должен выровняйте красиво.

6

Я создал этот sample проект, в котором я использую TabLayout внутри CollapsingToolbarLayout

Испытано на API 14-23. Работает без проблем.

19

После двух целых дней поиска чистого решения для Android здесь мое решение.

Цель: Вкладки под панелью инструментов с изображением фона позади обоих просмотров

(TL; DR: см XML прилагается)

поведение Я хочу добиться того, чтобы иметь CollapsingToolbarLayout и TabLayout поверх изображения и когда прокручивается «заголовок» (из экрана), затем отображается панель ActionBar (панель инструментов) с ним под заголовком TabLayout.

Проблема:

Поскольку CollapsingToolbarLayout скроет все детям взгляды, когда рухнул кроме зрения Toolbar то TabLayout должен быть размещен вне CollapsingToolbarLayout но внутри AppBarLayout, так что он «состыкован» в верхней части экрана и под панелью .Проблема в том, что ImageView, размещенный внутри CollapsingToolbarLayout, не будет находиться под таблицей TabLayout, но над ней вертикально.

Решение:

Чтобы решить эту проблему, мы должны сделать ImageView выше, так что, если мы должны были поместить TabLayout внутри CollapsingToolbarLayout он будет охватывать его. Но так как мы поместили TabLayout вне CollapsingToolbarLayout мы должны убедиться, что ImageView обращается даже если родительский вид (CollapsingToolbarLayout) короче. clipChildren = "false" К СПАСЕНИЮ! clipChildren говорит ViewGroup, чтобы НЕ закрепить изображение своих детей, если они больше, чем размер, поэтому по существу теперь мы можем сделать изображение более высоким, и оно по-прежнему будет нарисовано под заголовком TabLayout. Таким образом, мы можем иметь как CollapsingToolbarLayout, так и TabLayout над красивым изображением!

My Layout 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" /> 

+1

Только решение, которое работало в моем случае. –

+0

хорошая идея, но не работает с scrimContent. –

+0

@PhoenixWang, пожалуйста, не стесняйтесь предлагать решение, которое работает с scrimContent. –

2

Использовать этот код XML

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

<android.support.design.widget.AppBarLayout 
    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/collapse_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="250dp" 
     android:fitsSystemWindows="true" 
     app:contentScrim="@color/PrimaryColor" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <ImageView 
      android:id="@+id/img" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:background="@drawable/background_material" 
      android:fitsSystemWindows="true" 
      android:scaleType="fitXY" 
      app:layout_collapseMode="parallax" /> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="100dp" 
      android:gravity="top" 
      android:minHeight="?attr/actionBarSize" 
      app:layout_collapseMode="pin" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light" 
      app:titleMarginTop="15dp"/> 



     <android.support.design.widget.TabLayout 
      android:id="@+id/tabsInLogin" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      android:layout_gravity="bottom" 
      app:tabIndicatorHeight="2dp" 
      app:tabIndicatorColor="@android:color/white" /> 

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

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

<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.CoordinatorLayout> 

кода Java

collapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapse_toolbar); 
    collapsingToolbarLayout.setTitleEnabled(false); 
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
    setSupportActionBar(toolbar); 
    getSupportActionBar().setTitle(cheeseName); 
    getSupportActionBar().setDisplayHomeAsUpEnabled(true); 
+0

setDisplayHomeAsUpEnabled работает над версией 23 sdk или выше –

1

У меня была аналогичная проблема, и мое решение было до смешного просто. Все, что я должен был сделать настройки панели инструментов в качестве поддержки ActionBar (я использую базу Theme.NoActionBar стиля)

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); 
setSupportActionBar(toolbar); 
4

Я нашел простое решение, чтобы сделать это работает с прозрачным TabLayout фона:

  • использование expandedTitleMarginBottom в CollapsingToolbarLayout, чтобы избежать расширенного заголовка перекрывающего TabLayout
  • установить layout_height в TabLayout качестве постоянного значения
  • добавить layout_marginBottom к Toolbar с таким же значением, как TabLayoutlayout_height
<android.support.design.widget.AppBarLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     app:expandedTitleMarginBottom="70dp" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed"> 

     <YourMagicViewWithBackgroundImageTextAndOtherStuff 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      app:layout_collapseMode="parallax" /> 

     <android.support.v7.widget.Toolbar 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="50dp" 
      app:layout_collapseMode="pin" /> 

     <android.support.design.widget.TabLayout 
      android:layout_width="match_parent" 
      android:layout_height="50dp" 
      android:layout_gravity="bottom" /> 

    </android.support.design.widget.CollapsingToolbarLayout> 
</android.support.design.widget.AppBarLayout> 
+1

Это самое прямое и простое решение. Он работает с scrimContent и должен быть принятым ответом. Спасибо! –

0

Все вышеуказанные коды разрушающейся только "CollapsingtoolbarLayout" компоненты. Это означает, что если мы прокручиваем страницу содержимого «ViewPager», она не работает.

Я заменяю «ViewPager» на «FrameLayout», теперь он работает, чего мы ожидаем.

Я ожидаю, что, если прокрутить страницу Viewpager, тогда «CollapsingToolbarLayout» следует прослушать. для этого я использовал «NestedScrollView». Но проблема заключается в том, что «ViewPager» не работает в «NestedScrollView».

Итак, наконец, я достиг с помощью FrameLayout.

Но проблема в том, "tabLayout.setOnTabSelectedListener (новый TabLayout.OnTabSelectedListener() {" является depricated

<android.support.design.widget.CoordinatorLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <!--<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="250dp" 
     android:fitsSystemWindows="true" 
     > 

     <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:layout_scrollFlags="scroll|exitUntilCollapsed" 
      > 

      <ImageView 
       android:id="@+id/backdrop" 
       android:layout_width="match_parent" 
       android:layout_height="match_parent" 
       android:fitsSystemWindows="true" 
       android:scaleType="centerCrop" 
       android:visibility="gone" 
       android:src="@drawable/srl_mallikaarjuna_lrg" 
       app:layout_collapseMode="parallax" 

       /> 


      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       > 
       <RelativeLayout 
        android:layout_width="match_parent" 
        android:layout_height="match_parent"> 
        <TextView 
         android:layout_width="match_parent" 
         android:layout_height="match_parent" 
         android:gravity="center_horizontal|center_vertical" 
         android:text="Calendar"/> 
       </RelativeLayout> 

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

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

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

     </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" 
    android:background="#fefefe" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

    <FrameLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:id="@+id/frame_container"> 

    </FrameLayout> 

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


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

Создаем Tablayout с вне ViewPager: http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-android-without-viewpager

Смежные вопросы