带有滚动视差的ScrollView

来源：互联网发布：程序员欣欣编辑：程序博客网时间：2024/05/16 02:04

最近看了滚动视差的例子，写了个小demo，不能调节参数，但能够随着ScrollView的滑动而滑动。在这里要强调一下滚动视差的意思，就是背景层的滑动速度没有ScrollView的滑动速度快。通过这个小例子，我对ScrollView的理解更深了。不多说，上代码。

首先是自己定义的ScrollView:

package com.example.parallxscrollview;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

public class MyScrollView extends ScrollView{
   private ScrollChangeListener scrollChangeListener;

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

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

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

   public void setScrollChangeListener(ScrollChangeListener scrollChangeListener) {
       this.scrollChangeListener = scrollChangeListener;
   }

   @Override
        protected void onScrollChanged(int l, int t, int oldl, int oldt) {
            super.onScrollChanged(l, t, oldl, oldt);
            if (null != scrollChangeListener) {
               scrollChangeListener.scollChange(getScrollY());
            }
        }
}
在这里要把ScrollView滑动的距离即getScrollY（）传给背景。

接着就是大头了

package com.example.parallxscrollview;

import android.content.Context;
import android.util.AttributeSet;
import android.view.View.MeasureSpec;
import android.widget.FrameLayout;
import android.widget.ImageView;

public class MyFrameLayout extends FrameLayout implements ScrollChangeListener{
   private ImageView skinImageView;
   private MyScrollView myScrollView;
   private int contentHeight;
   private int minusContentHeight;
   private float diff = 0.2f;
   public MyFrameLayout(Context context, AttributeSet attrs, int defStyle) {
       super(context, attrs, defStyle);
       // TODO Auto-generated constructor stub
   }

   public MyFrameLayout(Context context, AttributeSet attrs) {
       super(context, attrs);
       // TODO Auto-generated constructor stub
   }

   public MyFrameLayout(Context context) {
       super(context);
       // TODO Auto-generated constructor stub
   }

   public void setSkin(ImageView skinImageView) {
       this.skinImageView = skinImageView;
   }

   public void setScrollView(MyScrollView myScrollView) {
       this.myScrollView = myScrollView;
   }

   @Override
   protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
       super.onMeasure(widthMeasureSpec, heightMeasureSpec);
       //取得肉容的宽度
       contentHeight = myScrollView.getChildAt(0).getMeasuredHeight();
       minusContentHeight = (int) (myScrollView.getMeasuredHeight() + (contentHeight - myScrollView.getMeasuredHeight()) *diff);
       measureChild(skinImageView, MeasureSpec.makeMeasureSpec(
                skinImageView.getMeasuredWidth(), MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(minusContentHeight, MeasureSpec.EXACTLY));
   }

   @Override
   public void scollChange(int scrollY) {
       // TODO Auto-generated method stub
       skinImageView.layout(getLeft(), (int)(-scrollY * diff), getRight(), (int)(-scrollY * diff) + minusContentHeight);
   }


}

interface ScrollChangeListener {
   public void scollChange(int scrollY);
}

在这里重点是measureChild()函数，按照我的理解，它是再一次测量child的宽、高，再layout。

接着是Activity:

package com.example.parallxscrollview;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ImageView;

public class MainActivity extends Activity {
   private ImageView skinImageView;
   private MyFrameLayout myFrameLayout;
   private MyScrollView myScrollView;
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       skinImageView = (ImageView) findViewById(R.id.skin);
       myFrameLayout = (MyFrameLayout) findViewById(R.id.myFrameLayout);
       myScrollView = (MyScrollView) findViewById(R.id.myScrollView);
       myFrameLayout.setSkin(skinImageView);
       myScrollView.setScrollChangeListener(myFrameLayout);
       myFrameLayout.setScrollView(myScrollView);
   }

   @Override
   protected void onResume() {
       super.onResume();
   }

}

再来布局：

<com.example.parallxscrollview.MyFrameLayout 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"
    android:id="@+id/myFrameLayout">

    <ImageView
        android:id="@+id/skin"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/bg_sky" />

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"/>

             <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"/>

              <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"/>

               <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"/>

                <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"/>

                 <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"/>

                  <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"/>

                   <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"/>
                    <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:text="@string/content"/>

        </LinearLayout>

    </com.example.parallxscrollview.MyScrollView>

</com.example.parallxscrollview.MyFrameLayout>

再来上传我的图片：

0 0