用 layer-list 实现圆角带分割线的表格
程序员文章站
2022-06-15 11:46:48
用 layer-list 实现圆角带分割线的表格...
1、效果图:
1、四周圆角
2、带边框
3、带分割线
2、使用layer-list 给8个模块分别定义不同的样式:
使用 可以将多个图层按照顺序层叠在一起 作为一个整体显示,第一个图层放在最下边,第二个图层叠加在第一个图层上面,第三个图层以此类推。
layer-list 的 item 可以通过下面四个属性设置偏移量:
- android:top 顶部的偏移量
- android:bottom 底部的偏移量
- android:left 左边的偏移量
- android:right 右边的偏移量
1、bg_shape_request_left_top_corner.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:right="-1dp">
<shape android:shape="rectangle">
<solid android:color="#FFE7F1FF" />
<stroke
android:width="1dp"
android:color="#FF8FC0FF" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="4dp" />
</shape>
</item>
</layer-list>
2、bg_shape_request_mid_white.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-0dp"
android:right="-1dp">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="#FF8FC0FF" />
</shape>
</item>
</layer-list>
3、bg_shape_request_mid_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-0dp"
android:right="-1dp">
<shape android:shape="rectangle">
<solid android:color="#FFE7F1FF" />
<stroke
android:width="1dp"
android:color="#FF8FC0FF" />
</shape>
</item>
</layer-list>
4、bg_white_right_top_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:left="-0dp">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="#FF8FC0FF" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="0dp"
android:topRightRadius="4dp" />
</shape>
</item>
</layer-list>
5、bg_blue_left_bottom_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:right="-1dp"
android:top="-1dp">
<shape android:shape="rectangle">
<solid android:color="@color/cl_E7F1FF" />
<stroke
android:width="1dp"
android:color="#FF8FC0FF" />
<corners
android:bottomLeftRadius="4dp"
android:bottomRightRadius="0dp"
android:topLeftRadius="0dp" />
</shape>
</item>
</layer-list>
6、bg_shape_bottom_mid_white.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-0dp"
android:right="-1dp"
android:top="-1dp">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="#FF8FC0FF" />
</shape>
</item>
</layer-list>
7、bg_shape_bottom_mid_blue.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-0dp"
android:right="-1dp"
android:top="-1dp">
<shape android:shape="rectangle">
<solid android:color="#FFE7F1FF" />
<stroke
android:width="1dp"
android:color="#FF8FC0FF" />
</shape>
</item>
</layer-list>
8、bg_white_right_bottom_corner.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="-0dp"
android:top="-1dp">
<shape android:shape="rectangle">
<solid android:color="@color/white" />
<stroke
android:width="1dp"
android:color="#FF8FC0FF" />
<corners
android:bottomLeftRadius="0dp"
android:bottomRightRadius="4dp"
android:topRightRadius="0dp" />
</shape>
</item>
</layer-list>
3、完整代码:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical"
android:padding="15dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:orientation="horizontal">
<TextView
style="@style/contact_input_form_label_style"
android:layout_weight="2"
android:background="@drawable/bg_shape_request_left_top_corner"
android:text="@string/the_number_of_person" />
<EditText
style="@style/contact_input_form_edit_style"
android:layout_weight="1.5"
android:background="@drawable/bg_shape_request_mid_white"
android:hint="@string/please_input"
android:inputType="number" />
<TextView
style="@style/contact_input_form_label_style"
android:layout_weight="2"
android:background="@drawable/bg_shape_request_mid_blue"
android:text="@string/the_number_of_house" />
<EditText
style="@style/contact_input_form_edit_style"
android:layout_weight="1.5"
android:background="@drawable/bg_white_right_top_corner"
android:hint="@string/please_input"
android:inputType="number" />
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="30dp"
android:orientation="horizontal">
<TextView
style="@style/contact_input_form_label_style"
android:layout_weight="2"
android:background="@drawable/bg_blue_left_bottom_corner"
android:text="@string/the_number_of_village" />
<EditText
style="@style/contact_input_form_edit_style"
android:layout_weight="1.5"
android:background="@drawable/bg_shape_bottom_mid_white"
android:hint="@string/please_input"
android:inputType="number" />
<TextView
style="@style/contact_input_form_label_style"
android:layout_weight="2"
android:background="@drawable/bg_shape_bottom_mid_blue"
android:text="@string/the_number_of_area" />
<EditText
style="@style/contact_input_form_edit_style"
android:layout_weight="1.5"
android:background="@drawable/bg_white_right_bottom_corner"
android:hint="@string/please_input"
android:inputType="number" />
</LinearLayout>
</LinearLayout>
本文地址:https://blog.csdn.net/zhijiandedaima/article/details/114318689