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

金鞍玉勒寻芳客，未信我庐别有春。这篇文章主要讲述Pretty UI Design For Android -- 滑动背景透明列表相关的知识，希望能为你提供帮助。
本文是从国外一个网上看到的效果。感觉非常不错。就简化了一下代码。拿来用了，先看下效果图：

文章图片

效果还是非常不错的，以下让我们看看是如何实现的：
看看文字来源，非常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=https://www.songbingjia.com/android/" @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
这时候大家再看代码就非常清楚了吧，效果还是非常赞的～

【Pretty UI Design For Android -- 滑动背景透明列表】以上。