Pretty UI Design For Android -- 滑動背景、透明列表

本文是從國外一個網上看到的效果，感受很不錯，就簡化了一下代碼，拿來用了，先看下效果圖：

效果仍是很不錯的，下面讓咱們看看是如何實現的：

看看文字來源，很簡單，是一個數組：

<?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>

佈局也很簡單：

<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

這時候你們再看代碼就很清楚了吧，效果仍是很讚的～

以上。