Android:使用XML可绘制和渐变的方式将边框添加到ImageView的边框

时间:2019-04-19 18:17:10

标签: android frame gradient drawable

我试图在不使用图像但使用可绘制的xml的情况下模拟ImageView的框架边框,但是我无法这样做。

我要模拟的框架,这是我的“测试” xml:

enter image description here

<?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" />

我得到的是什么

enter image description here

我不介意使用图像(如果我有很好的建议),但是问题是我的图像是动态加载的,并且所有图像都有不同的尺寸,因此,首先,将框架调整为每个尺寸都会使其失去比例而且,更重要的是,要计算边框的宽度真的很困难,因此图像恰好适合边框。

希望任何人都可以帮助我。谢谢。

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

1 个答案:

答案 0 :(得分:0)

好吧,我确实非常固执和执着,我不喜欢“不可能”的:),所以我不断尝试,终于得到了我想要的东西。

这是我的可绘制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>

这是我的结果:

enter image description here

当然,您可以注意到它不是一个真正的框架,但确实非常接近。

我知道我可以使用两个或三个渐变来简化我的xml,但是目前我会像这样保持它的状态,并且花了很多时间。

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

继续改进!

新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" >
            <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>

新的(更好的结果):

enter image description here