设置 CollapsingToolbarLayout 的起始高度

Posted

技术标签:

【中文标题】设置 CollapsingToolbarLayout 的起始高度【英文标题】：Set starting height of CollapsingToolbarLayout 【发布时间】：2016-01-08 14:18:57 【问题描述】：

我希望能够在 CollapsingToolbarLayout 内的 ImageView 上滚动。那么这怎么可能，以及如何设置该图像视图的起始高度？

我的 ImageView 高度是 280p，在活动开始时我想显示 200p，然后我可以向下滚动以查看图像的其余部分。我在 WhatsApp 应用程序中看到过类似的东西。

这是一个链接，看看我想要什么：

我的代码：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_ 
    android:fitsSystemWindows="true"
    tools:context="com.example.yasser.version6.Profile">

<android.support.design.widget.AppBarLayout 
    android:id="@+id/app_bar"
    android:fitsSystemWindows="true"
    android:layout_
    android:layout_
    android:theme="@style/MyMaterialTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/toolbar_layout"
        android:fitsSystemWindows="true" 
        android:layout_
        android:layout_         
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary">

        <ImageView
            android:layout_
            android:layout_
            android:scaleType="centerCrop"
            android:src="@drawable/tof" />

        <android.support.v7.widget.Toolbar 
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            app:layout_collapseMode="pin"
            app:popupTheme="@style/MyMaterialTheme.PopupOverlay" />

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

<include
    android:id="@+id/content"
    layout="@layout/content_profile" />


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

内容配置文件代码：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    tools:showIn="@layout/activity_profile"
    android:layout_
    android:layout_
    tools:context="com.example.yasser.version6.Profile">

</android.support.v4.widget.NestedScrollView>

【问题讨论】：

您是否尝试在您的NestedScrollView 上致电scrollTo(0, 200); ？ 嗨，伙计，这个问题是否为您解决了。我有和你一样的要求。如果解决了请告诉我 【参考方案1】：

实际上 AppBarLayout 有特殊的方法来应用这样的偏移：

final int setAppBarTopBottomOffset(CoordinatorLayout coordinatorLayout, AppBarLayout appBarLayout, int newOffset, int minOffset, int maxOffset)

不幸的是它具有包私有访问级别，但我们可以通过这样的中间链调用它：

private void setAppBarOffset(int offsetPx)
    CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) mAppBarLayout.getLayoutParams();
    AppBarLayout.Behavior behavior = (AppBarLayout.Behavior) params.getBehavior();
    behavior.onNestedPreScroll(mCoordinatorLayour, mAppBarLayout, null, 0, offsetPx, new int[]0, 0);

有一点需要提一下——这个方法应该在 mAppBarLayout 已经准备好和测量之后调用。所以正确的方法是通过view的post方法调用。

mCoordinatorLayour = (CoordinatorLayout) findViewById(R.id.root_coordinator);
mAppBarLayout = (AppBarLayout) findViewById(R.id.app_bar_layout);

mAppBarLayout.post(new Runnable() 
    @Override
    public void run() 
        int heightPx = findViewById(R.id.iv_header).getHeight();
        setAppBarOffset(heightPx/2);
    
);

【讨论】：

请教一个问题：不应该是负的 offsetPx 来降低 AppBarLayout 的高度吗？ 为我工作，但是当 OffSet 改变时没有动画。 对于那些无法让它工作的人，使用新的非弃用方法behavior.onNestedPreScroll(mCoordinatorLayour, mAppBarLayout, null, 0, offsetPy, new int[]0, 0, 0);。 @OliverAdam，此代码对我不起作用。我有一个 1000 像素的位图，并且想在页面加载时只显示 100 像素的图像。您是否在这种情况下检查过这段代码？【参考方案2】：

cheesesquare 实现您的请求

这是cheesesquare中的布局

<?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_
    android:layout_
    android:fitsSystemWindows="true">

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_
            android:layout_
            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_
                android:layout_
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_
            android:layout_
            android:orientation="vertical"
            android:paddingTop="24dp">

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:layout_margin="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_
                    android:layout_>

                    <TextView
                        android:layout_
                        android:layout_
                        android:text="Info"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_
                        android:layout_
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

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

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_
                    android:layout_>

                    <TextView
                        android:layout_
                        android:layout_
                        android:text="Friends"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_
                        android:layout_
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

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

            <android.support.v7.widget.CardView
                android:layout_
                android:layout_
                android:layout_marginBottom="@dimen/card_margin"
                android:layout_marginLeft="@dimen/card_margin"
                android:layout_marginRight="@dimen/card_margin">

                <LinearLayout
                    style="@style/Widget.CardContent"
                    android:layout_
                    android:layout_>

                    <TextView
                        android:layout_
                        android:layout_
                        android:text="Related"
                        android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                    <TextView
                        android:layout_
                        android:layout_
                        android:text="@string/cheese_ipsum" />

                </LinearLayout>

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

        </LinearLayout>

    </android.support.v4.widget.NestedScrollView>

    <android.support.design.widget.FloatingActionButton
        android:layout_
        android:layout_
        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>

【讨论】：

Cheesesquare 示例应用程序未实现 OP 请求的内容。它确实实现了一个普通的 CTL。 不起作用！但是this 做预期的事情。【参考方案3】：

只需添加：

android:fitsSystemWindows="true"
app:layout_collapseMode="parallax"

到 CollapsingToolbarLayout 中的 ImageView。 你可以找到更多here。

【讨论】：

这里是扩展答案的链接：android-developers.blogspot.com.au/2015/05/… - 滚动到底部附近或在页面上搜索“视差”。

以上是关于设置 CollapsingToolbarLayout 的起始高度的主要内容，如果未能解决你的问题，请参考以下文章

短视频运营短视频剪辑 ⑤ ( 视频素材使用 | 设置插入后的视频素材属性 | 设置画面 | 设置音频 | 设置变速 | 设置动画 | 设置调节 )

SeeMusicMIDI 编辑功能 ( 速度设置 | SoundFont 音源设置 | 混响强度设置 | 混响时间设置 | 力度增益设置 | 实时 MIDI 设置 )

win10设置里的代理怎么设置

强制恢复出厂设置？

怎么设置标题样式?

HTMLHTML 注册表单案例 ① ( 表格设置 | 设置表格位置和大小 | 设置表格标题 | 表单设置 | 表格中设置单选按钮 )