Как использовать TabLayout с панелью инструментов внутри CollapsingToolbarLayout?

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

          

Это приводит к чему-то подобному, когда открывается CollapsingToolbar, что именно то, что я ищу:

введите описание изображения здесь

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

введите описание изображения здесь

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

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

           

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

objective: вкладки под панелью инструментов с фоновым изображением за обоими представлениями.

(TL; DR: см. Прикрепленный XML)

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

Проблема:

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

Решение:

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

Мой макет xml:

  

         

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

Приложение: layout_scrollFlags = “свиток | exitUntilCollapsed”

Для второго CollapsingToolbarLayout, на самом деле имевшего вкладки, я установил флаги прокрутки:

Приложение: layout_scrollFlags = “Спиральные | enterAlways”

Окончательный XML выглядит так, и он дает мне то, что я хочу.

                 

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

Протестировано по API 14-23. Работает без проблем.

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

  • используйте TabLayout в CollapsingToolbarLayout чтобы избежать расширения перекрытия заголовков TabLayout
  • установите layout_height в TabLayout как постоянное значение
  • добавьте layout_marginBottom в Toolbar с таким же значением, как TabLayout layout_height
        

сворачивание панели инструментов с вкладками с использованием нового примера поддержки библиотеки материалов с исходным кодом

Я использовал официальную рушительную панель инструментов новой библиотеки поддержки дизайна материалов.

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

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

i вырезанные изображения в соответствии с размерами пикселей в пикселях с высоким разрешением xxxhdpi и помещением в папку с возможностью выбора, чтобы он регулировался во всех размерах экрана

У меня есть изображение 2000×1246

top image 256dp = 2000×1024 пиксель

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

Вот полный пример с исходным кодом

введите описание изображения здесь

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

            

Код 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); 

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

Я размещаю компоновку вкладок вне AppBar и обертываю ее вертикальной линейной компоновкой и устанавливаю позицию, подобную этой

    

Если вы не закроете TabLayout еще одним макетом высот высот. Когда вы устанавливаете layout_anchor в AppBar, только половина TabLayout будет в AppBar.

Вот мой весь XML-файл.

            

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

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

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

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

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

В основном у нас будет
CoordinatorLayout (FrameLayout)
AppBarLayout (вертикальный LinearLayout, который реализует многие особенности конструкций материалов),
CollapsingToolbarLayout (это shell для панели инструментов)
ImageView и панель инструментов

          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 

В вашем classе

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

Я разместил TabLayout вне AppBarLayout и объединил ViewPager и TabLayout вместе в LinearLayout.

           

           

                               1                               

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

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

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

Поэтому, основываясь на исходном макете, вы можете сделать что-то вроде этого:

      

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

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

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

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

Итак, я добился успеха с FrameLayout.

Но проблема заключается в «tabLayout.setOnTabSelectedListener (новый TabLayout.OnTabSelectedListener () {” лишен

                    

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

Панель инструментов> установите нижнюю границу поля на 48dp и layout_height на? Attr / actionBarSize

          

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

             

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

  • Использование для необязательного
  • Что такое самоуверенное программное обеспечение?
  • Дизайн URL-адреса RESTful для поиска
  • Что такое разделение проблем?
  • Как хранить несколько опций в одной таблице?
  • Как изменить новый цвет и высоту индикатора TabLayout
  • Есть ли опция / функция MySQL для отслеживания истории изменений записей?
  • CardView не показывает Shadow в Android L
  • Почему многие регионы чувствительны к регистру?
  • Фабричный, абстрактный заводский и заводской метод
  • C ++ RTTI жизнеспособные примеры
  • Давайте будем гением компьютера.