android - 滚动时保留图像 "pinned"

Question

例如，我正在尝试创建在此网页上看到的效果

http://www.soyuzcoffee.com/ru/home

滚动时显示为主要内容的部分正在滚动大图像(用作部分之间分隔线的图像)

我非常接近，但如果图像小于 View 的高度(图像不会填满整个屏幕)，图像会像往常一样向上滚动，直到到达顶部。我试图让它看起来像图像是静止的，而框架在它上面移动。

这是我的布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <com.example.pinnedscrollview.CustomScrollView
        android:id="@+id/scroller"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical" >

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <com.example.pinnedscrollview.PinnedImageView
                    android:id="@+id/image"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
            </FrameLayout>

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <com.example.pinnedscrollview.PinnedImageView
                    android:id="@+id/image2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
            </FrameLayout>

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <com.example.pinnedscrollview.PinnedImageView
                    android:id="@+id/image3"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
            </FrameLayout>

            <FrameLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent" >

                <com.example.pinnedscrollview.PinnedImageView
                    android:id="@+id/image4"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>
            </FrameLayout>
        </LinearLayout>
    </com.example.pinnedscrollview.CustomScrollView>

</RelativeLayout>

然后我有一个 onScrollChangedListener 每次滚动位置改变时运行这个方法

private void handleScroll(ViewGroup source, int top) {
    ViewGroup container = (ViewGroup) source.findViewById(R.id.container);
    final int count = container.getChildCount();
    for (int i = 0; i < count; i++) {
        View item = container.getChildAt(i);
        View v = null;
        if(i == 0){
            v = item.findViewById(R.id.image);
        }else if(i == 1){
            v = item.findViewById(R.id.image2);
        }else if(i == 2){
            v = item.findViewById(R.id.image3);
        }else if(i == 3){
            v = item.findViewById(R.id.image4);
        }
        source.getHitRect(mTempRect);
        if (v != null && v.getLocalVisibleRect(mTempRect)) {
            ((PinnedImageView) v).reveal(source, item.getBottom(),item.getTop());
        }
    }
}

那么这个reveal方法只是把Translation设置在Y方向

public void reveal(View scroller,int parentBottom,int parentTop) {
        float previousOffset = mOffsetY;

        if(parentTop - scroller.getScrollY() < 0){
            mOffsetY= Math.abs(parentTop - scroller.getScrollY());
        }else{
            mOffsetY = Math.min(0, scroller.getHeight() - (parentBottom - scroller.getScrollY()));
        }

        if (previousOffset != mOffsetY) {
            setTranslationY(mOffsetY);
        }
    }

我不确定是否需要在 onDraw 中对图像的 Matrix 做一些事情并重绘位图。

我有什么想法或其他方法可以完成与该网站类似的事情吗？

Answer 1

我会将所需图像设置为包含布局的背景图像。然后设置适当的透明度并将可 ScrollView 作为包含图像的父布局的子项。您甚至可以设置可 ScrollView 本身的背景。

然后您可以使用条件等来调整背景图像的框架并根据滚动位置交换图像。

<LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:layout_marginTop="48dp"
        android:background="@drawable/tmf_background"
     >
        <ImageView
            android:src="@drawable/the_lineup_header"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:paddingTop="16.5dp"
            android:contentDescription="@string/noDescription" />
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:background="@drawable/tmf_sub_header" >
            <TextView... />
            <Button ... />
            <Button... />
            <Button ... />
            <TextView ... />
        </LinearLayout>
        <ListView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:divider="@drawable/tmf_divider"
            android:background="@android:color/transparent" >       
        </ListView>
     </LinearLayout>

这是我为 True Music Festival 第一年制作的免费应用程序的 xml block 。 https://play.google.com/store/apps/details?id=com.fyresite.truemusicapp我们有一个单一的背景图像，当内容在其上滚动时保持静态。将它与您的滚动位置监听器相结合，您至少应该能够在滚动时更改背景图像。然后，您可以尝试转换背景图像以获得网站上的滚动效果。

您可能会发现这个问题很有用 Android: Moving background image while navigating through Views