ListView页眉页脚效果VS android背景渐变

转载 2012年03月31日 10:25:18
大家都知道,在我们调用ListView的addFooterView()方法给List增加一个页脚时,如果列表内容很多,超过了屏幕大小,那么页脚就看不到了,可我们一般想要的效果是如下图所示的,在ListView的内容超过屏幕时,页脚还在屏幕的底部。



本文将介绍上图所示的ListView效果,同时介绍一下在android中如何实现渐变效果,就像上图中的页眉页脚的背景色一样。

实现上面的效果主要使用几个RelativeLayout标签和ListView组合即可,代码如下所示:
Xml代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:orientation="vertical" android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent">  
  5.     <RelativeLayout android:id="@+id/listHeader"  
  6.         android:background="@drawable/jbshape" android:layout_alignParentTop="true"  
  7.         android:gravity="center_horizontal" android:layout_width="fill_parent"  
  8.         android:layout_height="wrap_content">  
  9.         <TextView android:text="IdeasAndroid 列表演示" android:textColor="#000000"  
  10.             android:textSize="18dip" android:layout_width="wrap_content"  
  11.             android:layout_height="wrap_content"></TextView>  
  12.     </RelativeLayout>  
  13.     <RelativeLayout android:id="@+id/listFooter"  
  14.         android:background="@drawable/jbshape" android:gravity="center_horizontal"  
  15.         android:layout_alignParentBottom="true" android:layout_width="fill_parent"  
  16.         android:layout_height="wrap_content">  
  17.         <Button android:id="@+id/prePage" android:layout_width="wrap_content"  
  18.             android:layout_height="wrap_content" android:text="上一页"  
  19.             android:layout_alignParentLeft="true"></Button>  
  20.         <Button android:layout_width="wrap_content"  
  21.             android:layout_gravity="right" android:layout_height="wrap_content"  
  22.             android:text="下一页" android:layout_toRightOf="@id/prePage"></Button>  
  23.     </RelativeLayout>  
  24.     <ListView android:id="@+id/myListView" android:layout_width="fill_parent"  
  25.         android:layout_height="fill_parent" android:layout_below="@id/listHeader"  
  26.         android:layout_above="@id/listFooter">  
  27.     </ListView>  
  28. </RelativeLayout>  

几个关键点:
1、在页眉(id为listHeader)使用属性android:layout_alignParentTop=”true”
声明页眉部分与父视图的顶部对齐。
2、在页脚(id为listFooter)使用属性android:layout_alignParentBottom=”true” 声明其与父视图的底部对齐。
3、在 ListView中使用属性android:layout_below=”@id/listHeader” android:layout_above=”@id/listFooter” 声明ListView位于listHeader的下方,位于listFooter的上方。

这样我们的页眉页脚效果就实现了。

再来看看是怎么实现渐变的?

我们在res/drawable目录下新建一个叫jbshape.xml的文件,内容如下所示:
Java代码 复制代码 收藏代码
  1. <?xml version="1.0" encoding="utf-8"?>   
  2. <shape xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:shape="rectangle">   
  4.     <gradient android:startColor="#509245" android:centerColor="#3e8532"  
  5.         android:endColor="#509245" android:type="linear" android:angle="90"  
  6.         android:centerX="0.5" android:centerY="0.5" />   
  7.     <padding android:left="7dp" android:top="7dp" android:right="7dp"  
  8.         android:bottom="7dp" />   
  9.     <corners android:radius="4dp" />   
  10. </shape>  

这里就不多讲了,相信你一看就能看懂,android:shape 配置的是图形的形式,主要包括方形、圆形等,本例中为方形。gradient节点主要配置起点颜色、终点颜色、中间点的坐标、中间点的颜色、渐变角度(90度为上下渐变,0为左右渐变),padding节点主要配置上下左右边距,corners节点配置四周园角的半径。更详细的配置参见http://www.ideasandroid.com/android/sdk/docs/guide/topics/resources/drawable-resource.html 。

使用渐变就更简单了,如第一部分代码中所示的,直接用android:background=”@drawable/jbshape” 配置背景为刚才配置的渐变图形即可。

好了,本文就介绍到这。如果还有不明白的地方请下载下面的代码,然后在本地测试一下就明白了。

代码下载:http://www.ideasandroid.com/android/demo/HeaderBottomListDemo.rar

ListView页眉页脚效果VS android背景渐变

大家都知道,在我们调用ListView的addFooterView()方法给List增加一个页脚时,如果列表内容很多,超过了屏幕大小,那么页脚就看不到了,可我们一般想要的效果是如下图所示的,在List...
  • gundumw100
  • gundumw100
  • 2017年04月10日 18:20
  • 117

ListView页眉页脚效果

大家都知道,在我们调用ListView的addFooterView()方法给List增加一个页脚时,如果列表内容很多,超过了屏幕大小,那么页脚就看不到了,可我们一般想要的效果是如下图所示的,在List...
  • yangxi_001
  • yangxi_001
  • 2013年01月05日 15:36
  • 530

Android开发之ListView页眉页脚效果VS android背景渐变

大家都知道,在我们调用ListView的addFooterView()方法给List增加一个页脚时,如果列表内容很多,超过了屏幕大小,那么页脚就看不到了,可我们一般想要的效果是如下图所示的,在List...
  • liuhanhan512
  • liuhanhan512
  • 2011年11月17日 10:47
  • 526

Android ListView页眉页脚效果

Android ListView页眉页脚效果 博客分类: Android应用开发 Androidlistview页眉页脚 大家都知道,在我们调用ListView的addFooter...
  • yaok2012
  • yaok2012
  • 2013年05月09日 22:37
  • 320

硕士论文页眉页脚设置

在进行毕业论文排版过程中,页眉页脚设置花了些时间,为日后学习工作能快速找回,在此小小总结一下,并可进行交流与参考(针对03版word) 一、页眉页脚    华南理工大学硕士学位论文的封面、英文内封...
  • wuchuanpingstone
  • wuchuanpingstone
  • 2012年04月13日 14:25
  • 9025

JavaScript IE 打印 以及如何去掉页眉页脚

        web项目中可能会经常用到javascript打印,我首先尝试用JavaScript调用WebBrower进行打印,具体实现方法网上有很多,这里简单介绍一下:       1、首先在页...
  • yaolong77
  • yaolong77
  • 2009年05月19日 14:13
  • 17322

Android UI设计--ListView的页脚(footer)的使用

有时候使用ListView显示一些数据时,希望在列表项的尾部增加一个页脚(注:不是放在屏幕的最低端),页脚会随着ListView的数量的增加而自动跟随,由于ListView在数量超过屏幕显示的数量的时...
  • bfboys
  • bfboys
  • 2016年09月22日 15:02
  • 509

打印网页去掉页眉和页脚

方式一: 如果你使用的是IE6以及以前的版本,可以使用这个方法 打开浏览器文件->页面设置 在弹出的页面设置对话框中,将页眉输入框中的"&w&b页码,&p/&P"清空则标题信息就不打印了 只去...
  • yongbuyanqi88888
  • yongbuyanqi88888
  • 2015年02月10日 17:57
  • 20348

latex 页眉页脚

首先设置页码:在正文中调用页码命令\pagenumbering{数字形式}。其中数字形式可取值如下: arabic, 阿拉伯数字 roman, 小写罗马数字 Roman,大写罗马数字 alph...
  • markpen
  • markpen
  • 2014年12月29日 17:42
  • 3928

设置html页面打印的页眉页脚

如下代码简单的清空页眉,也可以自己改改注册表试试,页脚只显示页码: HKEY hkey; CString keyPath = "Software\\Microsoft\\Intern...
  • yangyang031213
  • yangyang031213
  • 2018年01月10日 14:28
  • 154
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ListView页眉页脚效果VS android背景渐变
举报原因:
原因补充:

(最多只允许输入30个字)