Jak używać TabLayout z paskiem narzędziowym wewnątrz CollapsingToolbarLayout?
Patrzę na chrisbanes / cheesesquare i próbuję umieścić TabLayout z paskiem narzędzi wewnątrz CollapsingToolbarLayout, a oto mój kod
<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>
To zakłada coś takiego po otwarciu Zawalającego się paska, co jest dokładnie tym, czego szukam:
Ale kiedy go zwijam (ciągnąc obrazek do góry) dostaję coś takiego
I jest to spowodowane tym, że ustawiłem pasek narzędzi na wysokość 110dip jeśli opuszczę ustawienia domyślne zakładki i tytuł paska narzędzi nakładają się. Więc szukam właściwego sposobu, aby to zrobić, aby Tytuł paska narzędzi dostał to właściwe miejsce na pasku aplikacji i tablayout jest pod nim. Czy można to osiągnąć w jakiś sposób ?
18 answers
Oto sposób, w jaki udało mi się to zrobić, myślę, że nie jest to najlepsze rozwiązanie, choć jeśli ktoś znajdzie lepszy sposób, proszę o przesłanie odpowiedzi.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-09 05:59:25
Po 2 całych dniach prób znalezienia czystego rozwiązania Android tutaj jest moje rozwiązanie.
Cel: zakładki pod paskiem narzędzi z tłem obrazu za obydwoma widokami
(TL; DR: Patrz załączony XML)
Zachowanie, które chcę osiągnąć, to mieć CollapsingToolbarLayout i TabLayout na górze obrazu, a gdy "nagłówek" jest przewinięty w górę (poza ekran), a następnie pokazać ActionBar (pasek narzędzi) z TabLayout pod nim.
Problem:
Ponieważ CollapsingToolbarLayout ukryje wszystkie widoki potomne po zwinięciu, z wyjątkiem paska narzędzi , wtedy TabLayout musi być umieszczony poza CollapsingToolbarLayout ale wewnątrz AppBarLayout tak, aby był "zadokowany" w widoku u góry ekranu i pod paskiem narzędzi . Problem polega teraz na tym, że ImageView umieszczony wewnątrz CollapsingToolbarLayout nie będzie pod TabLayout , Ale nad nim w pionie.
Rozwiązanie:
Aby rozwiązać ten problem, musimy zwiększyć ImageView tak, że jeśli umieścimy TabLayout wewnątrz CollapsingToolbarLayout pokryje go. Ale ponieważ umieściliśmy TabLayout poza CollapsingToolbarLayout musimy się upewnić, że ImageView jest narysowana nawet jeśli jej widok nadrzędny (CollapsingToolbarLayout ) jest krótszy. clipChildren="false" na ratunek! clipChildren mówi grupie widoków , aby nie przycinać widoku potomnego, jeśli są one większe niż jego rozmiar, więc zasadniczo teraz możemy sprawić, że ImageView będzie wyższy i nadal będzie rysowany pod TabLayout. W ten sposób możemy mieć zarówno CollapsingToolbarLayout, jak i TabLayout nad ładnym obrazkiem!
Mój 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" />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-06 11:22:17
Okazuje się, że ponieważ AppBarLayout rozszerza LinearLayout, możesz mieć w nim dwa CollapsingToolBarLayouts (rozszerza FrameLayout). To, co zrobiłem, to miałem pierwszą Falling Toolbarlayout Dom zawartość, którą chciałem zniknąć, i dałem mu flagę AppBarLayout:
App: layout_scrollFlags= "scroll / exitUntilCollapsed"
Na drugi CollapsingToolbarLayout, który faktycznie miał zakładki, ustawiłem flagi przewijania do:
App: layout_scrollFlags= "scroll|enterAlways"
Ostateczny XML wygląda tak i daje mi to, czego chcę.
<?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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-15 15:19:24
Stworzyłem przykładowy projekt, w którym używam TabLayout wewnątrz CollapsingToolbarLayout
Testowane na API 14-23. Działa bez żadnych problemów.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-30 00:40:18
Znalazłem proste rozwiązanie, aby działało z przezroczystym tłem TabLayout
:
- użyj
expandedTitleMarginBottom
wCollapsingToolbarLayout
, aby uniknąć nakładania się rozszerzonego tytułuTabLayout
- Ustaw
layout_height
na {[1] } jako wartość stałą - dodaj
layout_marginBottom
doToolbar
z tą samą wartością coTabLayout
layout_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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-10-01 13:34:10
Zwijanie paska narzędzi z zakładkami przy użyciu nowej biblioteki wsparcia projektowania materiałów z kodem źródłowym
Użyłem oficjalnej funkcji zwijania paska narzędzi nowej biblioteki wsparcia projektowania materiałów.
Tutaj wysokość zwiniętego widoku to 256dp, a wysokość zakładek to 56dp
Zrobiłem following path, wyciąłem obraz na dwie części, jedną dla zwiniętego widoku i jedną dla kart.
Wyciąłem obrazy zgodnie z dp do pikseli o wysokiej rozdzielczości rysowalne xxxhdpi i włożyłem do rysowalne folder więc będzie regulowany do wszystkich rozmiarów ekranu
Mam obraz 2000x1246
Top image 256dp= 2000x1024 piksel
Zdjęcie dolnej zakładki 56dp= 2000x224 pikseli
Oto pełny przykład z kodem źródłowym
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-14 08:30:10
Użyj tego kodu 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>
Kod 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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-09 13:31:35
Oto mój pomysł na zrobienie tego.
Umieszczam układ tabulatora poza paskiem aplikacji i owijam go pionowym układem liniowym i ustawiam pozycję w ten sposób
<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>
Jeśli nie owiniesz TabLayout innym układem o podwójnej wysokości. Po ustawieniu layout_anchor na AppBar, tylko połowa TabLayout będzie w AppBar.
Oto mój cały plik 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>
Nie jestem pewien, czy te wartości dp pasują do Twojego rozmiaru ekranu, ale robią to z moim. Jeśli ktoś ma lepszą odpowiedź Proszę się podzielić.
Przepraszam, jeśli popełniłem błąd w moim kodzie lub moim angielskim.Dziękuję!!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-25 04:36:59
Miałem podobny problem, a moje rozwiązanie było śmiesznie proste. Wszystko, co musiałem zrobić, to ustawić pasek narzędzi jako support actionbar (używam bazy stylów Theme.NoActionBar
)
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-06-22 19:04:14
Poniższy kod implementuje pasek narzędzi operacji Rozwiń / Zwiń.
W zasadzie będziemy mieliCoordinatorLayout
(FrameLayout)AppBarLayout
(LinearLayout pionowy, który implementuje wiele cech konstrukcji stuff),CollapsingToolbarLayout
(jest opakowaniem dla paska narzędzi)
ImageView i Toolbar
<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
W twojej klasie
Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
mCollapsingToolbarLayout = (CollapsingToolbarLayout)findViewById(R.id.collapsing_toolbar);
mCollapsingToolbarLayout.setTitle("YourTitle");
setSupportActionBar(toolbar);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-19 19:11:09
Umieściłem TabLayout poza AppBarLayout i owinąłem ViewPager i TabLayout razem wewnątrz 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-24 12:40:54
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-30 11:46:05
<?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>
To działa dla mnie, ale tylko na urządzeniach z api 19 +
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-31 18:38:58
Jak ktoś wcześniej zauważył, wygląda na to, że to dlatego (z dokumentów):
Przycisk nawigacyjny jest ustawiony pionowo w pasku narzędzi Minimalna wysokość, jeśli jest ustawiona.
Dlatego na podstawie początkowego układu można zrobić coś takiego:
<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>
Gdzie app: titleMarginTop jest odstępem potrzebnym do uzyskania rozmiaru paska narzędzi minus Rozmiar TabLayout minus rozmiar tekstu i powinien być ładnie wyrównany.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-09-28 21:13:46
Wszystkie powyższe kody zwijają się tylko komponenty "CollapsingtoolbarLayout". Oznacza to, że jeśli przewijamy stronę zawartości "ViewPager", to nie działa.
Zamieniam "ViewPager" na "FrameLayout" teraz działa, czego się spodziewamy.
Spodziewam się, że jeśli przewiń stronę Viewpagera, to" CollapsingToolbarLayout " powinien być listen. w tym celu użyłem "NestedScrollView". Ale problem jest "ViewPager" nie działa w "NestedScrollView".
Więc w końcu osiągnąłem z FrameLayout.
Ale problemem jest " tabLayout.setOnTabSelectedListener (nowy TabLayout.OnTabSelectedListener () {"is 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>
Tworzenie Tablayout z out Viewpagerem : http://www.theappguruz.com/blog/easy-way-to-create-tab-layout-in-android-without-viewpager
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-11-07 06:57:02
Toolbar > Ustaw margines dolny na 48dp i layout_height na ?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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-03-28 08:30:38
Udało mi się to uruchomić, umieszczając TabLayout
wewnątrz drugiego CollapsingToolbarLayout
z flagą przewijania ustawioną na enter zawsze zwinięty.
<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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-02-11 17:20:04
Spróbuj umieścić Toolbar
wewnątrz CollapsingToolbar
z app:layout_collapseMode="pin"
i TabLayout
Na zewnątrz z app:layout_scrollFlags="enterAlways"
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-08 12:39:38