首页 > 代码库 > Pretty UI Design For Android -- 滑动背景、透明列表
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=http://www.mamicode.com/"@drawable/image" />>
因为我们是用的一个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 -- 滑动背景、透明列表
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。