引用: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); |
- [Android(安卓)Samples视频系列之ApiDemos] App-Activity-Intent
- Android(安卓)studio安装与调试
- Android(安卓)Button按钮点击变换字体颜色
- 新浪微博布局学习——妙用TabHost
- Android开发底部点击按钮从屏幕底部滑出面板(一)
- requires plug-in org.eclipse.wst.sse.ui
- android:ListView下拉刷新上拉加载更多(PullToRefresh框架抽取)
- Android(安卓)Cocos2d-x游戏集成友盟社会化组件分享功能
- Android(安卓)自定义控件一 带圆形进度的按钮 ControlButton2
随机推荐
-
图解RGB565、RGB555、RGB16、RGB24、RGB3
-
android中自定义SeekBar
-
2011.10.14(2)——— android 仿照微信的图
-
Android 面试题集 & 答案,助你拿到心仪 Of
-
Android操作HTTP实现与服务器通信
-
基于CentOS 6.4 使用Jenkins 进行Android
-
Android主线程与子线程之沟通
-
Android 异步加载图片分析
-
Android(安卓)AIDL 双向调用的使用及相关
-
Android[高级教程] 设计模式之七 单例模