[Android实例] Android 圆角仿网页表格布局实现

[Android实例]
Android 圆角仿网页表格布局实现

因为是转过来的 排版有点乱：也可参照原帖：http://www.chxue8.com/viewthread.jsp?tid=147&extra=page%3D1



2013-1-22 13:07 上传
下载附件
(14.53 KB)

设置边框圆角可以在drawable目录里定义一个xml:
<?xml version="1.0" encoding="UTF-8"?>

<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" />



如果想引用这个xml，只需要@drawable/corners.xml即可:

android:background="@drawable/corners"



下面开始表格部分：

思路是先铺一个大的圆角布局填充为灰色，然后为这个布局中行列分别添加背景，如：左上角背景为：

<?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>