现在的位置: 首页 > 综合 > 正文

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

2014年11月19日 ⁄ 综合 ⁄ 共 9253字 ⁄ 字号 小 中 大 ⁄ 评论关闭

 

先上效果图：

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

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

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

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

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

Xml代码
复制代码 收藏代码
  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.   
  5.     <Button android:id="@+id/top_btn_left" android:textColor="@color/button_text_selector"  
  6.         android:background="@drawable/top_refresh_selector"  
  7.         android:layout_width="wrap_content" android:layout_height="wrap_content"  
  8.         android:layout_marginLeft="12.0dip" android:layout_alignParentLeft="true"  
  9.         android:layout_centerVertical="true" />  
  10.   
  11.     <Button android:id="@+id/top_btn_right" android:textColor="@color/button_text_selector"  
  12.         android:background="@drawable/top_edit_selector" android:layout_width="wrap_content"  
  13.         android:layout_height="wrap_content" android:layout_marginRight="12.0dip"  
  14.         android:layout_alignParentRight="true" android:layout_centerVertical="true" />  
  15.   
  16.     <TextView android:id="@+id/top_title" android:textSize="22.0sp"  
  17.         android:textColor="@color/head_line_text" android:ellipsize="middle"  
  18.         android:gravity="center_horizontal" android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content" android:text="@string/user_name"  
  20.         android:singleLine="true" android:layout_toLeftOf="@id/top_btn_right"  
  21.         android:layout_toRightOf="@id/top_btn_left"  
  22.         android:layout_centerInParent="true"  
  23.         android:layout_alignWithParentIfMissing="true" />  
  24.   
  25. </RelativeLayout>  

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

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

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

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

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.   
  6.     <TextView android:textSize="16.0sp" android:textColor="#ff545454"  
  7.     android:gravity="center" android:id="@+id/more" android:layout_width="fill_parent"  
  8.     android:layout_height="fill_parent" android:text="@string/more" />  
  9.   
  10.     <LinearLayout android:gravity="center"  
  11.         android:layout_gravity="center" android:orientation="horizontal"  
  12.         android:id="@+id/loading" android:layout_width="fill_parent"  
  13.         android:layout_height="fill_parent">  
  14.   
  15.         <ProgressBar android:layout_gravity="center_vertical"  
  16.             android:id="@+id/footprogress" android:layout_width="wrap_content"  
  17.             android:layout_height="wrap_content" android:indeterminateBehavior="repeat"  
  18.             style="?android:progressBarStyleSmallInverse" />  
  19.   
  20.         <TextView android:textColor="#ff000000" android:gravity="left|center"  
  21.             android:padding="3.0px" android:layout_width="wrap_content"  
  22.             android:layout_height="wrap_content" android:text="@string/loading" />  
  23.   
  24.     </LinearLayout>  
  25.   
  26. </LinearLayout>  

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

Java代码
复制代码 收藏代码
  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.         });  

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

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

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

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

返回
【上篇】
【下篇】

作者:

抱歉!评论已关闭.

返回首页

Copyright © 2013-2018 学步园  保留所有权利.
软文销售 QQ客服：2265327166 点击这里给我发消息（其他合作也可洽谈）
必威体育
必威电竞