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="@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 -- 滑动背景、透明列表的更多相关文章
- Android Webview 背景透明
两个关键点: 1 fBarParams.format = PixelFormat.RGBA_8888; 2 mWebView.setBackgroundColor(Color.TRAN ...
- Android webview背景设置为透明无效 拖动时背景闪烁黑色
Adndroid 2.X的设置 webview是一个使用方便.功能强大的控件,但由于webview的背景颜色默认是白色,在一些场合下会显得很突兀(比如背景是黑色). 此时就想到了要把webview的背 ...
- android 自定义Dialog背景透明及显示位置设置
先贴一下显示效果图,仅作参考: 代码如下: 1.自定义Dialog public class SelectDialog extends AlertDialog{ public SelectDialog ...
- android 设置Button或者ImageButton的背景透明 半透明 透明
Button或者ImageButton的背景设为透明或者半透明 半透明<Button android:background="#e0000000" ... /> 透明 ...
- Android 设置按钮背景透明与半透明_图片背景透明
Button或者ImageButton的背景设为透明或者半透明 半透明<Button android:background="#e0000000" ... /> 透明 ...
- android 设置背景为空(透明)
在给控件设置背景时像ps那样的背景透明 在3.0以下可以使用 imageView.setBackgroundResource(android.R.id.empty); 但是这个方法在3.0以上会出现 ...
- Android设置窗体Activity背景透明
背景透明 style.xml <item name="android:windowBackground">@color/transparent</item> ...
- Android UI Design
Ref:直接拿来用!10款实用Android UI工具 Ref:Android UI设计资源 Ref:Android酷炫实用的开源框架(UI框架) Ref:Android UI 组件 Ref:Andr ...
- android 自己定义dialog并实现失去焦点(背景透明)的功能
前言:因为在项目中须要用到更新显示动画的需求,所以想到了dialog,自己定义dialog不难.网上教程非常多,可是在实现dialog背景透明的需求时,遇到了一点问题.网上的一些方法在我的机器上并没有 ...
随机推荐
- css实现步骤条
实现效果 html <ul class="steps"> <li class="active">申请完成</li> < ...
- 拉格朗日插值&&快速插值
拉格朗日插值 插值真惨 众所周知$k+1$个点可以确定一个$k$次多项式,那么插值就是通过点值还原多项式的过程. 设给出的$k+1$个点分别是$(x_0,y_0),(x_1,y_1),...,(x_k ...
- 异步调用task
异步主要用来提升程序性能,会增加系统的开销(新建一个线程去执行异步任务). 可应用于耗时长的操作,比如:访问数据库时(应用程序和数据库不在同一台服务器上).服务之间的调用(服务会分散在不同的服务器上) ...
- YUM安装MONGODB发生Error in PREIN scriptlet in rpm package mongodb-enterprise-server-4.0.2-1.el6.x86_64错误
YUM安装MONGODB发生Error in PREIN scriptlet in rpm package mongodb-enterprise-server-4.0.2-1.el6.x86_64错误 ...
- [Luogu]P3338 [ZJOI2014]力(FFT)
题目描述 给出\(n\)个数\(q_i\),给出\(F_j\)的定义如下: \(F_j = \sum_{i<j}\frac{q_i q_j}{(i-j)^2 }-\sum_{i>j}\fr ...
- LibSVM-windows
本系列文章由 @YhL_Leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50112477 官方Web: https ...
- cocos2d_x_01_环境搭建
终于效果图: Cocos2d-x-3.3 Mac 安装 下载地址: 參考文档: 在线API列表: Cocos2d-x-3.3 版本号 从配置安装到创建项目都是命令行 官网下载最新版本号Cocos2 ...
- Swift,Objective-C语言性能对照測试
原文发表于踏得网 Swift包括了非常多现代语言特性尤其是从一些脚本语言如Javascript/Ruby中汲取了营养. 此外苹果公布Swift时,使用特别选用的一些样例来宣称Swift性能对于Ojbe ...
- mysql-通过例子解释四种隔离级别
SQL标准定义了4种隔离级别,包括了一些具体规则,用来限定事务内外的哪些改变是可见的,哪些是不可见的. 低级别的隔离级一般支持更高的并发处理,并拥有更低的系统开销. 首先,我们使用 test 数据库, ...
- java中多线程知识
参考:http://www.cnblogs.com/wxd0108/p/5479442. 引 如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只 ...