使用ListView制作表格样式以及消息提示小图标的布局
这次主要讲一下 一 :仿微信的消息提醒的小图标的布局,二:怎样利用ListView来制作表格
不管三七二十一上图:
先说一下仿微信的消息图标提示的布局是怎样做的,其实非常简单,你可以想一想,可以肯定的是消息提示的小圆标是和她所靠近的图片重叠在一起的,那么这就简单了,什么布局可以允许控件重叠呢?答案是:FrameLayout ,FrameLayout布局只允许一个控件,之后所有的控件都是重叠在前一个控件之上的。明白了要用FrameLayout之后,我们看一下提示的小圆标都是在布局的右上角吧,很简单我们只要将小圆标的位置设为向上向右就行了,具体看下面的代码:
- <FrameLayout
- android:background="@null"
- android:layout_width="match_parent"
- android:layout_height="fill_parent"
- android:layout_weight="3.5" >
- <LinearLayout
- android:gravity="bottom|center"
- android:layout_width="match_parent"
- android:layout_height="match_parent" >
- <Button
- android:id="@+id/sure"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginRight="10dp"
- android:layout_gravity="center"
- android:background="@drawable/friendactivity_remind_normal"
- android:gravity="center"
- android:text="确定"
- android:textColor="#FFFFFF"/>
- </LinearLayout>
- <LinearLayout
- android:gravity="top|right|center"
- android:paddingRight="10.0dip"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <TextView
- android:textSize="10.0dip"
- android:textColor="@android:color/white"
- android:gravity="center"
- android:id="@+id/tvTabUnread"
- android:background="@drawable/tab_unread_bg"
- android:visibility="visible"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="2" />
- </LinearLayout>
- </FrameLayout>
上面TextView的背景图片即是小圆标,将她的父布局的位置设为向上,向右,居中就行: android:gravity="top|right|center",这样一个小圆标就显示在了一个区域的右上角了。
接下来说一下怎样用ListView来绘制表格。
第一:我们在styles.xml文件中定义两个样式,一个为:竖格和竖格之间的横线,一个为:行和行之间的横线
- <style name="list_item_seperator_layout">
- <item name="android:layout_width">fill_parent</item>
- <item name="android:layout_height">1dip</item>
- <item name="android:background">@color/color_dark_grey</item>
- </style>
- <style name="list_item_cell_seperator_layout">
- <item name="android:layout_width">1dip</item>
- <item name="android:layout_height">fill_parent</item>
- <item name="android:background">@color/color_dark_grey</item>
- </style>
第二:布局listView的Item 的布局文件:
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:orientation="horizontal" >
- <View style="@style/list_item_cell_seperator_layout"/>
- <TextView android:id="@+id/picc_task_title"
- android:layout_width="0dip"
- android:layout_height="30dp"
- android:layout_weight="1"
- android:layout_gravity="center"
- android:gravity="center"
- android:padding="2dip"/>
- <View style="@style/list_item_cell_seperator_layout"/> <TextView android:id="@+id/picc_task_content"
- android:layout_width="0dip"
- android:layout_height="30dp"
- android:layout_weight="2"
- android:layout_gravity="center"
- android:gravity="center"
- android:padding="2dip"/>
- <View style="@style/list_item_cell_seperator_layout"/>
- </LinearLayout>
这个布局文件的主要作用就是在格子和格子之间加入垂直的分割线,以形成竖格的效果
第三:设置ListViewItem之间的分割线,这个可以直接在ListView中进行设置:
- <ListView
- android:layout_weight="1"
- android:id="@+id/stock_list_view"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:scrollingCache="true"
- android:cacheColorHint="#00000000"
- android:fastScrollEnabled="true"
- android:focusable="true"
- android:divider="@color/color_dark_grey"
- android:dividerHeight="1dip"/>
ListView 中的divider就是设置分割线的颜色的,只要设置成和竖格相同的颜色和宽度就行,这样一个ListView的表格就制作成了。大致步骤就是这样了,下面我将上面那张图片
的布局文件代码贴出来。
- <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- xmlns:tools="http://schemas.android.com/tools"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- tools:context=".MainActivity" >
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="fill_parent"
- android:orientation="horizontal"
- android:layout_weight="9"
- android:background="@drawable/webviewtab_bg">
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="horizontal"
- android:layout_weight="3.5">
- <Button
- android:id="@+id/come_back"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginLeft="10dp"
- android:layout_gravity="center"
- android:background="@drawable/friendactivity_remind_normal"
- android:text="返回"
- android:gravity="center"
- android:textColor="#FFFFFF"/>
- </LinearLayout>
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical"
- android:layout_weight="2">
- </LinearLayout>
- <FrameLayout
- android:background="@null"
- android:layout_width="match_parent"
- android:layout_height="fill_parent"
- android:layout_weight="3.5" >
- <LinearLayout
- android:gravity="bottom|center"
- android:layout_width="match_parent"
- android:layout_height="match_parent" >
- <Button
- android:id="@+id/sure"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:layout_marginRight="10dp"
- android:layout_gravity="center"
- android:background="@drawable/friendactivity_remind_normal"
- android:gravity="center"
- android:text="确定"
- android:textColor="#FFFFFF"/>
- </LinearLayout>
- <LinearLayout
- android:gravity="top|right|center"
- android:paddingRight="10.0dip"
- android:layout_width="match_parent"
- android:layout_height="match_parent">
- <TextView
- android:textSize="10.0dip"
- android:textColor="@android:color/white"
- android:gravity="center"
- android:id="@+id/tvTabUnread"
- android:background="@drawable/tab_unread_bg"
- android:visibility="visible"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:text="2" />
- </LinearLayout>
- </FrameLayout>
- </LinearLayout>
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical"
- android:layout_weight="1">
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="fill_parent"
- android:orientation="horizontal"
- android:layout_weight="7">
- <TextView
- android:id="@+id/acceptTask"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_weight="6"
- android:layout_gravity="center"
- android:gravity="center"
- android:text="接受任务"/>
- <ImageView
- android:id="@+id/acceptTaskImg"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_weight="7"
- android:layout_gravity="center"
- android:src="@drawable/pull_left_icon_arrow_normal"/>
- <TextView
- android:id="@+id/processingTask"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_weight="6"
- android:gravity="center"
- android:layout_gravity="center"
- android:text="前往现场"/>
- <ImageView
- android:id="@+id/processingTaskImg"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_weight="7"
- android:layout_gravity="center"
- android:src="@drawable/pull_left_icon_arrow_normal"/>
- <TextView
- android:id="@+id/arrival"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_weight="6"
- android:gravity="center"
- android:layout_gravity="center"
- android:text="到达现场"/>
- <ImageView
- android:id="@+id/arricalImg"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_weight="7"
- android:layout_gravity="center"
- android:src="@drawable/pull_left_icon_arrow_normal"/>
- <TextView
- android:id="@+id/finish"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_gravity="center"
- android:gravity="center"
- android:layout_weight="6"
- android:text="处理完毕"/>
- </LinearLayout>
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical"
- android:layout_weight="1">
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="fill_parent"
- android:orientation="vertical"
- android:layout_weight="2">
- <LinearLayout
- android:orientation="horizontal"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content">
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- <View style="@style/list_item_seperator_layout"
- android:layout_weight="1"/>
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- </LinearLayout>
- <LinearLayout
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:orientation="vertical" >
- <LinearLayout
- android:orientation="horizontal"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_gravity="center">
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- </LinearLayout>
- <LinearLayout
- android:orientation="horizontal"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content">
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- <View style="@style/list_item_seperator_layout"
- android:layout_weight="1"/>
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- </LinearLayout>
- <LinearLayout
- android:orientation="horizontal"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_gravity="center">
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- <ListView
- android:layout_weight="1"
- android:id="@+id/stock_list_view"
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:scrollingCache="true"
- android:cacheColorHint="#00000000"
- android:fastScrollEnabled="true"
- android:focusable="true"
- android:divider="@color/color_dark_grey"
- android:dividerHeight="1dip"/>
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- </LinearLayout>
- <LinearLayout
- android:orientation="horizontal"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_gravity="center">
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- <View style="@style/list_item_seperator_layout"
- android:layout_weight="1"/>
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- </LinearLayout>
- </LinearLayout>
- </LinearLayout>
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="fill_parent"
- android:layout_weight="4"
- android:orientation="vertical">
- <LinearLayout
- android:orientation="horizontal"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content">
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- <Button
- android:id="@+id/button1"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_weight="1"
- android:text="接受任务"/>
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- </LinearLayout>
- <LinearLayout
- android:orientation="horizontal"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="10dp">
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- <Button
- android:id="@+id/button2"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:layout_weight="1"
- android:text="取消任务"/>
- <TextView
- android:layout_width="fill_parent"
- android:layout_height="fill_parent"
- android:layout_weight="20"/>
- </LinearLayout>
- </LinearLayout>
- </LinearLayout>
- </LinearLayout>
- </LinearLayout>
上面就是使用ListView制作表格的过程,我的这个XML可能view> 更多
- 文章转自:http://blog.csdn.net/zkw12358/article/details/8775415