`

ListView页眉页脚效果

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



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

实现上面的效果主要使用几个RelativeLayout标签和ListView组合即可,代码如下所示:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:orientation="vertical" android:layout_width="fill_parent"
	android:layout_height="fill_parent">
	<RelativeLayout android:id="@+id/listHeader"
		android:background="@drawable/jbshape" android:layout_alignParentTop="true"
		android:gravity="center_horizontal" android:layout_width="fill_parent"
		android:layout_height="wrap_content">
		<TextView android:text="IdeasAndroid 列表演示" android:textColor="#000000"
			android:textSize="18dip" android:layout_width="wrap_content"
			android:layout_height="wrap_content"></TextView>
	</RelativeLayout>
	<RelativeLayout android:id="@+id/listFooter"
		android:background="@drawable/jbshape" android:gravity="center_horizontal"
		android:layout_alignParentBottom="true" android:layout_width="fill_parent"
		android:layout_height="wrap_content">
		<Button android:id="@+id/prePage" android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:text="上一页"
			android:layout_alignParentLeft="true"></Button>
		<Button android:layout_width="wrap_content"
			android:layout_gravity="right" android:layout_height="wrap_content"
			android:text="下一页" android:layout_toRightOf="@id/prePage"></Button>
	</RelativeLayout>
	<ListView android:id="@+id/myListView" android:layout_width="fill_parent"
		android:layout_height="fill_parent" android:layout_below="@id/listHeader"
		android:layout_above="@id/listFooter">
	</ListView>
</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的文件,内容如下所示:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<gradient android:startColor="#509245" android:centerColor="#3e8532"
		android:endColor="#509245" android:type="linear" android:angle="90"
		android:centerX="0.5" android:centerY="0.5" />
	<padding android:left="7dp" android:top="7dp" android:right="7dp"
		android:bottom="7dp" />
	<corners android:radius="4dp" />
</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/archives/316
  • 大小: 23 KB
分享到:
评论

相关推荐

    Qt Qml ListView上拉加载数据 Demo源码

    这个Demo源码提供了一个完整的工程示例,用于展示如何在ListView中添加上拉加载功能,同时显示列表页脚的加载状态。 首先,Qt Qml是一种声明式编程语言,它使得构建用户界面变得更加直观和高效。ListView是Qml中最...

    GridView的页眉页脚

    在用户界面设计中,为了提升用户体验,我们经常会为GridView添加页眉(Header)和页脚(Footer)来增强视觉效果和功能。这篇文档将详细讨论如何在GridView中实现页眉和页脚的渐变模糊特效。 首先,理解页眉和页脚的...

    vb6.0listview控件打印报表

    3. 报表的打印逻辑,包括数据格式化、页面布局、页眉页脚处理等。 4. 如何在JSP环境下集成VB6的报表打印功能,可能涉及接口或组件开发。 5. 代码示例和资源文件,用于学习和实践报表打印功能。 学习这个知识点可以...

    listview反弹

    android listview反弹效果(动态调整listview页脚页眉) 和上拉刷新效果通过隐藏或显示 headview 和footerview 来实现反弹,刷新!

    VB打印ListView控件中的内容

    8. **添加页眉和页脚**:根据需求,你还可以在每一页上添加页码、日期等信息,以提高文档的可读性和专业性。 9. **用户交互**:最后,通过调用PrintPreviewDialog的Show方法,让用户预览打印效果,并提供打印选项,...

    RecyclerViewHeaderFooter:带页眉和页脚的 RecyclerView

    在实际应用中,我们经常需要在列表的顶部或底部添加页眉(Header)和页脚(Footer)来展示额外的信息或者功能入口。本篇文章将详细介绍如何在RecyclerView中实现带页眉和页脚的功能。 1. **RecyclerView基础知识** ...

    AbsListViewHelper:真正简单的附加程序类,用于向Android ListView或GridView添加页眉和页脚

    AbsListViewHelper 真正简单的附加程序类,用于向Android AbsListView添加页眉和/或页脚演示版用法在您的build.gradle文件中:dependencies { compile ' com.felipecsl:abslistviewhelper:1.0.3 '} 在您的活动课中:...

    QuickReturn:将QuickReturn UI模式展示为页眉,页脚或页眉和页脚

    当内容向上或向下滚动时, QuickReturn UI模式显示或隐藏页眉或页脚。 该库支持RecyclerView , ListView和ScrollView 。 该项目中的示例包括在Google + , Facebook和Twitter中看到的QuickReturn UI模式示例。 ...

    ListView属性用法介绍android.pdf

    - `ListView`支持添加固定在顶部的页眉视图(Header)和底部的页脚视图(Footer)。 - `addHeaderView(View v)`和`addFooterView(View v)`方法分别用于添加页眉和页脚视图。这些视图在列表滚动时会始终固定位置。 ...

    打印功能的+listview+类

    用户可以根据实际需求调整页眉、页脚、字体大小和样式等,并且还可以选择是否显示预览界面,以及控制是否在每一页上打印表头等内容。这些特性使得该类在需要频繁打印 `ListView` 内容的应用程序中变得非常实用和高效...

    HVEndlessRecyclerView,页脚,页眉.zip

    《HVEndlessRecyclerView:页脚与页眉的无限滚动实现》 在移动应用开发中,尤其是在数据量庞大的情况下,为了提供良好的用户体验,我们通常会采用无限滚动(Endless Scrolling)的技术来加载数据。...

    Android_Demo

    除此之外,ListView还可以包含头视图和脚视图,这对于构建分组列表或添加页眉页脚非常有用。在Demo中,开发者可能展示了如何在Adapter的`addHeaderView()`和`addFooterView()`方法中添加这些特殊视图。 对于“工具...

    listview控件自定义扩展VB版

    4. **页面设置**:允许用户自定义打印的页面设置,如页眉、页脚、页码等。 综上所述,"listview控件自定义扩展VB版"是一个增强ListView功能的VB组件,它可能包含自定义视图模式、数据绑定、事件处理、自定义绘制...

    pinned-section-listview

    这些都是快速滚动页眉和页脚可点击的固定部分除此之外,它不会创建任何不必要的视图,布局等。它非常精简。 观看以了解PinnedSectionListView 。用法示例更换标准ListView与de.halfbit.pinnedsection....

    react-native-easy-listview-gridview:React Native中ListView和GridView的包装器库

    样本列表显示网格视图特征拉刷新到达列表视图或网格视图的末尾时加载更多内容为空时列表视图或网格视图的自定义背景自定义样式的RefreshControl 自定义页眉,页脚,分隔符等TIMEOUT加载处理程序性能优化更多即将推出...

    VB编写ListView报表打印模块及测试程序

    VB源码,报表打印,VB打印,Listview vb编程实现LISTVIEW报表的打印功能,完成页面预览、打印内容等比例缩放、自定义页码打英支持设置纸张大孝纸张类型、纸匣数量,还可以设置页面、表格和字体、标题、页眉、页脚等,...

    GridListView:已弃用,您应该改用 RecyclerView 和 GridLayoutManager。 - 列表视图的网格实现

    #GridListView 网格列表视图是一个简单的 ListView 包装器,其作用类似于网格视图,允许使用页眉/页脚和其他 ListView 特定功能,同时保持网格视图的动态。 ##用法只需使用...

    GridListViewAdapters:该库提供了GridAdapters(ListGridAdapter&CursorGridAdapter),使您可以在android.widget.ListView中以网格卡的方式绑定数据,还提供了许多与GridListView相关的功能

    特征使用户可以将网格的页眉和页脚添加为ListView。 在两个屏幕方向上都支持灵活数量的卡。 提供现成的PositionCalculator类,使用户能够在方向更改后保持正确的位置(如果两个方向的卡数不同)。 库负责回收所有...

Global site tag (gtag.js) - Google Analytics