滾動時保持圖像“固定”

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

我不確定是否需要對onDraw中的圖像Matrix做一些事情並重新繪制位圖。

任何想法或其他方式，我可以完成類似於該網站的東西？

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非常有用：在瀏覽視圖時移動背景圖像