自定义网格布局列边框

Question

我有一个问题。 如何在xml文件中执行自定义双面边框？

我尝试使用自定义drawable的各种变体，但最终它无法解决我需要的结果。

有什么想法吗？在2x2网格示例中，它可以工作。但是，我想改用3x4网格。

此刻，我有这个布局文件：

<?xml version="1.0" encoding="utf-8"?>
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:columnCount="3"
    tools:background="@color/colorLightBlue">

    <Button
        android:id="@+id/btn_pass_code_1"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="1"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_2"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="2"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_3"
        android:layout_columnWeight="0"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="3"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_4"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="4"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_5"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:background="@color/colorTransparent"
        android:text="5"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_6"
        android:layout_columnWeight="1"
        android:background="@color/colorTransparent"
        android:layout_gravity="fill"
        android:text="6"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:id="@+id/btn_pass_code_7"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:text="7"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:id="@+id/btn_pass_code_8"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:text="8"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:id="@+id/btn_pass_code_9"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:text="9"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:background="@color/colorTransparent"
        android:id="@+id/btn_pass_code_0"
        android:layout_columnWeight="1"
        android:layout_gravity="fill"
        android:text="0"
        android:textColor="@color/colorWhite"
        android:textSize="26sp" />

    <Button
        android:id="@+id/btn_pass_code_delete"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:background="@drawable/input_delete"
        android:textColor="@color/colorWhite"
        android:textSize="22sp" />
</GridLayout>

Answer 1

您可以将其用作按钮的背景：

for image in request.FILES.getlist('img'):
   xxxx.image = image
   xxx.save()

您必须根据网格中按钮的位置更改边框，以获得所需的结果。您将必须创建一个从蓝色到白色的渐变，以便能够再现预期的结果（就像您引用的第一个图像一样）。