引用:http://www.eoeandroid.com/code/2011/1208/303.html
导读:其实我们主要实现的就是在页面的地步有一个分类,有了这个我们的用户就会感觉到很友好。
下面详细说说这个页面是怎么做出来的:
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); |