实现谷歌日历图像视图"parallax"效果

Question

也许你们中的一些人在材料设计中尝试过新的谷歌日历。我正在寻找的是"效果"或使图像视图跟随滚动的方法。它看起来像视差效果，但我能找到的只是对标题视图具有视差效果的库。有人可以指出我正确的方向吗？谢谢！

Answer 1

AFAIK 没有这样做的库，但是几个月前我做了这样的事情，但它非常简陋，根本没有动态。

首先，您需要扩展ScrollView以便您可以获得仅对 scrollview 类可用的所有滚动位置。

像这样的东西

    public class TestScrollView extends ScrollView {
        private ScrollViewListener scrollViewListener = null;
        public interface ScrollViewListener {
            public void onScrollChanged(TestScrollView scrollView, int x, int y, int oldx, int oldy);
        }
        public TestScrollView(Context context) {
            super(context);
        }
        public TestScrollView(Context context, AttributeSet attrs) {
            super(context, attrs);
        }
        public TestScrollView(Context context, AttributeSet attrs, int defStyle) {
            super(context, attrs, defStyle);
        }
        public void setScrollViewListener(ScrollViewListener scrollViewListener) {
            this.scrollViewListener = scrollViewListener;
        }
        @Override
        protected void onScrollChanged(int x, int y, int oldx, int oldy) {
            super.onScrollChanged(x, y, oldx, oldy);
            if(scrollViewListener != null) {
                scrollViewListener.onScrollChanged(this, x, y, oldx, oldy);
            }
        }
    }

接下来，您必须扩展ImageView来完成所有视差工作。这可能对你有用，也可能对你不起作用，我不知道这是针对特定情况制作的

public class ParallaxImageView extends ImageView {
    public static final float PARALLAX_COEFFICIENT = 0.65F;
    public static final float PROPERTY_IMAGE_INV_RATIO = 0.6666667F;
    private int intrinsicHeight = -1;
    Context context;
    public ParallaxImageView(Context context) {
        super(context);
        this.context = context;
        init();
    }
    public ParallaxImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        init();
    }
    public ParallaxImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        this.context = context;
        init();
    }
    private void init(){
        post(new Runnable(){
            @Override
            public void run() {
                int i = (int)(PARALLAX_COEFFICIENT * (PROPERTY_IMAGE_INV_RATIO * getWidth()));
                getLayoutParams().height = i;
            }
        });
    }
    public void updateParallaxState()
    {
        int i = this.intrinsicHeight - getHeight();
        if (i == 0){
            return;
        }
        Rect localRect = getScreenLocation(this);
        int height = getHeight();
//        int j = getScreenSize().y + height;
//        float min = Math.min(1.0F, (localRect.top + height) / j);
//        float max = Math.max(min, 0.0F);
//        setScrollY((int)((max - 0.5F) * i));
        setScrollY((localRect.top-height-380)/8);
    }
    private Rect getScreenLocation(View paramView)
    {
        Rect localRect = new Rect();
        int[] arrayOfInt = new int[2];
        paramView.getLocationOnScreen(arrayOfInt);
        int i = getStatusbarHeight(paramView);
        localRect.set(arrayOfInt[0], arrayOfInt[1], arrayOfInt[0] + paramView.getWidth(), arrayOfInt[1] + paramView.getHeight());
        return localRect;
    }
    private int getStatusbarHeight(View paramView)
    {
        Rect localRect = new Rect();
        ((Activity)paramView.getContext()).getWindow().getDecorView().getWindowVisibleDisplayFrame(localRect);
        return localRect.top;
    }
}

然后在您的活动中实现滚动侦听器和视图

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    TestScrollView scroll = (TestScrollView)findViewById(R.id.scroll);
    scroll.setScrollViewListener(this);
    i1 = (ParallaxImageView)findViewById(R.id.image1);
    i2 = (ParallaxImageView)findViewById(R.id.image2);
}
@Override
public void onScrollChanged(TestScrollView scrollView, int x, int y, int oldx, int oldy) {
    i1.updateParallaxState();
    i2.updateParallaxState();
}

那么你的布局将看起来像这样

<com.example.parallaximageview.app.TestScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/scroll">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
         //other views
        <com.example.parallaximageview.app.ParallaxImageView
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:src="@drawable/camera_phone"
            android:scaleType="centerCrop"
            android:id="@+id/image2"/>
        //other views
    </LinearLayout>
</com.example.parallaximageview.app.TestScrollView>