引用:http://www.eoeandroid.com/code/2011/1208/303.html
导读:其实我们主要实现的就是在页面的地步有一个分类,有了这个我们的用户就会感觉到很友好。
![\" src=]()
下面详细说说这个页面是怎么做出来的:
1、这个页面最下方可以看到一个TAB页签,分别是“主页”、“提及”等等,这个是一个在底部的TAB分页样式。
2、这个页面就是“主页”这个子页面,是嵌入到上面说的TAB布局中的。由3个部分组成,分别是最上面的状态栏(包含2个按钮,和一个文本区)、中间的列表、最下方的“更多”按钮(当更多按钮点击时,会加载更多数据,并且出现LOADING提示)
01 |
<?xml version="1.0" encoding="utf-8"?> |
02 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" |
03 |
android:layout_width="fill_parent" |
04 |
android:layout_height="fill_parent"> |
06 |
android:background="#ffffffff" |
07 |
android:layout_width="fill_parent" |
08 |
android:layout_height="fill_parent" |
09 |
android:orientation="vertical" /> |
11 |
android:id="@+id/head_line" |
12 |
layout="@layout/head_line" |
13 |
android:layout_width="fill_parent" |
14 |
android:layout_height="wrap_content" /> |
16 |
android:cacheColorHint="#00000000" |
17 |
android:id="@id/android:list" |
18 |
android:layout_width="fill_parent" |
19 |
android:fastScrollEnabled="false" |
20 |
android:layout_height="wrap_content" |
21 |
android:paddingTop="45.0dip" |
22 |
android:fadingEdge="none" |
23 |
android:paddingBottom="50.0dip" |
24 |
android:divider="@drawable/list_divider" |
25 |
android:clipToPadding="false" /> |
上面这段代码,就生成了列表,和顶部的状态栏。顶部的状态栏是通过<include>标签引入的
02 |
android:background="@drawable/header" |
03 |
android:layout_width="fill_parent" |
04 |
android:layout_height="wrap_content" |
05 |
xmlns:android="http://schemas.android.com/apk/res/android"> |
09 |
android:id="@+id/top_btn_left" |
10 |
android:textColor="@color/button_text_selector" |
11 |
android:background="@drawable/top_refresh_selector" |
12 |
android:layout_width="wrap_content" |
13 |
android:layout_height="wrap_content" |
14 |
android:layout_marginLeft="12.0dip" |
15 |
android:layout_alignParentLeft="true" |
16 |
android:layout_centerVertical="true" /> |
20 |
android:id="@+id/top_btn_right" |
21 |
android:textColor="@color/button_text_selector" |
22 |
android:background="@drawable/top_edit_selector" |
23 |
android:layout_width="wrap_content" |
24 |
android:layout_height="wrap_content" |
25 |
android:layout_marginRight="12.0dip" |
26 |
android:layout_alignParentRight="true" |
27 |
android:layout_centerVertical="true" /> |
31 |
android:id="@+id/top_title" android:textSize="22.0sp" |
32 |
android:textColor="@color/head_line_text" |
33 |
android:ellipsize="middle" |
34 |
android:gravity="center_horizontal" |
35 |
android:layout_width="wrap_content" |
36 |
android:layout_height="wrap_content" |
37 |
android:text="@string/user_name" |
38 |
android:singleLine="true" |
39 |
android:layout_toLeftOf="@id/top_btn_right" |
40 |
android:layout_toRightOf="@id/top_btn_left" |
41 |
android:layout_centerInParent="true" |
42 |
android:layout_alignWithParentIfMissing="true" /> |
是一个最简单的横向排列布局,就不用多介绍了 3、然后是这个FooterView是怎么添加进来的,看代码
02 |
protected void onCreate(Bundle savedInstanceState) { |
03 |
super.onCreate(savedInstanceState); |
04 |
setContentView(R.layout.home); |
14 |
private void setUpViews() { |
15 |
listView = getListView(); |
16 |
listFooter = (LinearLayout) LayoutInflater.from(this).inflate( |
17 |
R.layout.list_footer, null); |
18 |
listView.addFooterView(listFooter); |
19 |
more = (TextView) findViewById(R.id.more); |
20 |
loading = (LinearLayout) findViewById(R.id.loading); |
通过ListView.addFooterView()方法,来给列表添加一个FooterView,而这个FooterView,也是来自一个layout.xml
01 |
<?xml version="1.0" encoding="UTF-8"?> |
02 |
<LinearLayout android:layout_width="fill_parent" |
03 |
android:layout_height="wrap_content" android:minHeight="?android:listPreferredItemHeight" |
04 |
xmlns:android="http://schemas.android.com/apk/res/android"> |
05 |
<TextView android:textSize="16.0sp" android:textColor="#ff545454" |
06 |
android:gravity="center" android:id="@+id/more"android:layout_width="fill_parent" |
07 |
android:layout_height="fill_parent" android:text="@string/more" /> |
08 |
<LinearLayout android:gravity="center" |
09 |
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" /> |
这个FooterView包含一个“更多”的文本框,和一个“读取中”文本框。这里我没弄明白的是,为什么一开始默认只会显示“更多”,读取栏不会显示出来,需要
1 |
more.setOnClickListener(new OnClickListener() { |
3 |
public void onClick(View v) { |
4 |
more.setVisibility(View.GONE); |
5 |
loading.setVisibility(View.VISIBLE); |