Android：使用 xml 可绘制和渐变向 ImageView 添加框架状边框
Android: Add frame like border to ImageView with xml drawable and gradient
我试图在不使用图像但使用可绘制对象的情况下模拟 ImageView 的边框 xml，但我无法做到。
我要模拟的帧，这是我的 "test" 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。不一定要长得一模一样，但要尽可能接近。
好吧，我真的很固执和执着，我不喜欢 "it's not possible" 的 :) 所以我不断尝试，终于得到了我想要的东西。
这是我的可绘制对象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，但目前我会保持这样，因为它正在工作并且我已经花了很多时间。
编辑：我最后一次尝试。
继续改进！
新 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>
新的（更好的）结果：
我试图在不使用图像但使用可绘制对象的情况下模拟 ImageView 的边框 xml，但我无法做到。
我要模拟的帧，这是我的 "test" 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。不一定要长得一模一样，但要尽可能接近。
好吧，我真的很固执和执着，我不喜欢 "it's not possible" 的 :) 所以我不断尝试，终于得到了我想要的东西。
这是我的可绘制对象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，但目前我会保持这样，因为它正在工作并且我已经花了很多时间。
编辑：我最后一次尝试。
继续改进！
新 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>
新的（更好的）结果：