那些遇到过的问题

Android:使用ImageView工具栏背景的CollapsingToolbarLayout

jen*_*ymo 7 android toolbar android-collapsingtoolbarlayout

我想实现CollapsingToolbarLayout这样的:

在此输入图像描述

这里的挑战是我需要一个Toolbar以gif为背景的自定义,因此我需要一个ImageView背景作为背景Toolbar.您可以在以下xml中看到我的实现:

<?xml version="1.0" encoding="utf-8"?>
Run Code Online (Sandbox Code Playgroud) 

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:fitsSystemWindows="true"
    android:background="@color/colorAccent"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/htab_collapse_toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        app:contentScrim="@color/colorAccent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

        <!-- Container which should be scrolled parallax and contains the image gallery -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax">

            <RelativeLayout
                android:id="@+id/image_layer"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">

                <android.support.v4.view.ViewPager
                    android:id="@+id/image_gallery"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@color/colorAccent"
                    android:layout_marginTop="?attr/actionBarSize"/>

                <LinearLayout
                    android:id="@+id/image_indicators"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:padding="@dimen/defaultPadding"
                    android:gravity="center"
                    android:layout_alignParentBottom="true"/>
            </RelativeLayout>
        </LinearLayout>

        <!-- Container which contains the background for the toolbar and the toolbar itself  -->
        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:layout_collapseMode="pin">

            <ImageView
                android:id="@+id/toolbar_background"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:scaleType="centerCrop"
                android:layout_gravity="top"
                android:background="@color/colorPrimaryLight"/>

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

                <de.views.CustomTextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAllCaps="true"
                    android:textColor="#FF0000"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:layout_gravity="center"
                    android:id="@+id/toolbar_title"
                    tools:text="Restauranttitel"/>
            </android.support.v7.widget.Toolbar>
        </RelativeLayout>

        <!-- Tablayout -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:layout_gravity="bottom"
            app:tabBackground="@drawable/selected_tab_background"
            app:tabIndicatorColor="@android:color/transparent"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:tabMaxWidth="2000dp"/> <!-- we need to set this value to a very big value so that a single tab gets displayed over the full width too -->

    </android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>

<FrameLayout
    android:id="@+id/activity_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
Run Code Online (Sandbox Code Playgroud)

通过这种实现,整个视图都是滚动的,并且它们都Toolbar没有TabLayout被固定到屏幕的顶部.

我已经完成了很多教程和stackoverflow的答案

他们都对如何使用提供了很好的解释CollapsingToolbarLayout.我认为我的实现问题是RelativeLayout包含ImageView和Toolbar.当移除RelativeLayout和ImageView与设置的collapseMode Toolbar为"针"一切都按预期,同时Toolbar与Tablayout在屏幕的顶部,如果用户正在滚动被固定.但不幸的是,我需要具备ImageView以上功能toolbar才能加载GIF作为Toolbar背景.

也许你们其中一个人对如何解决这个问题有了很棒的想法.或者你还有另一个想法,我怎么能达到理想的行为？请告诉我 :)

更新:我创建了一个示例项目(https://drive.google.com/open?id=0B1aHkcAaWIA-dHBTZnUyeUt3eTQ),您可以使用该项目重现错误的滚动行为.

Fer*_*med 6

#. 在这里，我使用CollapsingToolbarLayout高度作为,和高度300dp的总和 。用于隐藏 CollapsingToolbar 。ToolbarImageSliderTabLayoutapp:titleEnabled="false"title

#. 在内部CollapsingToolbarLayout，RelativeLayout作为ViewPager（图像）和LinearLayout（指标）的容器添加。添加属性android:layout_marginTop="?attr/actionBarSize"以将其放置在下方ToolBar并添加app:layout_collapseMode="parallax"以parallax在滚动期间显示效果。

#. 下面RelativeLayout，添加了一个ImageView以GIF在其上显示图像。添加属性android:layout_height="?attr/actionBarSize"以使其高度为Toolbar高度。添加的属性app:layout_collapseMode="pin"保持ImageView固定top和visible之前或滚动后。

#. 添加Toolbar下面ImageView显示Toolbar了ImageView。由于我没有设置任何background颜色Toolbar，它将作为transparent. 像ImageView，添加app:layout_collapseMode="pin"到Toolbar到pin它始终top。添加了属性android:layout_height="104dp"，在状态下显示Tablayout在下面。这里是高度( ) +高度( )。Toolbarcollapsed104dpToolbar56dpTablayout48dp

#. 最后在TabLayout下面添加Toolbar并添加了属性android:layout_gravity="bottom"以将其显示在CollapsingToolbarLayout.

这是简化的工作 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/coordinator_layout"
    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/htab_collapse_toolbar"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:fitsSystemWindows="true"
            app:titleEnabled="false"
            app:layout_scrollFlags="scroll|exitUntilCollapsed|snap">

            <!-- Image slider container -->
            <RelativeLayout
                android:id="@+id/image_layer"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="?attr/actionBarSize"
                app:layout_collapseMode="parallax">

                <!-- ViewPager -->
                <android.support.v4.view.ViewPager
                    android:id="@+id/image_gallery"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

                <!-- Pager Indicator Container -->
                <LinearLayout
                    android:id="@+id/image_indicators"
                    android:layout_width="100dp"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_centerHorizontal="true"
                    android:layout_marginBottom="56dp"
                    android:orientation="horizontal"
                    android:padding="8dp"
                    android:gravity="center"
                    android:background="@color/black"/>
            </RelativeLayout>

            <!-- Toolbar background  :: GIF -->
            <ImageView
                android:id="@+id/toolbar_background"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:scaleType="centerCrop"
                app:layout_collapseMode="pin"
                android:src="@drawable/dummy"/>

            <!-- Toolbar -->
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="104dp"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textAllCaps="true"
                    android:textColor="#000"
                    android:textStyle="bold"
                    android:gravity="center"
                    android:maxLines="1"
                    android:ellipsize="end"
                    android:layout_gravity="top"
                    android:id="@+id/toolbar_title"
                    android:text="Restaurant Title"/>
            </android.support.v7.widget.Toolbar>

            <!-- TabLayout -->
            <android.support.design.widget.TabLayout
                android:id="@+id/tab_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                app:tabBackground="@android:color/holo_red_dark"
                app:tabIndicatorColor="@android:color/transparent"
                app:tabGravity="fill"
                app:tabMode="fixed"
                app:tabMaxWidth="2000dp"/>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <!-- Container for TAB'S Fragments -->
    <android.support.v4.view.ViewPager
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>
Run Code Online (Sandbox Code Playgroud)

输出：

在此处输入图片说明

仅供参考，如你使用自定义Toolbar有TextView，你要隐藏默认title的ActionBar。为此，请在您的以下代码中使用Activity：

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    getSupportActionBar().setTitle("");
Run Code Online (Sandbox Code Playgroud)

希望这会有所帮助~

归档时间：

查看次数：

2919 次

最近记录：

7 年，12 月 前
相关归档
如何处理ImeOptions的完成按钮点击？ 172
为什么ContentResolver.requestSync不会触发同步？ 112
将秒值转换为小时分钟秒？ 91
如何从WebView获取网页内容？ 81
如何在Android上使图像透明？ 58
使用LinearLayoutManager在RecyclerView中滚动到顶部 57
Android的涟漪效应 - 按钮的触摸反馈 - 使用XML 49
使用VideoView进行流式传输或渐进式下载视频 41
在recyclerview中检测开始滚动和结束滚动 40
如何从后台服务更新Android活动中的信息 39
难疑归档
如果__name__ =="__ main__":怎么办？ 5545
如何将Git存储库克隆到特定文件夹中？ 2083
什么时候使用自我超过$？ 1948
.gitignore和.gitkeep有什么区别？ 1776
如何解决"断点当前不会被命中.此文档没有加载任何符号." 警告？ 1456
PHP中的startsWith()和endsWith()函数 1409
在Android上旋转活动重启 1341
在现代Python中声明自定义异常的正确方法？ 1176
有条件地申请课程的最佳方式是什么？ 1172
如何在同一分支上的两个不同提交之间区分相同的文件？ 1077