ListView设置headerview和footerview

【简介】
headerview就是通常看到的那种listview手势下滑露出上面的部分,下拉到一定位置,松手会开始请求网络数据,然后刷新listview的列表。
footerview一般就是listview手势一直上滑动到显示出最后一条数据,然后继续按住滑动到一定位置,再松手,会加载下一页的数据。
注:除ListView之外,其它像scrollview,webview的header和footer和listview基本一致。

【属性】
do平台的listview有4个属性来控制headerview和footview

* footerView        底部视图,缺省为空,如果要设置值,只能设置成source://开头的ui文件路径,比如 "source://view/1.ui"
* headerView        表头视图,缺省为空,如果要设置值,只能设置成source://开头的ui文件路径,比如 "source://view/2.ui"
* isFooterVisible        是否显示footerview,缺省为false,上滑动到底部是看不到footerview,如果设置为true,但是footerview属性为空的话,会出现一个缺省的footerview,应付一些常用列表够用了。如果需要自定义footerview,就需要设置footerView属性
* isHeaderVisible        是否显示headerview,缺省为false,和isFooterVisible原理一致。也有缺省的headerView和可自定义。

【事件】
* pull事件:对应的是headerView
事件返回的data包含2个字段
1) data.state :状态,有0,1,2 三种状态,大概过程是
                 -- 手指按下开始往下拉,一直是状态0,这个时候会触发多次pull事件。这个状态下松手就会自动复原。
                 -- 手指下拉到一定位置,会切换到状态1,这个只会触发一次。这个状态如果不松手指,而往上拉,又恢复到状态0
                 -- 在状态1下,松开手指,会切换到状态2,这个只会触发一次。这个时候松手headerview不会自动复原,需要rebound方法
                             
2)data.offset: 偏移量,就是下拉的高度值,如果自定义headerview,可以根据这个高度值变化来切换一些变化,比如不断的切换一个图片,不断的透明度变化等等。

* push事件:对应的是footerView,基本和headerview完全一样,只不过是方向相反。

【方法】
rebound:复位,也就是headerView拉下来或者footerView拉上来之后加载数据结束需要显式的调用这个方法让view复位隐藏

我们从demo上理解会更清楚一些。

先来看一个使用缺省的headerview和footerview的例子

【属性】:只需设置isFooterVisible和isHeaderVisible为true就可以了

【事件】:
* pull事件只需考虑state==2的情况就可以了,在状态2下开始加载网络数据,然后更新listview对应的listdata
这个http的下载只是模拟一个耗时的网络操作,没有其它意义

[mw_shl_code=javascript,true]listview.on("pull", function(data) {
        if (data.state == 2) {// 下拉到一定位置松手开始刷新数据
                http.download("data://temp.png");
        }
})[/mw_shl_code]

然后在http下载结束回调里更新数据,复位headerview
[mw_shl_code=javascript,true]http.on("success", function(data) {
        listview.rebound();
        listdata.addOne(newdata, 0)
        listview.refreshItems();
});[/mw_shl_code]

* push事件类似,只考虑state==2的情况,在状态2下加载新一页的数据,可以是本地的也可以是网络的

[mw_shl_code=javascript,true]listview.on("push", function(data) {
        if (data.state == 2) {
                if (!added) {
                        storage.readFile("data://do_ListView/moremovie.json", function(data, e) {
                                listdata.addData(data);
                                listview.refreshItems();
                                added = true;
                        })
                }else{
                        nf.toast("数据已加载完!")
                }

listview.rebound();
        }
})[/mw_shl_code]

源代码参考附件或者https://github.com/do-project/doDemos/tree/master/do_ListView

接下来实现一个自定义的footerview和headerview的demo

自定义headerview和footerview
【简介】
最后效果是:

* 下拉headerview的时候headerview里的imageview被一个label盖住,拉的过程中label的透明值变化,imageview逐渐清晰,最后松手的时候显示一个动画选择的imageview效果,加载数据结束后弹出一个提示框,最后再动画消隐。

* 上拉footerview比较简单,就加一个imageview的旋转动画

【属性】:比缺省的多设置2个属性
* headerView:source://do_ListView/view/custom_head_foot_view/myheader.ui

* footerView: source://do_ListView/view/custom_head_foot_view/myfooter.ui

【事件】:在缺省的基础上再触发2个自定义消息mypull和mypush
[mw_shl_code=javascript,true]listview.on("pull", function(data) {
        page.fire("mypull", data);//触发一个自定义事件给headerview
        if (data.state == 2) {// 下拉到一定位置松手开始刷新数据
                http.download("data://temp.png");
        }
})
var added = false;
listview.on("push", function(data) {
        page.fire("mypush", data);//触发一个自定义事件给footerview
        if (data.state == 2) {
                if (!added) {
                        storage.readFile("data://do_ListView/moremovie.json", function(
                                        data, e) {
                                listdata.addData(data);
                                listview.refreshItems();
                                added = true;
                        })
                } else {
                        nf.toast("数据已加载完!")
                }

listview.rebound();
        }
})[/mw_shl_code]

在myheader.ui.js里订阅这个mypull消息,在state为0,1,2三种情况下分别处理

[mw_shl_code=javascript,true]var page = sm("do_Page");
page.on("mypull", function(data) {
        if (data.state == 2) {
                anim_imageview.animate(anim);
                anim_imageview.visible = true;
                imageview.visible = false;
                label.text = "刷新中...";
        } else {
                anim_imageview.visible = false;
                imageview.visible = true;
                var alpha = 200 - 2 * Math.ceil(data.offset);
                if (alpha < 0)
                        alpha = 0;
                if (alpha < 16)
                        cover.bgColor = "0000000" + alpha.toString(16);
                else
                        cover.bgColor = "000000" + alpha.toString(16);
                if (data.state == 1) {
                        label.text = "松手开始刷新";
                } else { // (data.state==0)
                        label.text = "下拉刷新";
                }
        }
})[/mw_shl_code]

源代码参考附件或者https://github.com/do-project/doDemos/tree/master/do_ListView

时间: 2024-11-05 13:34:20

ListView设置headerview和footerview的相关文章

Android 编程下 ListView 的 HeaderView 和 FooterView 不可选择点击

在 ListView 里,HeaderView 和 FooterView 也占一行,与其他的 item 一样,可以点击,有索引,HeaderView 的索引为0.如果要使这两项不可点击,可以使用下面的方法: public void addFooterView(View v, Object data, boolean isSelectable) public void addHeaderView(View v, Object data, boolean isSelectable) 如果在 View

ListView中动态显示隐藏HeaderView和FooterView

ListView中动态显示和隐藏Header&Footer 解决思路: 直接设置HeaderView和FooterView.setVisibility(View.GONE)无效, 布局仍然存在, 需要给布局设置父布局, 然后通过控制子布局来显示隐藏布局. 1. 给最外层布局, 嵌套父布局, 通过控制子布局进而控制整个布局; 2. 给整个布局在代码中动态添加一个父布局, 然后头尾部添加父布局,可以直接操控该布局; 具体实现如下 话外篇:  1.什么是阴影效果 2.fading:渐变,衰退 fadi

Android 5.X新特性之为RecyclerView添加HeaderView和FooterView

上一节我们讲到了 Android 5.X新特性之RecyclerView基本解析及无限复用 相信大家也应该熟悉了RecyclerView的基本使用,这一节我们来学习下,为RecyclerView添加HeaderView和FooterView. 针对RecyclerView的头部和底部,官方并没有给我们提供像listView一样可以直接通过addHeaderView()/addFooterView()的方法,所以只能靠我们自己去实现了,那怎么实现呢?大家都知道RecyclerView已经为我们封装

关于ListView的HeaderView

1. 可点击/不可点击 private void addHeaderView(){ View headerView = this.mInflater.inflate(R.layout.XXX_header_info, this.listView, false); this.headerInfo = (TextView) headerView.findViewById(R.id.XXX_HeaderInfo); //this.listView.addHeaderView(headerView);

android -- 小问题 关于ListView设置了OnScrollListener之后onScrollStateChanged()和onScroll方法监听不到的问题

关于ListView设置了OnScrollListener之后onScrollStateChanged()和onScroll方法监听不到的问题: 原因: 首先OnScrollListener是焦点滚动的监听事件,需要有焦点才能响应.如果在ScrollView中内嵌了ListView之后,动态计算了ListView的高度,并予以设置高度,那么这时用户拖动界面,造成的滚动是ScrollView的滚动,而并非ListView的滚动,此时焦点是被ScrollView夺去的,ListView自然就不响应O

ListView设置快速滑动时不加载图片

设置ListView 快速滑动不加载要设置滑动监听OnScrollListener, 当快速滑动是设置标志位不请求网络 这个也属于listview优化的一步 设置监听器 1 package com.example.listview_01; 2 3 import android.widget.AbsListView; 4 import android.widget.BaseAdapter; 5 import android.widget.AbsListView.OnScrollListener;

Android下用程序的方法为ListView设置分割线Divider样式

使用XML的时候可以使用android:divider属性为ListView设置分割线的样式(颜色或者资源文件),而在Java代码中默认提供的方法 listView.setDivider() 却只支持Drawable资源文件,为此费了一点时间想解决方法,后来才发现其实很简单,android提供创建颜色资源文件的方法,于是只需要用 listView.setDivider(new ColorDrawable(color)) 就可以解决问题了. 如果设置完Divider没有效果的话,设置divider

Android之ListView设置

Android开发中,我们常使用到ListView视图,下面介绍ListView的几种使用方法. 主界面 首先,在主界面上添加几个按钮,用于界面跳转. 界面布局: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="mat

去掉UITableView HeaderView或FooterView随tableView 移动的黏性

去掉UITableView HeaderView或FooterView随tableView 移动的黏性(sticky) 控制器中实现以下方法即可: 1 - (void)scrollViewDidScroll:(UIScrollView *)scrollView { 2 3 CGFloat sectionHeaderHeight = 40; 4 5 if (scrollView.contentOffset.y<=sectionHeaderHeight&&scrollView.conte