应用程序背景中的视差效果

Kamil 发表于 Dev

卡米尔

我是Android世界的新手。我想在我的应用程序中添加一些视差背景效果。

我该怎么做？如何在Android中解决此问题？

有什么有效的方法来创建2-3层视差背景吗？Android API中是否有某些工具或类？

还是我必须在代码中“手动”修改背景图像的位置或边距？

我正在使用API级别19。

我已经尝试了解Paralloid库，但是如果没有任何解释，它太大了以至于无法理解。我是Android和Java的新手，并不熟悉所有的Layouts和其他UI对象，但是我熟悉MVC。

我开始赏金，也许有人可以逐步解释该库的工作原理。

萨加尔·瓦格玛尔

您可以执行以下操作：

在活动/片段布局文件中，指定2个ScrollView的（例如background_sv和content_sv）。

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

    <com.example.parallax.MyScrollView
        android:id="@+id/background_sv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

            <ImageView
                android:id="@+id/parallax_bg"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="..." />
    </com.example.parallax.MyScrollView>

    <com.example.parallax.MyScrollView
        android:id="@+id/content_sv"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
        </LinearLayout>
    </com.example.parallax.MyScrollView>

</RelativeLayout>

在背景高度的内容滚动视图中添加一个虚拟视图，并使其透明。现在，将滚动侦听器附加到content_sv。当内容滚动视图滚动时，调用

mBgScrollView.scrollTo(0, (int)(y /*scroll Of content_sv*/ / 2f));

现有的API不支持获取滚动事件。因此，我们需要创建一个Custom ScrollView，以提供ScrollViewListener。

package com.example.parallax;

// imports;

public class MyScrollView extends ScrollView {

    public interface ScrollViewListener {
        void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy);
    }

    private ScrollViewListener scrollViewListener = null;

    public MyScrollView(Context context) {
        super(context);
    }

    public MyScrollView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MyScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

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

这是承载内容ScrollView和后台ScrollView的活动

package com.example.parallax;

// imports;

public class ParallaxActivity extends Activity implements ScrollViewListener {

    private MyScrollView mBgScrollView;
    private MyScrollView mContentScrollView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        mBgScrollView = findViewById(R.id.background_sv);
        mContentScrollView = findViewById(R.id.content_sv);
        mContentScrollView.setOnScrollListener(this);
    }

    // this is method for onScrollListener put values according to your need
    @Override
    public void onScrollChanged(MyScrollView scrollView, int x, int y, int oldx, int oldy) {
        super.onScrollChanged(scrollView, x, y, oldx, oldy);
        // when the content scrollview will scroll by say 100px, 
        // the background scrollview will scroll by 50px. It will 
        // look like a parallax effect where the background is 
        // scrolling with a different speed then the content scrollview.
        mBgScrollView.scrollTo(0, (int)(y / 2f));
    }
}