Question

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

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

滚动它的部分显示为主要内容滚动大图像（图像作为部分之间的分隔符）

我非常接近，但如果图像较小，视图的高度（图像不会填满整个屏幕），图像会像往常一样向上滚动，直到它到达顶部。我试图使它看起来像图像是静止的，框架正在移动它。

这是我的布局

<?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());
        }
    }
}

然后这是只在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);
        }
    }

我不确定是否需要对Matrix中的onDraw图片执行某些操作并重新绘制位图。

我可以通过任何想法或其他方式完成与该网站类似的内容吗？

Answer 1

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

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

<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的一小部分。 https://play.google.com/store/apps/details?id=com.fyresite.truemusicapp 在那里，我们有一个单独的背景图像，当内容滚动它时，它保持静止。将它与滚动位置监听器相结合，您至少应该能够在滚动时更改背景图像。然后，您可以尝试转换背景图像以在网站上获得滚动效果。

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

保持形象＆＃34;固定＆＃34;滚动时

1 个答案: