如何在android中实现自定义可折叠工具栏?

     2023-02-22     236

关键词:

【中文标题】如何在android中实现自定义可折叠工具栏?【英文标题】:How to implement Custom Collapsable Toolbar in android? 【发布时间】:2015-11-22 12:08:36 【问题描述】:

使用 this tutorial 实现灵活空间模式(带有折叠工具栏的模式)。

我正在尝试实现与 Lollipop 联系人活动类似的效果,在开始时进入活动时,视图只是图像标题的一部分:

然后,用户可以向下滚动图像下方的布局以显示更多内容,直到达到最大值:

在我的应用程序中,我无法让它工作。

发生的情况是,当进入活动时,图像标题以它的最大尺寸呈现,即 AppBarLayout 的尺寸,就像上面的布局一样,与 Lollipop Contacts 活动中不同,其中它只显示图像的一部分。

这是设置 AppBarLayout 高度的代码(我希望屏幕宽度为最大高度):

int widthPx = getResources().getDisplayMetrics().widthPixels;
AppBarLayout appbar = (AppBarLayout)findViewById(R.id.appbar);
appbar.setLayoutParams(new CoordinatorLayout.LayoutParams(CoordinatorLayout.LayoutParams.MATCH_PARENT, widthPx));

这是设置 RecyclerView 的代码。尝试使用scrollToPosition,认为它会提升RecyclerView的视图,但它根本没有效果:

mRecyclerView = (RecyclerView) findViewById(R.id.activity_profile_bottom_recyclerview);

    mRecyclerView.setHasFixedSize(true);

    // use a linear layout manager
    mLayoutManager = new LinearLayoutManager(this);

    mRecyclerView.setLayoutManager(mLayoutManager);

    // specify an adapter (see also next example)
    if(mAdapter == null)
        mAdapter = new ProfileAdapter(this, user, inEditMode);
        mRecyclerView.setAdapter(mAdapter);
    

    mRecyclerView.scrollToPosition(mAdapter.getItemCount() - 1); // itemCount is 4

这是布局xml:

<android.support.v4.widget.DrawerLayout 
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/activity_profile"
android:layout_
android:layout_
android:fitsSystemWindows="true">

<android.support.design.widget.CoordinatorLayout
    android:layout_
    android:layout_
    android:fitsSystemWindows="true">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_ // set programatically
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_
            android:layout_
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <ImageView
                android:id="@+id/header"
                android:layout_
                android:layout_
                android:background="@drawable/header"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" />
            <android.support.v7.widget.Toolbar
                android:id="@+id/anim_toolbar"
                android:layout_
                android:layout_
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView
        android:id="@+id/activity_profile_bottom_recyclerview"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

    <include layout="@layout/navigation_view"/>
</android.support.v4.widget.DrawerLayout>

注意:如果我手动向下滚动,RecyclerView 会向下滚动并显示更多图像,它无法通过代码运行。

我认为 scrollToPosition 不是解决方案,有人知道吗?

考虑在 CoordinatorLayout 和 Appbar 部分中使用 enterAlwaysCollapsed 标志可能为 mentioned here 和 minHeight:

enterAlwaysCollapsed: 当你的视图声明了一个 minHeight 并且你 使用这个标志,你的视图只会在它的最小高度进入(即, 'collapsed'),仅在滚动时重新展开到其全高 视图已达到顶峰。

所以,我在我的工具栏上设置了 scroll|enterAlwaysCollapsed 标志,并在我的 RecyclerView 中设置了 minHeight,但这不起作用。然后我尝试将 minHeight 移动到其他布局,例如 AppBarLayout,没有任何效果。它有时只是缩小了图像而没有整个视图。

【问题讨论】:

***.com/questions/31945667/… 感谢@karaokyo,这确实有效。仍在尝试找出是否还有其他解决方案。 @karaokyo 你能看看这个吗? ***.com/questions/33069081/… Set initial height of parallax image in CollapsingToolbarLayout的可能重复 我会使用 MotionLayout 来做这些事情。请参阅https://github.com/android/views-widgets-samples/tree/master/ConstraintLayoutExamples 上的示例 【参考方案1】:

AppBarComponent提供了一个名为.setExpanded(boolean expanded)的方法,它允许你扩展你的AppBarComponent

但请记住,此方法依赖此布局作为 CoordinatorLayout 的直接子级。

您可以阅读this了解更多信息。

如果您想为自定义偏移设置动画,请尝试使用setTopAndBottomOffset(int) 方法。

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) appBar.getLayoutParams();
final AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
if (behavior != null) 
    ValueAnimator valueAnimator = ValueAnimator.ofInt();
    valueAnimator.setInterpolator(new DecelerateInterpolator());
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() 
        @Override
        public void onAnimationUpdate(ValueAnimator animation) 
            behavior.setTopAndBottomOffset((Integer) animation.getAnimatedValue());
            appBar.requestLayout();
        
    );
    valueAnimator.setIntValues(0, -900);
    valueAnimator.setDuration(400);
    valueAnimator.start();

【讨论】:

在 Android 中实现自定义 ListView

】在Android中实现自定义ListView【英文标题】:ImplementacustomListViewinAndroid【发布时间】:2016-10-2802:16:18【问题描述】:我在我的MainActivity中创建了一个listView,并为行布局创建了另一个布局文件,如下所示:问题是,我该如何实现... 查看详情

如何在 keras 中实现自定义指标?

】如何在keras中实现自定义指标?【英文标题】:howtoimplementcustommetricinkeras?【发布时间】:2016-10-0601:13:54【问题描述】:我得到这个错误:sum()得到了一个意外的关键字参数\'out\'当我运行这段代码时:importpandasaspd,numpyasnpimportkera... 查看详情

如何在 iPhone 中实现自定义相机功能? [关闭]

】如何在iPhone中实现自定义相机功能?[关闭]【英文标题】:HowtoimplementcustomcamerafunctionalityiniPhone?[closed]【发布时间】:2011-08-1605:07:13【问题描述】:我想开发一种功能,以便在iPhone应用程序中实现自定义相机功能,所以请给我... 查看详情

如何在黄瓜中实现自定义监听器?

】如何在黄瓜中实现自定义监听器?【英文标题】:Howtoimplementcustomlistenersincucumber?【发布时间】:2021-12-2214:55:47【问题描述】:如何在cucumber中实现客户监听?哪个可以记录到控制台/报告失败方法的发生?使用黄瓜4.0注意:钩... 查看详情

如何在canvas中实现自定义路径动画(代码片段)

...塞尔曲线,因此,这个动画也许是下面这个样子的:那么如何才能在canvas中实现这种动画效果呢?其实很简单,对于路径的处理svg非常在行,因此在canvas中实现自定义路径动画,我们需要借助svg的力量。创建Path制作动画前,先... 查看详情

如何在 UIImagePicker 中实现自定义“使用”和“重拍”按钮?

】如何在UIImagePicker中实现自定义“使用”和“重拍”按钮?【英文标题】:Howtoimplementcustom\'Use\'and\'Retake\'buttoninUIImagePicker?【发布时间】:2011-03-2507:06:04【问题描述】:我的意思是,我已经关闭了相机控制器pickerCam.showsCameraContro... 查看详情

如何在自定义 Spring 存储库中实现自定义方法? [复制]

】如何在自定义Spring存储库中实现自定义方法?[复制]【英文标题】:Howtoimplementcustommethodincustomspringrepository?[duplicate]【发布时间】:2016-03-2719:36:21【问题描述】:假设我想要一个方法,获取超级主客户,有id=0。我有客户类:@Ent... 查看详情

如何在 JSON.NET 中实现自定义 JsonConverter?

】如何在JSON.NET中实现自定义JsonConverter?【英文标题】:HowtoimplementcustomJsonConverterinJSON.NET?【发布时间】:2011-12-2306:02:32【问题描述】:我正在尝试扩展此处给出的JSON.net示例http://james.newtonking.com/projects/json/help/CustomCreationConverter.... 查看详情

如何在 QT 中实现自定义模型的 removeRow() 函数?

】如何在QT中实现自定义模型的removeRow()函数?【英文标题】:HowtoimplementremoveRow()functionforcustomizedmodelinQT?【发布时间】:2016-03-2404:02:48【问题描述】:我已经搜索了QT文档以供参考,但我有一些问题。这是QTdoc中的实现:boolTableMo... 查看详情

如何在 WCF 服务中实现自定义身份验证

】如何在WCF服务中实现自定义身份验证【英文标题】:HowtoImplementcustomauthenticationinWCFservice【发布时间】:2019-12-1403:26:43【问题描述】:我想为具有自定义身份验证的移动应用程序创建WCFrestful服务。第一个请求应该是登录,特别... 查看详情

在 Gradle Android 中实现自定义库时未解析类

】在GradleAndroid中实现自定义库时未解析类【英文标题】:ClassnotresolvedwhenimplementingcustomlibraryinGradleAndroid【发布时间】:2022-01-0201:32:22【问题描述】:我创建了一个android库并在Jitpack中发布。目前,我的构建在Jitpack中取得了成功... 查看详情

如何在 ASP.NET Core 中实现自定义模型验证?

】如何在ASP.NETCore中实现自定义模型验证?【英文标题】:ASP.NETCore-Createcustommodelvalidation【发布时间】:2016-07-1215:07:56【问题描述】:在以前版本的ASP.NETMVC中,向模型添加自定义验证的方法是实现IValidatableObject并实现您自己的Val... 查看详情

如何在 WordPress 中实现自定义标头的引导小部件代码?

】如何在WordPress中实现自定义标头的引导小部件代码?【英文标题】:HowtocanimplementbootstrapwidgetcodeforcustomheaderinWordPress?【发布时间】:2019-07-1703:22:25【问题描述】:我在网站上工作,我不是引导程序的专业人士。这是我的主题标... 查看详情

在 kvm 中实现自定义超级调用

...拟化非常陌生,最近我一直在尝试熟悉VMM的操作方式以及如何进行超级调用。谈到我打算在安装在我的Ubuntu桌面上的KVM中实现一个新的超级调用,然后可以从来宾环境中调用。通过这个超级调用,我打算只返回一个字符串“HelloW... 查看详情

如何在 ASP.NET MVC 中实现自定义主体和身份?

】如何在ASP.NETMVC中实现自定义主体和身份?【英文标题】:HowdoIimplementcustomPrincipalandIdentityinASP.NETMVC?【发布时间】:2011-03-1711:30:25【问题描述】:我想在经过身份验证的用户中存储额外的信息,以便我可以轻松访问它(例如User.... 查看详情

如何在 ASP.NET MVC 5 中实现自定义身份验证

】如何在ASP.NETMVC5中实现自定义身份验证【英文标题】:HowtoimplementcustomauthenticationinASP.NETMVC5【发布时间】:2015-10-1314:09:48【问题描述】:我正在开发一个ASP.NETMVC5应用程序。我有一个现有的数据库,我从中创建了我的ADO.NET实体... 查看详情

如何在 iOS 应用程序中实现自定义(平面图图像)地图..? [关闭]

】如何在iOS应用程序中实现自定义(平面图图像)地图..?[关闭]【英文标题】:HowdoIimplementacustom(floorplanimage)mapinaniOSapp..?[closed]【发布时间】:2012-03-0612:49:09【问题描述】:实现这一点的一些应用示例是..YorkdaleAppIconBrickell我是... 查看详情

我们如何在 Laravel 中实现自定义的仅 API 身份验证

】我们如何在Laravel中实现自定义的仅API身份验证【英文标题】:HowdoweimplementcustomAPI-onlyauthenticationinLaravel【发布时间】:2020-09-1019:04:42【问题描述】:这不是一个非常需要答案的问题,但欢迎提供进一步的建议和答案和建议。我... 查看详情