web-dev-qa-db-ja.com

折りたたみツールバーとタブによるスクロール

scroll|exitUntilCollapsedフラグを持つCollapsingToolbarLayoutとscroll|enterAlways scrollFlagプロパティを持つTabLayoutを使用してレイアウトを作成しようとしています。基本的に、ツールバーを固定し、スクロール中にタブを表示および非表示にしたい。 https://github.com/chrisbanes/cheesesquare からcheesesquareアプリを変更しました。これが私のレイアウト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>

そして、これが結果です。

タブが正しく配置されていません。そして、彼らはenterAlwaysプロパティを気にしません。

enter image description here

androidandroid-layoutandroid-toolbarandroid-coordinatorlayout
9
syloc

こんにちは this で問題が解決するかもしれません。

Android:layout_gravity="bottom"をタブレイアウトに追加し、Android:gravity="top"をツールバーに追加するだけです。

enter image description here

18
Tirupati Rao

  1. _app:layout_behavior="@string/appbar_scrolling_view_behavior"_から属性_app:layout_scrollFlags="scroll|enterAlways"_および_Android.support.design.widget.TabLayout_を削除し、属性_Android:layout_gravity="bottom"_を追加します。

  2. また、Toolbar状態のときにTabLayoutとcollapsedの両方を表示するには、_Android.support.v7.widget.Toolbar_の高さを104(Toolbar+TabLayout height)として設定します。

これは実際の例です：

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

これがお役に立てば幸いです〜

4
Ferdous Ahamed

ここで何が達成されるのか、私には少し不明確です。

  1. スクロール中にTABを上下に動かしたくないですか？その場合、TabLayoutをCollapsingToolbarLayoutの外に置きます。 CollapsingToolbarLayout内に配置したものはすべてスクロールして移動するためです。

あなたのコメントから、YouTubeの画面を模倣するようにxmlを変更しました。ツールバーは永続的に固定され、スクロールの影響を受けないため、コーディネーターレイアウトの外側に配置されます。言及する価値のあるものは"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." Android blogpost http://Android-developers.blogspot.in/2015/05/Android-design-support-library.html から取得。これが、ツールバーをAppBarLayoutの外に移動した理由です。

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

TabLayoutを静的に配置しましたが、スクロール可能にすることができます。これがあなたが探しているものではない場合は、ここで何が達成されるかを絵で説明してください。お手伝いさせていただきます。

2
Henry

android.layout_gravity = "bottom"をAndroid.support.design.widget.TabLayoutに追加します

0
Mohammad Hossein Gerami