Android布局实现圆角边框

最新推荐文章于 2023-08-31 18:23:16 发布
最新推荐文章于 2023-08-31 18:23:16 发布
阅读量892 收藏
点赞数
分类专栏： Android开发
本文展示了如何使用TableLayout布局实现三行两列的布局，并通过自定义形状为不同行赋予不同的视觉效果，包括顶部带圆角、不带圆角、底部带圆角的长方形布局。同时，提供了三个自定义形状的XML代码，用于创建这些独特的背景样式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

下面看下布局文件

[html] view plain copy print ?
  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>  
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#FFFFFF"
    android:orientation="vertical" >
 
    <!-- 表格布局 -->
    <TableLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:padding="10dip" >
        <!-- 表格布局：第一行 -->
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_top_corner_no_bottom_line"
            android:padding="10dip" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="10dip"
                android:text="姓名:" >
            </TextView>
            <EditText
                android:id="@+id/bankingYourNameEditText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:background="@null"
                android:singleLine="true" >
            </EditText>
        </TableRow>
        <!-- 表格布局：第二行 -->
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_no_corner_without_bottom"
            android:padding="10dip" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="10dip"
                android:text="联系电话:" >
            </TextView>
            <EditText
                android:id="@+id/bankingContactTelEditText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:background="@null"
                android:inputType="phone"
                android:singleLine="true" >
            </EditText>
        </TableRow>
        <!-- 表格布局：第三行 -->
        <TableRow
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/shape_bottom_corner_no_top_line"
            android:padding="10dip" >
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_marginRight="10dip"
                android:text="联系电话:" >
            </TextView>
            <EditText
                android:id="@+id/bankingContactTelEditText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:background="@null"
                android:inputType="phone"
                android:singleLine="true" >
            </EditText>
        </TableRow>
    </TableLayout>
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Button" />
 
</LinearLayout>

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

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

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

[html] view plain copy print ?
  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>  
<?xml version="1.0" encoding="UTF-8"?>
<!-- 顶部带圆角 白色背景 灰色边框 无下边框 长方体 -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
                android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />
            <stroke android:width="1dp" android:color="#ffa8abad" />
        </shape>
    </item>
    <item android:top="1dp" android:left="1dp" android:right="1dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <corners android:topLeftRadius="10dp" android:topRightRadius="10dp"
                android:bottomRightRadius="0.1dp" android:bottomLeftRadius="0.1dp" />
            <stroke android:width="1dp" android:color="#ffffffff" />
        </shape>
    </item>
</layer-list>

shape_no_corner_without_bottom.xml文件：不带圆角 白色背景 灰色边框 无下边框 长方体
[html] view plain copy print ?
  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>  
<?xml version="1.0" encoding="UTF-8"?>
<!-- 不带圆角 白色背景 灰色边框 无下边框 长方体 -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item>
        <shape>
            <solid android:color="#FFFFFF" />
            <stroke
                android:width="1dp"
                android:color="#ffa8abad" />
        </shape>
    </item>
    <item
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape>
            <solid android:color="#FFFFFF" />
            <stroke
                android:width="1dp"
                android:color="#ffffffff" />
        </shape>
    </item>
</layer-list>

shape_bottom_corner_no_top_line.xml文件：底部圆角 白色背景 灰色边框 长方体
[html] view plain copy print ?
  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>  
Android实现圆角边框 (附完整源码)
希望我的博客，能帮上你解决学习中工作中所遇到的问题
10-29 219
Android实现圆角边框 (附完整源码)
Android布局实现圆角边框(2)
最新发布
2401_84520457的博客
04-29 836
这里我希望可以帮助到大家提升进阶。Android学习PDF+架构视频+面试文档+源码笔记高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这几块的内容。非常适合近期有面试和想在技术道路上继续精进的朋友。喜欢本文的话，不妨给我点个小赞、评论区留言或者转发支持一下呗~网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。需要这份系统化学习资料的朋友，可以戳这里获取一个人可以走的很快，但一群人才能走的更远！
Android布局实现圆角边框效果
01-05
首先，在res下面新建一个文件夹drawable，在drawable下面新建三个xml文件：shape_corner_down.xml、shape_corner_up.xml和shape_corner.xml，分别是下面两个角是圆角边框，上面两个角是圆角边框，四个角全部是圆角边框。  shape_corner_down.xml： <?xml version=1.0 encoding=utf-8?> <shape xmlns:android=http://schemas.android.com/apk/res/android> <solid android:color=#0
【Android】Android布局中实现圆角边框
weixin_30784945的博客
07-07 368
设置corners_bg.xml 设置边框圆角可以在drawable-mdpi目录里定义一个xml: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid and...
Android 边框圆角
疯狂.NET
07-20 150
转自 [url]http://iaiai.iteye.com/blog/1102958[/url] 设置边框圆角可以在drawable-mdpi目录里定义一个xml: Java代码 [code="java"] [/code] 解释：solid的表示填充颜色,为了简单，这里用的是黑色。 而corners则是表示圆角，...
Android布局中实现圆角边框
Leaning_wk的专栏
06-19 980
设置corners_bg.xml 设置边框圆角可以在drawable-mdpi目录里定义一个xml:      [html]                                        android:topRightRadius="10dp"                    android:bottomR
Android编程实现圆角边框布局效果的方法
08-30
本文将通过实例形式分析Android TableLayout布局的相关属性操作和圆角边框实现技巧，帮助读者更好地理解和掌握Android编程实现圆角边框布局效果的方法。 一、TableLayout布局简介 TableLayout是一种常用的Android...
android 圆角布局
04-19 1855
android:topLeftRadius="10dip"         android:topRightRadius="10dip"         android:bottomLeftRadius="0dip"         android:bottomRightRadius="0dip"/> 使用时直接设置background就额可以了：
Android之布局转圆角
叶已初秋的博客
08-31 2198
Android自定义布局实现布局转圆角
android 布局加圆角,Android 实现一个通用的圆角布局
weixin_31151281的博客
05-26 1925
前言我们在平时的开发中，经常会遇到圆角需求，比如下图 一般的实现方法是上面的图片左上和右上设置圆角，下面的文字部分左下和右下设置圆角，而 Glide 默认是不支持指定位置设置圆角的，需要通过自定义 Transformation 实现，而 GIF 动图也是不支持圆角的。有些同学说了，加个遮罩不就行了吗？先不说会不会被视觉小姐姐喷：一个圆角都做不了，还要我给你做遮罩图！我自己本身也是无法接受这种实...
Android 圆角边框
qq_40567353的博客
07-13 208
1.在drawable文件夹中新建drawable resource file2.圆角边框分三类    上圆角，下圆角和全圆角    2.1上圆角    新建shap_corner_up.xml文件    &lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;shape xmlns:android="http://schemas.android.com/...
Android 圆角边框
GreeHand_的博客
12-31 529
效果图 在drawable下自定义一个btn_yuanjiao.xml <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <stroke android:width="1dp"
Android实现圆角边框
早有蜻蜓立上头
04-12 861
设置边框圆角可以在drawable-mdpi目录里定义一个xml: <corners android:topLeftRadius="10dp" android:topRightRadius="10dp" android:bottomRightRadius="10dp"
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值