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