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

Android

先上效果图：

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

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

2、这个页面就是“主页”这个子页面，是嵌入到上面说的TAB布局中的。由3个部分组成，分别是最上面的状态栏（包含2个按钮，和一个文本区）、中间的列表、最下方的“更多”按钮（当更多按钮点击时，会加载更多数据，并且出现LOADING提示）

1. <?xml version="1.0" encoding="utf-8"?>
2. <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent" android:layout_height="fill_parent">
4. <LinearLayout android:background="#ffffffff"
5. android:layout_width="fill_parent" android:layout_height="fill_parent"
6. android:orientation="vertical" />
7. <include android:id="@+id/head_line" layout="@layout/head_line"
8. android:layout_width="fill_parent" android:layout_height="wrap_content" />
9. <ListView android:cacheColorHint="#00000000" android:id="@id/android:list"
10. android:layout_width="fill_parent" android:fastScrollEnabled="false"
11. android:layout_height="wrap_content" android:paddingTop="45.0dip"
12. android:fadingEdge="none" android:paddingBottom="50.0dip"
13. android:divider="@drawable/list_divider" android:clipToPadding="false" />
14. </FrameLayout>

上面这段代码，就生成了列表，和顶部的状态栏。顶部的状态栏是通过<include>标签引入的

1. <RelativeLayout android:background="@drawable/header"
2. android:layout_width="fill_parent" android:layout_height="wrap_content"
3. xmlns:android="http://schemas.android.com/apk/res/android">
4. <Button android:id="@+id/top_btn_left" android:textColor="@color/button_text_selector"
5. android:background="@drawable/top_refresh_selector"
6. android:layout_width="wrap_content" android:layout_height="wrap_content"
7. android:layout_marginLeft="12.0dip" android:layout_alignParentLeft="true"
8. android:layout_centerVertical="true" />
9. <Button android:id="@+id/top_btn_right" android:textColor="@color/button_text_selector"
10. android:background="@drawable/top_edit_selector" android:layout_width="wrap_content"
11. android:layout_height="wrap_content" android:layout_marginRight="12.0dip"
12. android:layout_alignParentRight="true" android:layout_centerVertical="true" />
13. <TextView android:id="@+id/top_title" android:textSize="22.0sp"
14. android:textColor="@color/head_line_text" android:ellipsize="middle"
15. android:gravity="center_horizontal" android:layout_width="wrap_content"
16. android:layout_height="wrap_content" android:text="@string/user_name"
17. android:singleLine="true" android:layout_toLeftOf="@id/top_btn_right"
18. android:layout_toRightOf="@id/top_btn_left"
19. android:layout_centerInParent="true"
20. android:layout_alignWithParentIfMissing="true" />
21. </RelativeLayout>

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

3、然后是这个FooterView是怎么添加进来的，看代码

1. @Override
2. protected void onCreate(Bundle savedInstanceState) {
3. super.onCreate(savedInstanceState);
4. setContentView(R.layout.home);
5. setUpViews();// 设置视图
6. setUpListeners();// 设置侦听器
7. fillInitData();// 填充初始化数据
8. }
9. /**
10. * 设置视图
11. */
12. private void setUpViews() {
13. listView = getListView();// 得到ListView
14. listFooter = (LinearLayout) LayoutInflater.from(this).inflate(
15. R.layout.list_footer, null);
16. listView.addFooterView(listFooter);// 添加FooterView
17. more = (TextView) findViewById(R.id.more);
18. loading = (LinearLayout) findViewById(R.id.loading);
19. }

通过ListView.addFooterView()方法，来给列表添加一个FooterView，而这个FooterView，也是来自一个layout xml

1. <?xml version="1.0" encoding="UTF-8"?>
2. <LinearLayout android:layout_width="fill_parent"
3. android:layout_height="wrap_content" android:minHeight="?android:listPreferredItemHeight"
4. xmlns:android="http://schemas.android.com/apk/res/android">
5. <TextView android:textSize="16.0sp" android:textColor="#ff545454"
6. android:gravity="center" android:id="@+id/more" android:layout_width="fill_parent"
7. android:layout_height="fill_parent" android:text="@string/more" />
8. <LinearLayout android:gravity="center"
9. android:layout_gravity="center" android:orientation="horizontal"
10. android:id="@+id/loading" android:layout_width="fill_parent"
11. android:layout_height="fill_parent">
12. <ProgressBar android:layout_gravity="center_vertical"
13. android:id="@+id/footprogress" android:layout_width="wrap_content"
14. android:layout_height="wrap_content" android:indeterminateBehavior="repeat"
15. style="?android:progressBarStyleSmallInverse" />
16. <TextView android:textColor="#ff000000" android:gravity="left|center"
17. android:padding="3.0px" android:layout_width="wrap_content"
18. android:layout_height="wrap_content" android:text="@string/loading" />
19. </LinearLayout>
20. </LinearLayout>

这个FooterView包含一个“更多”的文本框，和一个“读取中”文本框。这里我没弄明白的是，为什么一开始默认只会显示“更多”，读取栏不会显示出来，需要

1. more.setOnClickListener(new OnClickListener() {
2. @Override
3. public void onClick(View v) {
4. more.setVisibility(View.GONE);
5. loading.setVisibility(View.VISIBLE);
6. }
7. });

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

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