滚动图片和应用栏标题，但在Android中保留标签 [英] Scroll away picture and appbar title but leave tabs in Android
本文介绍了滚动图片和应用栏标题，但在Android中保留标签的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用应用程序支持和CoordinatorLayout.我能够用滚动时隐藏的ImageView和Toolbar实现CollapsingToolbarLayout.我在选项卡上苦苦挣扎-TabLayout不会折叠，这很好.问题是它看起来不太好-我希望它使用图片的底部作为背景.
我在CollapsingToolbarLayout中移动了TabLayout，然后它使用图片作为背景，但是有两个问题-选项卡位于屏幕顶部，并且在滚动时被隐藏.
我想实现将其放置在图片底部的效果
，当其他部分滚动开时，它将停留在屏幕顶部
布局:
<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.design.widget.AppBarLayout
android:id="@+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="4dp"
app:expandedTitleMarginEnd="64dp"
>
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/digit1_hill"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/main.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/main.tabs"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
解决方案
您需要将Toolbar告知app:layout_scrollFlags="scroll|enterAlways"，将CollapsingToolbarLayout告知app:layout_scrollFlags="scroll|exitUntilCollapsed"，而TabLayout应该具有android:layout_gravity="bottom"
尝试一下:
<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.design.widget.AppBarLayout
android:id="@+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<!-- Fit the system windows for your CollapsingToolbarLayout
also set your height to wrap_content and give image a height-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="4dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="244dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/digit1_hill"
app:layout_collapseMode="parallax"/>
<!-- Tell your toolbar to scroll|enterAlways -->
<android.support.v7.widget.Toolbar
android:id="@+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
<!-- add layout_gravity="bottom" -->
<android.support.design.widget.TabLayout
android:id="@+id/main.tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp"
android:layout_gravity="bottom"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
更新 此外，您应该切换主题或添加新主题:
<style name="NewAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Include all items from original theming -->
</style>
并隐藏标题以创建样式:
<style name="Invisible" parent="AppTheme">
<item name="android:textColor">@android:color/transparent</item>
</style>
，然后将其设置为您的collapsedTitleTextAppearance:
app:collapsedTitleTextAppearance="@style/Invisible"
I use app support and CoordinatorLayout. I was able to implement CollapsingToolbarLayout with ImageView and Toolbar that hide when scrolling. I am struggled with tabs - TabLayout is not collapsed, which is good. The problem is that it does not look nice - I want it to use bottom part of the picture as background.
I moved TabLayout within CollapsingToolbarLayout and then it uses the picture as background but there are two problems - tabs are located at top of the screen and they are hidden when scrolling.
I want to achieve the effect that it will sit at bottom of picture
and it will stay at top of the screen when other parts are scrolled away
Layout:
<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.design.widget.AppBarLayout
android:id="@+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true"
>
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_scrollFlags="scroll|enterAlways|snap"
android:fitsSystemWindows="true"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="4dp"
app:expandedTitleMarginEnd="64dp"
>
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/digit1_hill"
app:layout_collapseMode="parallax"
/>
<android.support.v7.widget.Toolbar
android:id="@+id/main.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/main.tabs"
android:layout_width="fill_parent"
android:layout_height="?attr/actionBarSize"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp"
/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
解决方案
You need to tell your Toolbar to app:layout_scrollFlags="scroll|enterAlways" and your CollapsingToolbarLayout to app:layout_scrollFlags="scroll|exitUntilCollapsed" while your TabLayout should have android:layout_gravity="bottom"
Try this:
<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.design.widget.AppBarLayout
android:id="@+id/main.appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
android:fitsSystemWindows="true">
<!-- Fit the system windows for your CollapsingToolbarLayout
also set your height to wrap_content and give image a height-->
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/main.collapsing"
android:fitsSystemWindows="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:expandedTitleMarginStart="4dp"
app:expandedTitleMarginEnd="64dp">
<ImageView
android:id="@+id/main.backdrop"
android:layout_width="match_parent"
android:layout_height="244dp"
android:scaleType="centerCrop"
android:fitsSystemWindows="true"
android:src="@drawable/digit1_hill"
app:layout_collapseMode="parallax"/>
<!-- Tell your toolbar to scroll|enterAlways -->
<android.support.v7.widget.Toolbar
android:id="@+id/main.toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll|enterAlways"/>
<!-- add layout_gravity="bottom" -->
<android.support.design.widget.TabLayout
android:id="@+id/main.tabs"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
app:tabSelectedTextColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorColor="?android:attr/textColorPrimaryInverse"
app:tabIndicatorHeight="4dp"
android:layout_gravity="bottom"/>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/dashboard.viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Update Additionally, you should switch your theme or add a new theme:
<style name="NewAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Include all items from original theming -->
</style>
and to hide the title create a style:
<style name="Invisible" parent="AppTheme">
<item name="android:textColor">@android:color/transparent</item>
</style>
and then set this as your collapsedTitleTextAppearance:
app:collapsedTitleTextAppearance="@style/Invisible"
这篇关于滚动图片和应用栏标题，但在Android中保留标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
