Android：使用xml drawable和gradient将类似边框的框架添加到ImageView

Question

我试图模拟ImageView的框架边框而不使用图像，但使用可绘制的xml，但我无法做到。

我想模拟的框架，这是我的“测试”xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
            <gradient
                android:type="linear"
                android:startColor="#86592d"
                android:endColor="#ffffca" />
        </shape>
    </item>
</layer-list>

我的ImageView定义：

<ImageView
                    android:id="@+id/ivBackground"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true"
                    android:adjustViewBounds="true"
                    android:contentDescription="@string/desc"
                    android:padding="10dp"
                    android:scaleType="centerCrop"
                    android:cropToPadding="true"
                    android:background="@drawable/border_image" />

我得到了什么：

我不介意使用图像（如果我有一个很好的建议），但问题是我的图像是动态加载的，所有图像都有不同的尺寸，所以首先，调整框架到每个尺寸使它失去比例，什么是更重要的是，计算框架边框宽度非常困难，因此图像恰好适合框架内部。

希望有人能帮助我。谢谢。

PS。它不必看起来完全相同，但尽可能接近。

Answer 1

好吧，我真的非常顽固和执着，我不喜欢“它不可能”的:)所以我一直在努力尝试，最终得到了我正在寻找的东西。

这是我的drawable xml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#58452f" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle" >
            <solid android:color="#624D35" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="#795f41" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="rectangle" >
            <solid android:color="#8e6f4c" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="rectangle" >
            <solid android:color="#a17d56" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="rectangle" >
            <solid android:color="#ffffd9" />
        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp">
        <shape android:shape="rectangle" >
            <solid android:color="#a17d56" />
        </shape>
    </item>
    <item
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp">
        <shape android:shape="rectangle" >
            <solid android:color="#8e6f4c" />
        </shape>
    </item>
    <item
        android:bottom="9dp"
        android:left="9dp"
        android:right="9dp"
        android:top="9dp">
        <shape android:shape="rectangle" >
            <solid android:color="#795f41" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle" >
            <solid android:color="#624D35" />
        </shape>
    </item>
    <item
        android:bottom="11dp"
        android:left="11dp"
        android:right="11dp"
        android:top="11dp">
        <shape android:shape="rectangle" >
            <solid android:color="#58452f" />
        </shape>
    </item>
</layer-list>

这是我的结果：

当然你可以注意到它不是一个真正的框架，但它真的非常接近。

我知道我可以使用两个或三个渐变来简化我的xml，但是目前我会保持这样，因为它正在工作，我花了很多时间。

编辑：我的最后一次尝试。

继续改进！

Nev hml：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#58452f" />
        </shape>
    </item>
    <item
        android:bottom="1dp"
        android:left="1dp"
        android:right="1dp"
        android:top="1dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#624D35"
                android:centerColor="#4e3d2a"
                android:endColor="#624D35"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#795f41"
                android:centerColor="#604c34"
                android:endColor="#795f41"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#8e6f4c"
                android:centerColor="#71583c"
                android:endColor="#8e6f4c"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#a17d56"
                android:centerColor="#806444"
                android:endColor="#a17d56"
                android:type="linear" />
        </shape>
    </item>

    <item
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#ffffd9"
                android:centerColor="#707047"
                android:endColor="#ffffd9"
                android:type="linear" />
        </shape>
    </item>

    <item
        android:bottom="7dp"
        android:left="7dp"
        android:right="7dp"
        android:top="7dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#a17d56"
                android:centerColor="#806444"
                android:endColor="#a17d56"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="8dp"
        android:left="8dp"
        android:right="8dp"
        android:top="8dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#8e6f4c"
                android:centerColor="#71583c"
                android:endColor="#8e6f4c"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="9dp"
        android:left="9dp"
        android:right="9dp"
        android:top="9dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#795f41"
                android:centerColor="#604c34"
                android:endColor="#795f41"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="10dp"
        android:left="10dp"
        android:right="10dp"
        android:top="10dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#624D35"
                android:centerColor="#4e3d2a"
                android:endColor="#624D35"
                android:type="linear" />
        </shape>
    </item>
    <item
        android:bottom="11dp"
        android:left="11dp"
        android:right="11dp"
        android:top="11dp">
        <shape android:shape="rectangle" >
            <gradient
                android:angle="45"
                android:startColor="#58452f"
                android:centerColor="#463725"
                android:endColor="#58452f"
                android:type="linear" />
        </shape>
    </item>
</layer-list>

而新的（更好的）结果：