[Android实例] Android 圆角仿网页表格布局实现
因为是转过来的 排版有点乱:也可参照原帖:http://www.chxue8.com/viewthread.jsp?tid=147&extra=page%3D1
设置边框圆角可以在 drawable 目录里定义一个 xml:
<?xml version="1.0" encoding="UTF-8"?>
![2013011646C1C329AB92BBF04B532186E89AFAA4.png 2013011646C1C329AB92BBF04B532186E89AFAA4.png](http://www.eoeandroid.com/data/attachment/forum/201301/22/130706q7466h57hj7vzqhh.png)
设置边框圆角可以在 drawable 目录里定义一个 xml:
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#CDCDCD" />
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
</shape>
solid 的表示填充颜色,而 corners 则是表示圆角,注意的是这里 bottomRightRadius 是左下角而不是右下角, bottomLeftRadius 右下角。
当然上面的效果也可以像下面一样设置 , 如下 :
- <corners android:radius="5dp" />
![](http://www.chxue8.com/images/common/flashvar.png)
如果想引用这个 xml ,只需要 @drawable/corners.xml 即可 :
- android:background="@drawable/corners"
![](http://www.chxue8.com/images/common/flashvar.png)
下面开始表格部分:
思路是先铺一个大的圆角布局填充为灰色,然后为这个布局中行列分别添加背景,如:左上角背景为:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
<solid android:color="#EFEFEF" />
<corners
android:topLeftRadius="10dp"/>
</shape>
一共4个角都添加好即可。
- <RelativeLayout
- android:id="@+id/barContent"
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:orientation="vertical"
- android:paddingLeft="20dip"
- android:paddingRight="20dip"
- android:paddingTop="10dip" >
- <TableLayout
- android:layout_width="fill_parent"
- android:layout_height="302dip"
- android:background="@drawable/corners"
- android:padding="1dip"
- >
- <TableRow
- android:layout_width="fill_parent"
- android:layout_height="wrap_content" >
- <TextView
- android:layout_width="250dip"
- android:layout_height="100dip"
- android:background="@drawable/corners_top_left"
- android:gravity="center"
- android:text="收缩压(mmHg)"
- android:textColor="@color/gray2"
- android:textSize="22dip"
- android:textStyle="bold" />
- <TextView
- android:id="@+id/textView1"
- android:layout_width="731dip"
- android:layout_height="100dip"
- android:layout_marginLeft="1dip"
- android:background="@drawable/corners_top_right"
- android:gravity="center"
- android:text="163"
- android:textColor="@color/gray"
- android:textSize="22dip"
- android:textStyle="bold" />
- </TableRow>
- <TableRow
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="1dip" >
- <TextView
- android:layout_width="250dip"
- android:layout_height="100dip"
- android:background="@color/graybg2"
- android:gravity="center"
- android:text="舒张压(mmHg)"
- android:textColor="@color/gray2"
- android:textSize="22dip"
- android:textStyle="bold" />
- <TextView
- android:id="@+id/textView2"
- android:layout_width="731dip"
- android:layout_height="100dip"
- android:layout_marginLeft="1dip"
- android:background="@color/white"
- android:gravity="center"
- android:text="98"
- android:textColor="@color/gray"
- android:textSize="22dip"
- android:textStyle="bold" />
- </TableRow>
- <TableRow
- android:layout_width="fill_parent"
- android:layout_height="wrap_content"
- android:layout_marginTop="1dip">
- <TextView
- android:layout_width="250dip"
- android:layout_height="100dip"
- android:background="@drawable/corners_bottom_left"
- android:gravity="center"
- android:text="脉搏(次/分)"
- android:textColor="@color/gray2"
- android:textSize="22dip"
- android:textStyle="bold" />
- <TextView
- android:id="@+id/textView3"
- android:layout_width="731dip"
- android:layout_height="100dip"
- android:layout_marginLeft="1dip"
- android:background="@drawable/corners_bottom_right"
- android:gravity="center"
- android:text="78"
- android:textColor="@color/gray"
- android:textSize="22dip"
- android:textStyle="bold" />
- </TableRow>
- </TableLayout>
- </RelativeLayout>