33

我一直在尝试重现 5.0 版的联系人应用程序在滚动列表视图时折叠工具栏的方式。

展示所需交互的截图画廊 注意工具栏分阶段的折叠,其中显示搜索+最后一个联系人,淡出最后一个联系人,折叠最后一个联系人,折叠搜索,只留下选项卡。

到目前为止,我在 LinearLayout 中的 recyclerview 上方有一个工具栏,该工具栏用作操作栏,而不是独立的。

我不知道如何拦截recyclerview上的触摸事件并使其缩小工具栏,然后将滚动事件返回给recyclerview。我试着把整个东西放在一个滚动视图中,但是recyclerview无法正确计算它的高度并且没有显示任何内容。我尝试在 recyclerview 上覆盖 onscroll,发现它只会在滚动事件开始时通知我,并为我提供第一个可见的卡片 ID。

看起来正确的方式,但我无法为我的生活工作,是这样的:

getSupportActionBar().setHideOnContentScrollEnabled(true);

返回:

 Caused by: java.lang.UnsupportedOperationException: Hide on content scroll is not supported in this action bar configuration.

使用传统的操作栏,在其下方放置一个工具栏,并设置 hideoncontentscrollenabled 也不起作用,滚动永远不会触发操作栏上的隐藏方法。

-- 编辑 -- 我能够让 hideOnContentScrollEnabled 在带有传统操作栏的列表视图上工作,但行为与联系人应用程序不同。这显然不是他们使用的方法——它只是在列表视图上发生 fling 事件时触发操作栏上的 .hide() ,这与联系人应用程序明显不同,后者将工具栏与滚动事件一起拖动。 - /编辑 -

所以我放弃了那条路线,并将 fill_parent 放在卡片视图的高度上,并在工具栏上设置了一个折叠动画。但是如何触发它,使其跟随触摸事件,然后将触摸事件返回给recyclerview?

activity_main.xml

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    >

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:minHeight="?android:attr/actionBarSize"
        android:background="@color/colorPrimary"
        />

    <fragment android:name="me.myapplication.FragmentTab"
          android:id="@+id/tab_fragment"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />
</LinearLayout>

片段布局.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:padding="8dp"
    android:background="#eeeeee"
    >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        />

</LinearLayout>

样式.xml

...
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
...

MainActivity.java

Toolbar toolbar = (Toolbar)findViewById(R.id.toolbar);

// Disable the logo in the actionbar, as per material guidelines
toolbar.getMenu().clear();
toolbar.setTitle("My toolbar");
setSupportActionBar(toolbar);
4

7 回答 7

17

我还没有调查源代码,但这个人似乎让生活变得轻松而富有启发性。

https://github.com/ksoichiro/Android-ObservableScrollView

编辑

谷歌刚刚发布了Android 设计库。请看一下,因为它包含折叠工具栏的所有效果等等。

于 2015-01-22T16:02:06.210 回答
3

好吧,我不知道他们是怎么做到的,但是......你为什么不看看源代码呢?对我们来说幸运的是,Contacts 应用程序仍然是 Android L 上的开源应用程序(其他应用程序不如 Contacts 幸运,例如 Mail,它不再在 L 上运行;或 Keyboard,自他们的专有软件推出以来,他们不再更新谷歌键盘)。

无论如何,这是我认为您应该查看的源代码: https ://github.com/android/platform_packages_apps_contacts/blob/master/src%2Fcom%2Fandroid%2Fcontacts%2Factivities%2FActionBarAdapter.java

请注意第update(boolean skipAnimation)311 行中的方法,该方法调用animateTabHeightChange(int start, int end)(第 437 行)。

我的猜测是所有的魔法都发生在那里;-)

于 2014-11-24T18:02:56.690 回答
2

截至 2015 年 6 月,您可以通过新设计支持库的所谓CollapsingToolbarLayout来实现您想要的效果。

根据此处的示例代码,我认为:

  • 搜索卡视图是工具栏的子项
  • 未接来电卡片视图属于collapseMode属性设置为 pin的 collapsingtoolbar

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="112dp"
    android:fitsSystemWindows="true"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:minHeight="?attr/actionBarSize"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed|enterAlways">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:fitsSystemWindows="false"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin"
            app:layout_scrollFlags="scroll|enterAlways">

            <!-- Search layout -->
            <android.support.v7.widget.CardView   
            </android.support.v7.widget.CardView>

        </android.support.v7.widget.Toolbar>

        <!-- Last call card view-->
        <android.support.v7.widget.CardView
            app:layout_collapseMode="pin">               
        </android.support.v7.widget.CardView>

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

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:background="@color/primary_color"
        app:layout_scrollFlags="scroll"/>

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

</LinearLayout>

于 2015-06-15T15:11:23.010 回答
2

现在不需要第三方库!Android 正式提供库。您可以折叠工具栏并进行许多其他调整。

检查这个android-developer's blog

并且不要忘记在您的build.gradle文件中添加此依赖项。

compile 'com.android.support:design:22.2.0'

于 2015-07-16T07:45:13.310 回答
1

我发现这个库似乎可以满足您的需求:https ://github.com/kmshack/Android-ParallaxHeaderViewPager和这个https://github.com/flavienlaurent/NotBoringActionBar

您可以播放视频以查看行为:https ://www.youtube.com/watch?v=sCP-b0a1x5Y

它可能不是使用 ToolBar 执行此操作的“新”标准方式,但它可能会通过检查代码给您一个想法。似乎将 OnScrollListener 附加到滚动内容,然后触发栏大小的更改。

于 2014-11-14T15:25:53.880 回答
0

Android 的联系人应用程序没有简单的即插即用解决方案,您可以在自己的应用程序中使用。

它做了一个完整的实现,基本上就像你从头开始实现它一样。对于上下文,在查看代码之前,请记住视图的布局方式:

https://github.com/android/platform_packages_apps_contacts/blob/lollipop-release/res/layout/quickcontact_activity.xml

MultiShrinkScroller 是一个 FrameLayout 中间滚动行为,但主要的东西是在一个 LinearLayout 中,因此降低较高视图的高度将向上“滚动”较低的视图。

实现的关键文件是这个:

https://github.com/android/platform_packages_apps_contacts/blob/lollipop-release/src/com/android/contacts/widget/MultiShrinkScroller.java

public void scrollTo(int x, int y) {
    final int delta = y - getScroll();
    boolean wasFullscreen = getScrollNeededToBeFullScreen() <= 0;
    if (delta > 0) {
        scrollUp(delta);
    } else {
        scrollDown(delta);
    }
    updatePhotoTintAndDropShadow();
    updateHeaderTextSizeAndMargin();
    //... other stuff
}

private void scrollUp(int delta) {

    // Collapse higher views first
    if (getTransparentViewHeight() != 0) {
        final int originalValue = getTransparentViewHeight();
        setTransparentViewHeight(getTransparentViewHeight() - delta);
        setTransparentViewHeight(Math.max(0, getTransparentViewHeight()));
        delta -= originalValue - getTransparentViewHeight();
    }

    // Shrink toolbar as needed
    final ViewGroup.LayoutParams toolbarLayoutParams
            = mToolbar.getLayoutParams();
    if (toolbarLayoutParams.height > getFullyCompressedHeaderHeight()) {
        final int originalValue = toolbarLayoutParams.height;
        toolbarLayoutParams.height -= delta;
        toolbarLayoutParams.height = Math.max(toolbarLayoutParams.height,
                getFullyCompressedHeaderHeight());
        mToolbar.setLayoutParams(toolbarLayoutParams);
        delta -= originalValue - toolbarLayoutParams.height;
    }

    // Finally, scroll content if nothing left to shrink
    mScrollView.scrollBy(0, delta);
}

updatePhotoTintAndDropShadow();updateHeaderTextSizeAndMargin();在它折叠时处理色调和文本的变化,使其变成常规 ActionBar/ToolBar 的外观和感觉。

您可以获取 MultiShrinkScroller 文件本身并对其进行调整以供您自己使用,但现在可能有更简单的实现(包括来自 Android 设计库的那些)。

于 2016-04-21T21:57:21.560 回答
0

对我来说https://mzgreen.github.io/2015/06/23/How-to-hideshow-Toolbar-when-list-is-scrolling%28part3%29/有帮助。可在此处找到源代码:https ://github.com/mzgreen/HideOnScrollExample/tree/master/app/src/main 。

布局中的 RecycleView 应如下所示:

<android.support.v7.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="fill_vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

请注意,启动应用程序后会出现 2 个工具栏(操作栏和工具栏)。所以在你的activity.java中你应该这样写:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    // Hide ActionBar.
    supportRequestWindowFeature(WindowCompat.FEATURE_ACTION_BAR);
    getSupportActionBar().hide();
    setContentView(R.layout.your_activity_layout);
    ...

工具栏的自定义如下所示:https ://stackoverflow.com/a/26548766/2914140 。我的意思是,它没有标题和任何其他元素,因此您可以将它们添加到布局中。

于 2015-08-26T15:31:17.930 回答