滾動與摺疊式工具和選項卡

我試圖與一個CollapsingToolbarLayout具有scroll|exitUntilCollapsed標誌，並具有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屬性。

來源

2015-09-30 syloc

如果你想有你的AppBar下方的TabLayout？ –

@BhaveshPatadiya是的。在AppBar下面。 – syloc

再澄清一下，只是爲了簡化 - 預期的滾動行爲是什麼？是否正確複述：首先圖像在全高可見，然後滾動到工具欄。並進一步滾動隱藏標籤並保持工具欄？ – DmitryArc

添加機器人：layout_gravity = 「底」來android.support.design.widget.TabLayout

來源

2015-10-17 13:25:58 MHossein

我對什麼是在這裏實現有點不清楚。

您不希望TAB在滾動時上下移動嗎？如果是這樣，你想把TabLayout放在CollapsingToolbarLayout之外。因爲你放入CollapsingToolbarLayout的任何內容都將在滾動中移動。

從您提出的評論中，我修改了您的xml以模仿YouTube屏幕。該工具欄放置在協調器佈局之外，因爲它是永久固定的並且不受滾動的影響。值得一提的是"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博文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設置爲靜態，但您可以將其設置爲可滾動。如果這不是你正在尋找的東西，請善意地解釋一下這裏要做什麼。我會很樂意提供幫助。

來源

2015-10-18 14:32:59 Henry

我想要一個類似於Youtube應用的佈局。您可以檢查那裏的選項卡的行爲。另外還有一點，我想要一個工具欄中的圖像。 – syloc

我在看YouTube應用程序的MainScreen。工具欄的固定高度爲56dp，TabLayout的固定高度爲56dp。在滾動視頻列表時，他們中的任何一個都沒有變化。這裏根本沒有使用CollapsingToolbarLayout。再次回到YouTube應用程序，工具欄永遠不會改變高度（永遠不會擴大），因此在那裏放置圖像沒有意義。但是如果要在Collapsing ToolbarLayout中使用圖像，則可以引用'CheeseDetailActivity.java'及其相應的xml佈局'activity_detail.xml'。 – Henry

不是主屏幕。打開某個用戶的詳細屏幕。你可以看到那裏的標籤（主頁，視頻，播放列表...） – syloc

嘿this可能會解決您的問題。

只需將android：layout_gravity =「bottom」添加到tablayout和android：gravity =「top」到收費欄即可。

來源

2016-01-30 19:46:42

其實它關於工具欄margin_bottom –

從鏈接的例子很好，就像在這個img –

刪除屬性app:layout_behavior="@string/appbar_scrolling_view_behavior" & app:layout_scrollFlags="scroll|enterAlways"從android.support.design.widget.TabLayout，並添加屬性android:layout_gravity="bottom"。
另外設置android.support.v7.widget.Toolbar高度104(Toolbar+TabLayout height)期間collapsed狀態同時顯示Toolbar和TabLayout。

下面是一個工作示例：

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

希望這將有助於〜

來源

2017-03-23 14:53:28 FAT

滾動與摺疊式工具和選項卡

回答

相關問題