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

Posted 2020-09-26 liguangsunls

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

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

看看文字来源，非常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

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

以上。