查看: 452|回复: 0

[手机开发] Android编程实现圆角边框布局效果的方法

发表于 2017-12-2 09:20:54

本文实例讲述了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. <TableLayout
  9. android:layout_width="fill_parent"
  10. android:layout_height="wrap_content"
  11. android:padding="10dip" >
  12. <!-- 表格布局:第一行 -->
  13. <TableRow
  14. android:layout_width="fill_parent"
  15. android:layout_height="wrap_content"
  16. android:background="@drawable/shape_top_corner_no_bottom_line"
  17. android:padding="10dip" >
  18. <TextView
  19. android:layout_width="wrap_content"
  20. android:layout_height="wrap_content"
  21. android:layout_gravity="center_vertical"
  22. android:layout_marginRight="10dip"
  23. android:text="姓名:" >
  24. </TextView>
  25. <EditText
  26. android:id="@+id/bankingYourNameEditText"
  27. android:layout_width="wrap_content"
  28. android:layout_height="wrap_content"
  29. android:layout_gravity="center_vertical"
  30. android:layout_weight="1"
  31. android:background="@null"
  32. android:singleLine="true" >
  33. </EditText>
  34. </TableRow>
  35. <!-- 表格布局:第二行 -->
  36. <TableRow
  37. android:layout_width="fill_parent"
  38. android:layout_height="wrap_content"
  39. android:background="@drawable/shape_no_corner_without_bottom"
  40. android:padding="10dip" >
  41. <TextView
  42. android:layout_width="wrap_content"
  43. android:layout_height="wrap_content"
  44. android:layout_gravity="center_vertical"
  45. android:layout_marginRight="10dip"
  46. android:text="联系电话:" >
  47. </TextView>
  48. <EditText
  49. android:id="@+id/bankingContactTelEditText"
  50. android:layout_width="wrap_content"
  51. android:layout_height="wrap_content"
  52. android:layout_gravity="center_vertical"
  53. android:layout_weight="1"
  54. android:background="@null"
  55. android:inputType="phone"
  56. android:singleLine="true" >
  57. </EditText>
  58. </TableRow>
  59. <!-- 表格布局:第三行 -->
  60. <TableRow
  61. android:layout_width="fill_parent"
  62. android:layout_height="wrap_content"
  63. android:background="@drawable/shape_bottom_corner_no_top_line"
  64. android:padding="10dip" >
  65. <TextView
  66. android:layout_width="wrap_content"
  67. android:layout_height="wrap_content"
  68. android:layout_gravity="center_vertical"
  69. android:layout_marginRight="10dip"
  70. android:text="联系电话:" >
  71. </TextView>
  72. <EditText
  73. android:id="@+id/bankingContactTelEditText"
  74. android:layout_width="wrap_content"
  75. android:layout_height="wrap_content"
  76. android:layout_gravity="center_vertical"
  77. android:layout_weight="1"
  78. android:background="@null"
  79. android:inputType="phone"
  80. android:singleLine="true" >
  81. </EditText>
  82. </TableRow>
  83. </TableLayout>
  84. <Button
  85. android:id="@+id/button1"
  86. android:layout_width="wrap_content"
  87. android:layout_height="wrap_content"
  88. android:layout_gravity="center"
  89. android:text="Button" />
  90. </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>
复制代码

更多关于Android相关内容感兴趣的读者可查看本站专题:《Android布局layout技巧总结》、《android开发入门与进阶教程》、《Android调试技巧与常见问题解决方法汇总》、《Android基本组件用法总结》、《Android视图View技巧总结》及《Android控件用法总结》

希望本文所述对大家Android程序设计有所帮助。



回复

使用道具 举报

关闭

站长推荐上一条 /1 下一条