webentwicklung-frage-antwort-db.com.de

Mit zusammenklappender Symbolleiste und Registerkarten blättern

Ich versuche, ein Layout mit einer CollapsingToolbarLayout mit scroll|exitUntilCollapsed-Flag und einer TabLayout mit scroll|enterAlways scrollFlag-Eigenschaft herzustellen. Grundsätzlich möchte ich, dass meine Symbolleiste fixiert wird und die Registerkarten beim Scrollen ein- und ausgeblendet werden. Ich habe die Cheesesquare-App von https://github.com/chrisbanes/cheesesquare geändert. Hier ist meine Layout-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:id="@+id/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

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

            <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.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

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

    <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.FloatingActionButton
        Android:layout_height="wrap_content"
        Android:layout_width="wrap_content"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"
        Android:src="@drawable/ic_discuss"
        Android:layout_margin="@dimen/fab_margin"
        Android:clickable="true"/>

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

Und hier ist das Ergebnis;

Die Laschen sind nicht richtig positioniert. Und sie interessieren sich nicht für die enterAlways-Eigenschaft.

 enter image description here

androidandroid-layoutandroid-toolbarandroid-coordinatorlayout
9
syloc

Hey das kann dein Problem lösen.

fügen Sie einfach Android: layout_gravity = "bottom" zum Tablayout und Android: gravity = "top" zur Mautleiste hinzu.

 enter image description here

17
Tirupati Rao

  1. Entfernen Sie das Attribut app:layout_behavior="@string/appbar_scrolling_view_behavior" & app:layout_scrollFlags="scroll|enterAlways" aus Android.support.design.widget.TabLayout und fügen Sie das Attribut Android:layout_gravity="bottom" hinzu.

  2. Legen Sie auch Android.support.v7.widget.Toolbar height als 104(Toolbar+TabLayout height) fest, um sowohl Toolbar als auch TabLayout im collapsed-Zustand anzuzeigen.

Hier ist ein Arbeitsbeispiel: 

<?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:id="@+id/container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <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="256dp"
            Android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

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

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


            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                Android:layout_gravity="bottom"
                app:tabGravity="fill"
                app:tabMode="scrollable"
                style="@style/MyCustomTabLayout"/>
        </Android.support.design.widget.CollapsingToolbarLayout>
    </Android.support.design.widget.AppBarLayout>

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


    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab_map"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentRight="true"
        Android:layout_alignParentBottom="true"
        Android:layout_gravity="bottom|end"
        Android:layout_margin="@dimen/fab_margin"
        app:backgroundTint="#f44336"
        Android:src="@drawable/ic_maps_my_location" />

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

Hoffe das hilft ~

2
Ferdous Ahamed

Ich bin ein bisschen unklar, was hier erreicht werden soll.

  1. Soll die TAB beim Scrollen nicht auf und ab bewegt werden? Wenn ja, möchten Sie TabLayout außerhalb von CollapsingToolbarLayout platzieren. Alles, was Sie in CollapsingToolbarLayout einfügen, bewegt sich beim Scrollen.

Aus dem Kommentar, den Sie eingefügt haben, habe ich Ihre XML-Datei geändert, um die des YouTube-Bildschirms nachzuahmen. Die Symbolleiste befindet sich außerhalb des Koordinatorlayouts, da sie permanent fixiert ist und vom Scrollen nicht beeinflusst wird. Erwähnenswert ist "One note: all views using the scroll flag must be declared before views that do not use the flag. This ensures that all views exit from the top, leaving the fixed elements behind." Dies stammt aus dem Android-Blogpost http://Android-developers.blogspot.in/2015/05/Android-design-support-library.html . Deshalb habe ich die Symbolleiste aus dem AppBarLayout verschoben.

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

<RelativeLayout
    Android:layout_height="match_parent"
    Android:layout_width="match_parent"
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"/>

    <Android.support.design.widget.CoordinatorLayout
        Android:id="@+id/main_content"
        Android:layout_below="@id/toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">

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

            <Android.support.design.widget.TabLayout
                Android:id="@+id/tabs"
                Android:layout_width="match_parent"
                Android:layout_height="wrap_content"
                app:layout_scrollFlags="scroll|enterAlways"
                app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

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

</RelativeLayout>

Ich habe das TabLayout statisch gesetzt, aber Sie können es scrollbar machen. Wenn dies nicht das ist, wonach Sie suchen, erklären Sie bitte bildlich, was hier zu erreichen ist. Ich werde gerne helfen.

2
Henry

fügen Sie Android: layout_gravity = "bottom" zu Android.support.design.widget.TabLayout hinzu

0
Mohammad Hossein Gerami