zoukankan      html  css  js  c++  java
  • Android布局实现圆角边框

    这里用的是TableLayout布局的。先看效果图

    下面看下布局文件

    1. <?xml version="1.0" encoding="utf-8"?>  
    2. <LinearLayout xmlns:Android="http://schemas.android.com/apk/res/android"  
    3.     android:layout_width="fill_parent"  
    4.     android:layout_height="fill_parent"  
    5.     android:background="#FFFFFF"  
    6.     android:orientation="vertical" >  
    7.    
    8.     <!-- 表格布局 -->  
    9.     <TableLayout  
    10.         android:layout_width="fill_parent"  
    11.         android:layout_height="wrap_content"  
    12.         android:padding="10dip" >  
    13.         <!-- 表格布局:第一行 -->  
    14.         <TableRow  
    15.             android:layout_width="fill_parent"  
    16.             android:layout_height="wrap_content"  
    17.             android:background="@drawable/shape_top_corner_no_bottom_line"  
    18.             android:padding="10dip" >  
    19.             <TextView  
    20.                 android:layout_width="wrap_content"  
    21.                 android:layout_height="wrap_content"  
    22.                 android:layout_gravity="center_vertical"  
    23.                 android:layout_marginRight="10dip"  
    24.                 android:text="姓名:" >  
    25.             </TextView>  
    26.             <EditText  
    27.                 android:id="@+id/bankingYourNameEditText"  
    28.                 android:layout_width="wrap_content"  
    29.                 android:layout_height="wrap_content"  
    30.                 android:layout_gravity="center_vertical"  
    31.                 android:layout_weight="1"  
    32.                 android:background="@null"  
    33.                 android:singleLine="true" >  
    34.             </EditText>  
    35.         </TableRow>  
    36.         <!-- 表格布局:第二行 -->  
    37.         <TableRow  
    38.             android:layout_width="fill_parent"  
    39.             android:layout_height="wrap_content"  
    40.             android:background="@drawable/shape_no_corner_without_bottom"  
    41.             android:padding="10dip" >  
    42.             <TextView  
    43.                 android:layout_width="wrap_content"  
    44.                 android:layout_height="wrap_content"  
    45.                 android:layout_gravity="center_vertical"  
    46.                 android:layout_marginRight="10dip"  
    47.                 android:text="联系电话:" >  
    48.             </TextView>  
    49.             <EditText  
    50.                 android:id="@+id/bankingContactTelEditText"  
    51.                 android:layout_width="wrap_content"  
    52.                 android:layout_height="wrap_content"  
    53.                 android:layout_gravity="center_vertical"  
    54.                 android:layout_weight="1"  
    55.                 android:background="@null"  
    56.                 android:inputType="phone"  
    57.                 android:singleLine="true" >  
    58.             </EditText>  
    59.         </TableRow>  
    60.         <!-- 表格布局:第三行 -->  
    61.         <TableRow  
    62.             android:layout_width="fill_parent"  
    63.             android:layout_height="wrap_content"  
    64.             android:background="@drawable/shape_bottom_corner_no_top_line"  
    65.             android:padding="10dip" >  
    66.             <TextView  
    67.                 android:layout_width="wrap_content"  
    68.                 android:layout_height="wrap_content"  
    69.                 android:layout_gravity="center_vertical"  
    70.                 android:layout_marginRight="10dip"  
    71.                 android:text="联系电话:" >  
    72.             </TextView>  
    73.             <EditText  
    74.                 android:id="@+id/bankingContactTelEditText"  
    75.                 android:layout_width="wrap_content"  
    76.                 android:layout_height="wrap_content"  
    77.                 android:layout_gravity="center_vertical"  
    78.                 android:layout_weight="1"  
    79.                 android:background="@null"  
    80.                 android:inputType="phone"  
    81.                 android:singleLine="true" >  
    82.             </EditText>  
    83.         </TableRow>  
    84.     </TableLayout>  
    85.    
    86.     <Button  
    87.         android:id="@+id/button1"  
    88.         android:layout_width="wrap_content"  
    89.         android:layout_height="wrap_content"  
    90.         android:layout_gravity="center"  
    91.         android:text="Button" />  
    92.    
    93. </LinearLayout>  

    表格布局中每个TableRow表示一行,TableRow中的每个基本控件都是一列,这是一个三行两列的布局

    这里的表格背景是自定义的shape,下面分别看一下三个shape的代码。

    shape_top_corner_no_bottom_line.xml文件:顶部带圆角 白色背景 灰色边框 无下边框 长方体

    1. <?xml version="1.0" encoding="UTF-8"?>  
    2. <!-- 顶部带圆角 白色背景 灰色边框 无下边框 长方体 -->  
    3. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
    4.     <item>  
    5.         <shape>  
    6.             <solid android:color="#FFFFFF" />  
    7.             <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"  
    8.                 android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />  
    9.             <stroke android:width="1dp" android:color="#ffa8abad" />  
    10.         </shape>  
    11.     </item>  
    12.     <item android:top="1dp" android:left="1dp" android:right="1dp">  
    13.         <shape>  
    14.             <solid android:color="#FFFFFF" />  
    15.             <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"  
    16.                 android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />  
    17.             <stroke android:width="1dp" android:color="#ffffffff" />  
    18.         </shape>  
    19.     </item>  
    20. </layer-list>  

    shape_no_corner_without_bottom.xml文件:不带圆角 白色背景 灰色边框 无下边框 长方体

    1. <?xml version="1.0" encoding="UTF-8"?>  
    2. <!-- 不带圆角 白色背景 灰色边框 无下边框 长方体 -->  
    3. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >  
    4.     <item>  
    5.         <shape>  
    6.             <solid android:color="#FFFFFF" />  
    7.             <stroke  
    8.                 android:width="1dp"  
    9.                 android:color="#ffa8abad" />  
    10.         </shape>  
    11.     </item>  
    12.     <item  
    13.         android:left="1dp"  
    14.         android:right="1dp"  
    15.         android:top="1dp">  
    16.         <shape>  
    17.             <solid android:color="#FFFFFF" />  
    18.             <stroke  
    19.                 android:width="1dp"  
    20.                 android:color="#ffffffff" />  
    21.         </shape>  
    22.     </item>  
    23. </layer-list>  

    shape_bottom_corner_no_top_line.xml文件:底部圆角 白色背景 灰色边框 长方体

      1. <?xml version="1.0" encoding="UTF-8"?>  
      2. <!-- 底部圆角 白色背景 灰色边框 长方体 -->  
      3. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
      4.     <item>  
      5.         <shape>  
      6.             <solid android:color="#FFFFFF" />  
      7.             <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"  
      8.                 android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />  
      9.             <stroke android:width="1dp" android:color="#ffa8abad" />  
      10.         </shape>  
      11.     </item>  
      12.     <item android:top="1dp" android:bottom="1dp" android:left="1dp" android:right="1dp">  
      13.         <shape>  
      14.             <solid android:color="#FFFFFF" />  
      15.             <corners android:topLeftRadius="0.1dp" android:topRightRadius="0.1dp"  
      16.                 android:bottomRightRadius="10dp" android:bottomLeftRadius="10dp" />  
      17.             <stroke android:width="1dp" android:color="#ffffffff" />  
      18.         </shape>  
      19.     </item>  
      20. </layer-list>
  • 相关阅读:
    559. N叉树的最大深度
    999. 车的可用捕获量
    1051. 高度检查器
    238. 除自身以外数组的乘积
    【Go】Go语言的%d,%p,%v等占位符的使用
    【Java】commons-lang3中DateUtils类方法介绍
    【Java】时间戳与Date相互转换
    【Linux】crontab定时任务用用法
    【Java】使用Lambda排序集合
    【PBFT】拜占庭容错
  • 原文地址:https://www.cnblogs.com/taoweiji/p/3412554.html
Copyright © 2011-2022 走看看