用 layer-list 实现圆角带分割线的表格

最新推荐文章于 2022-08-19 10:52:37 发布

唐诺

最新推荐文章于 2022-08-19 10:52:37 发布

阅读量397

点赞数

分类专栏：代码块文章标签： layer-list 圆角表格表格分割线

本文链接：https://blog.csdn.net/zhijiandedaima/article/details/114318689

版权

代码块同时被 2 个专栏收录

112 篇文章 5 订阅

订阅专栏

view

42 篇文章 0 订阅

订阅专栏

1、效果图：

1、四周圆角
2、带边框
3、带分割线
在这里插入图片描述

2、使用layer-list 给8个模块分别定义不同的样式：

使用可以将多个图层按照顺序层叠在一起作为一个整体显示，第一个图层放在最下边，第二个图层叠加在第一个图层上面，第三个图层以此类推。

layer-list 的 item 可以通过下面四个属性设置偏移量：

android:top 顶部的偏移量
android:bottom 底部的偏移量
android:left 左边的偏移量
android:right 右边的偏移量

注意：偏移量的设置，最好采用整数（-1dp）；如果采用小数（-0.5dp），可能线会重叠。

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>