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

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



效果还是很不错的，下面让我们看看是如何实现的：

看看文字来源，很简单，是一个数组：

[html] view
plain copy

 print?

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

布局也很简单：

[html] view
plain copy

 print?

<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下面我们来看看程序是怎样的：

[java] view
plain copy

 print?

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，相信大家会比较疑惑，让我们来看看他是什么：

[java] view
plain copy

 print?

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

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

以上。