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

標籤：android開發   布局   imageview   design   listview   

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

效果還是很不錯的，下面讓我們看看是如何?的：

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

<?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;@Overrideprotected 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() {@Overridepublic void onScrollStateChanged(AbsListView view, int scrollState) {}@Overridepublic 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 */@Overrideprotected 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

這時候大家再看代碼就很清楚了吧，效果還是很贊的～

以上。

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