本文是从国外一个网上看到的效果。感觉非常不错。就简化了一下代码。拿来用了，先看下效果图：

效果还是非常不错的，以下让我们看看是如何实现的：

看看文字来源，非常easy，是一个数组：

<?xml version="1.0" encoding="utf-8"?

>

<resources>

    <string-array name="list_content">

        <item>If I could save time in a bottle </item>

        <item>the first thing that I\'d like to do </item>

        <item>is to save every day until eternity passes away </item>

        <item>just to spend them with you </item>

        <item>If I could save time in a bottle </item>

        <item>the first thing that I\'d like to do </item>

        <item>is to save every day until eternity passes away </item>

        <item>just to spend them with you </item>

        <item>If I could make days last forever </item>

        <item>if words could make wishes come true </item>

        <item>I\'d save every day like a treasure and then </item>

        <item>again I would spend them with you  </item>

        <item>Thank you for comforting me when I\'m sad </item>

        <item>Loving me when I\'m mad </item>

        <item>Picking me up when I\'m down </item>

        <item>Thank you for being my friend and being around </item>

        <item>Teaching me the meaning of love </item>

        <item>Encouraging me when I need a shove </item>

        <item>But most of all thank you for  </item>

        <item>Loving me for who I am  </item>

    </string-array>

</resources>

布局也非常easy：

<FrameLayout 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.scrolltest.TopCenterImageView

        android:id="@+id/bg"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:src="@drawable/image" />

    <ListView

        android:id="@+id/list"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:divider="@null"/>

</FrameLayout>

由于我们是用的一个listview来显示的。所以这样做就是最简单的了。

ok以下我们来看看程序是如何的：

package com.example.scrolltest;

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.AbsListView;

import android.widget.AbsListView.LayoutParams;

import android.widget.AbsListView.OnScrollListener;

import android.widget.ArrayAdapter;

import android.widget.ListView;

public class MainActivity extends Activity {

	private TopCenterImageView bg;

	private ListView list;

	private View head;

	@Override

	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);

		setContentView(R.layout.activity_main);

		bg = (TopCenterImageView) findViewById(R.id.bg);

		list = (ListView) findViewById(R.id.list);

		list.setAdapter(new ArrayAdapter<String>(this, R.layout.list_item,

				getResources().getStringArray(R.array.list_content)));

		head = new View(this);

		head.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 700));

		list.addHeaderView(head);

		list.setOnScrollListener(new OnScrollListener() {

			@Override

			public void onScrollStateChanged(AbsListView view, int scrollState) {

			}

			@Override

			public void onScroll(AbsListView view, int firstVisibleItem,

					int visibleItemCount, int totalItemCount) {

				int top = head.getTop() / 2;

				bg.setTop(top);

			}

		});

	}

}

当中有一个TopCenterImageView。相信大家会比較疑惑，让我们来看看他是什么：

package com.example.scrolltest;

import android.content.Context;

import android.graphics.Matrix;

import android.util.AttributeSet;

import android.widget.ImageView;

/**

 * Custom view allowing an image to be displayed with a "top crop" scale type

 *

 * @author Nicolas POMEPUY

 *

 */

public class TopCenterImageView extends ImageView {

	public TopCenterImageView(Context context, AttributeSet attrs, int defStyle) {

		super(context, attrs, defStyle);

		setScaleType(ScaleType.MATRIX);

	}

	public TopCenterImageView(Context context, AttributeSet attrs) {

		super(context, attrs);

		setScaleType(ScaleType.MATRIX);

	}

	public TopCenterImageView(Context context) {

		super(context);

		setScaleType(ScaleType.MATRIX);

	}

	/**

	 * Top crop scale type

	 */

	@Override

	protected boolean setFrame(int l, int t, int r, int b) {

		if (getDrawable() == null) {

			return super.setFrame(l, t, r, b);

		}

		Matrix matrix = getImageMatrix();

		float scaleFactor = getWidth() / (float) getDrawable().getIntrinsicWidth();

		matrix.setScale(scaleFactor, scaleFactor);

		setImageMatrix(matrix);

		return super.setFrame(l, t, r, b);

	}

}

这个重写的ImageView是为了可以设置ImageView的大小。让他符合我们的背景。凝视写的非常清楚：Custom view allowing an image to be displayed with a "top crop" scale type

这时候大家再看代码就非常清楚了吧，效果还是非常赞的～

以上。