`

顶部有一排按钮,最底下还有FooterView的ListView页面

阅读更多
先上效果图:


下面详细说说这个页面是怎么做出来的:

1、这个页面最下方可以看到一个TAB页签,分别是“主页”、“提及”等等,这个是一个在底部的TAB分页样式,在上一篇博客中已经介绍了

2、这个页面就是“主页”这个子页面,是嵌入到上面说的TAB布局中的。由3个部分组成,分别是最上面的状态栏(包含2个按钮,和一个文本区)、中间的列表、最下方的“更多”按钮(当更多按钮点击时,会加载更多数据,并且出现LOADING提示)
<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="fill_parent" android:layout_height="fill_parent">

	<LinearLayout android:background="#ffffffff"
		android:layout_width="fill_parent" android:layout_height="fill_parent"
		android:orientation="vertical" />

	<include android:id="@+id/head_line" layout="@layout/head_line"
		android:layout_width="fill_parent" android:layout_height="wrap_content" />
	<ListView android:cacheColorHint="#00000000" android:id="@id/android:list"
		android:layout_width="fill_parent" android:fastScrollEnabled="false"
		android:layout_height="wrap_content" android:paddingTop="45.0dip"
		android:fadingEdge="none" android:paddingBottom="50.0dip"
		android:divider="@drawable/list_divider" android:clipToPadding="false" />

</FrameLayout>

上面这段代码,就生成了列表,和顶部的状态栏。顶部的状态栏是通过<include>标签引入的
<RelativeLayout android:background="@drawable/header"
	android:layout_width="fill_parent" android:layout_height="wrap_content"
	xmlns:android="http://schemas.android.com/apk/res/android">

	<Button android:id="@+id/top_btn_left" android:textColor="@color/button_text_selector"
		android:background="@drawable/top_refresh_selector"
		android:layout_width="wrap_content" android:layout_height="wrap_content"
		android:layout_marginLeft="12.0dip" android:layout_alignParentLeft="true"
		android:layout_centerVertical="true" />

	<Button android:id="@+id/top_btn_right" android:textColor="@color/button_text_selector"
		android:background="@drawable/top_edit_selector" android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:layout_marginRight="12.0dip"
		android:layout_alignParentRight="true" android:layout_centerVertical="true" />

	<TextView android:id="@+id/top_title" android:textSize="22.0sp"
		android:textColor="@color/head_line_text" android:ellipsize="middle"
		android:gravity="center_horizontal" android:layout_width="wrap_content"
		android:layout_height="wrap_content" android:text="@string/user_name"
		android:singleLine="true" android:layout_toLeftOf="@id/top_btn_right"
		android:layout_toRightOf="@id/top_btn_left"
		android:layout_centerInParent="true"
		android:layout_alignWithParentIfMissing="true" />

</RelativeLayout>

是一个最简单的横向排列布局,就不用多介绍了

3、然后是这个FooterView是怎么添加进来的,看代码
@Override
	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);
		setContentView(R.layout.home);
		setUpViews();// 设置视图
		setUpListeners();// 设置侦听器
		fillInitData();// 填充初始化数据

	}

	/**
	 * 设置视图
	 */
	private void setUpViews() {

		listView = getListView();// 得到ListView
		listFooter = (LinearLayout) LayoutInflater.from(this).inflate(
				R.layout.list_footer, null);
		listView.addFooterView(listFooter);// 添加FooterView
		
		more = (TextView) findViewById(R.id.more);
		loading = (LinearLayout) findViewById(R.id.loading);

	}

通过ListView.addFooterView()方法,来给列表添加一个FooterView,而这个FooterView,也是来自一个layout xml
<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout android:layout_width="fill_parent"
	android:layout_height="wrap_content" android:minHeight="?android:listPreferredItemHeight"
	xmlns:android="http://schemas.android.com/apk/res/android">

	<TextView android:textSize="16.0sp" android:textColor="#ff545454"
	android:gravity="center" android:id="@+id/more" android:layout_width="fill_parent"
	android:layout_height="fill_parent" android:text="@string/more" />

	<LinearLayout android:gravity="center"
		android:layout_gravity="center" android:orientation="horizontal"
		android:id="@+id/loading" android:layout_width="fill_parent"
		android:layout_height="fill_parent">

		<ProgressBar android:layout_gravity="center_vertical"
			android:id="@+id/footprogress" android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:indeterminateBehavior="repeat"
			style="?android:progressBarStyleSmallInverse" />

		<TextView android:textColor="#ff000000" android:gravity="left|center"
			android:padding="3.0px" android:layout_width="wrap_content"
			android:layout_height="wrap_content" android:text="@string/loading" />

	</LinearLayout>

</LinearLayout>

这个FooterView包含一个“更多”的文本框,和一个“读取中”文本框。这里我没弄明白的是,为什么一开始默认只会显示“更多”,读取栏不会显示出来,需要
more.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				more.setVisibility(View.GONE);
				loading.setVisibility(View.VISIBLE);
			}
		});

这样做,才能让“更多”按钮消失,显示出“读取中”,希望知道的朋友给我讲解一下。

通过上面的代码,就可以做出效果图里的页面了。

最后谈一下感想,我感觉android的布局还是比较难的,除了对各种View和ViewGroup对象的特性和API都要比较熟悉之外,还要对xml里各种android:xxx的属性都比较清楚,才能做出各种布局和样式的页面来。

不像CSS就比较简单,基本上只要弄明白BOX模型和组件嵌套的原理,以及float等比较特殊的处理,就可以做出想要的页面了,而且CSS的属性又比较少,大概就30多个,多用几次就十分熟练了。android光是android:xxx就有好多,我现在也没熟练掌握几个,还得多加油才行
  • 大小: 44.9 KB
分享到:
评论

相关推荐

    C# Winform ListView添加按钮列

    1. 自定义控件:你可以创建一个新的控件类,继承自`ListView`,然后在其中添加按钮列的绘制逻辑。这通常涉及到重写`OnDrawColumnHeader`和`OnDrawItem`事件处理程序。在这些方法中,你需要根据需要的位置和样式画出...

    listview内容超出屏幕高度,自动显示回到listview顶部的按钮

    为了方便用户快速回到列表顶部,通常会添加一个“返回顶部”的按钮。本文将详细讲解如何实现这一功能。 首先,我们需要在布局文件中为ListView添加一个浮动按钮(FloatingActionButton),这个按钮在ListView内容...

    listview添加图片按钮 及按钮跟ListView双监听

    在Android开发中,ListView是一种常用的UI组件,用于展示大量数据列表。在实际应用中,我们经常需要对ListView进行自定义,比如在每个列表项中添加图片和按钮,以增加交互性和功能多样性。本文将深入探讨如何在...

    listview添加按钮

    在“listview添加按钮”的场景下,我们通常会在ListView的底部或者顶部添加一个按钮,以供用户执行特定的操作,比如添加新的数据项。这个功能对于许多应用,如通讯录、任务列表或购物车等,都是至关重要的。 首先,...

    带按钮listview,添加监听

    为了增强用户体验和交互性,我们常常会在ListView的每一项(Item)中添加按钮。这样,用户可以通过点击按钮来执行特定的操作,如查看详情、删除条目等。本教程将详细介绍如何在ListView中添加按钮并实现监听事件。 ...

    带按钮的listview

    在Android开发中,ListView是一种常用的视图组件,用于展示大量数据列表。在许多应用场景中,我们可能需要在每个ListView的Item中嵌入可交互的元素,比如按钮,以实现更丰富的用户界面。本Demo就是针对这种需求,...

    Android 为ListView每个Item上面的按钮添加事件

    在Android开发中,ListView是一种常用的组件,用于展示大量的列表数据。在这个场景中,我们需要为ListView的每个Item中的按钮添加点击事件,并且在按钮被点击时能够获取到对应Item中的TextView的文本信息。以下是对...

    ListView像左滑动Item显示删除按钮

    在Android开发中,ListView是一种常用的控件,用于展示大量数据列表。为了提高用户体验,许多应用会添加滑动手势来触发特定的功能,例如模仿QQ的左滑显示删除按钮。本篇文章将详细讲解如何实现ListView中Item的左...

    左滑出现删除按钮,点击按钮删除ListView的item条目

    首先,我们需要一个ListView,它是一个可以展示多行数据的控件。每个条目通常由一个自定义的布局文件(如list_item.xml)定义,包含要显示的数据元素。在自定义布局中,我们可以预先隐藏一个用于删除操作的按钮。 ...

    Node.js-AndroidListview返回顶部快速返回顶部的功能实现详解代码

    - 添加返回顶部按钮:通常,我们会在ListView的顶部或侧边栏添加一个“顶部”按钮,点击时使ListView滚动到第一项。 - 监听事件:为按钮添加点击事件监听器,当点击事件触发时执行滚动操作。 - 滚动到顶部:使用...

    含按钮的ListView

    在“含按钮的ListView”这个场景中,我们不仅要在ListView的每一项中显示文本或图片,还要集成可点击的按钮,以便用户与列表中的每个条目进行交互。这通常涉及到对ListView的自定义适配器(BaseAdapter)以及事件监听...

    listview 实现多按钮操作

    在这个场景中,我们需要在每个ListView项中实现多按钮操作,具体是两个按钮,一个用于增加数值,另一个用于减少数值,同时还有一个只读的编辑文本显示当前的数值。这个功能在很多应用中都很常见,比如购物车、计数器...

    点击按钮为listview添加数据

    具体是:每当点一次按钮就会在ListView中添加一条信息;当点击每一条信息时,会弹出一个“编辑”和“删除”的操作,这里只实现了简单的操作,具体需要什么业务操作,直接加在里边即可运行成功。

    ListView中的头尾按钮

    `ListView中的头尾按钮`这个主题指的是如何在ListView的顶部和底部添加额外的按钮,以提供更多的交互功能。这种设计通常用于实现如加载更多、刷新等功能。下面将详细讲解如何在ListView中实现头尾按钮,并探讨相关...

    listview 顶部view联动效果

    标题"listview 顶部view联动效果"提及的是一种特殊的设计技巧,它涉及到ListView的头部视图与列表内容的交互和动画效果。这种效果通常用于实现类似下拉刷新或者顶部导航栏随滚动动态变化的效果,提升用户体验。 ...

    仿qq页面的listview

    在Android开发中,ListView是一种非常常见的控件,用于展示可滚动的列表数据。"仿qq页面的listview"指的是开发者为了实现与QQ应用类似的界面效果,对ListView进行自定义和优化,使其在视觉效果和用户体验上更加吸引...

    这是一个关于ListView中的单选按钮的DEMO。

    ListView结合单选按钮可以实现多选项中的单选功能,比如在设置界面让用户选择一个首选项。 首先,我们来详细了解一下ListView的基本概念。ListView是Android提供的一个视图容器,它可以显示一列可滚动的项目列表。...

    Android Listview 按钮点击状态错乱之解决方法

    在Android开发中,ListView是一种常用的组件,用于展示大量的列表数据。然而,在实现ListView时,我们可能会遇到一个问题,即按钮点击状态错乱。这个问题通常表现为点击一个列表项中的按钮后,显示的是其他列表项...

    lsitview未满一屏添加footerview满一屏固定下方布局

    总结,实现"lsitview未满一屏添加footerview满一屏固定下方布局"的功能,关键在于正确添加Footer View并监听ListView的滚动事件,根据内容的多少调整Footer View的位置。在实际开发中,还需要考虑兼容性和性能优化,...

    ListView的Item带单选按钮

    以下将详细讲解如何在ListView中实现带有单选按钮的Item以及响应各自事件。 1. **创建自定义Adapter** - 首先,我们需要创建一个自定义的Adapter,继承自BaseAdapter。这个Adapter将负责加载包含单选按钮的布局到...

Global site tag (gtag.js) - Google Analytics