Android形状渐变边框

Question

Android形状渐变边框

androidandroid-layoutandroid-drawablexml-drawable

47

我想为一个线性布局创建边框。因此，我决定创建一个形状。我希望边框具有渐变效果。以下代码无法实现此目的。它会填充矩形，然后创建描边。我不想要填充的矩形，只需要描边。而且我希望将渐变应用于描边。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="360"
        android:centerColor="#e95a22"
        android:endColor="#ff00b5"
        android:gradientRadius="360"
        android:startColor="#006386"
        android:type="sweep" />

    <stroke
        android:width="2dp"
        android:color="#ff207d94" />

</shape>

- learner

请见 https://github.com/pskink/PathDrawable。 - pskink

请参考以下链接：https://dev59.com/d5vga4cB1Zd3GeqPzkrj#39831707，https://dev59.com/B5ffa4cB1Zd3GeqP84Ad#37498686。 - CoolMind

5个回答

42

由于被接受的答案并不能完全满足我的需求，我也会发布我的解决方案，希望能帮助到其他人 :)

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

<item>
<!-- create gradient you want to use with the angle you want to use -->
    <shape android:shape="rectangle" >
        <gradient
            android:angle="0"
            android:centerColor="@android:color/holo_blue_bright"
            android:endColor="@android:color/holo_red_light"
            android:startColor="@android:color/holo_green_light" />

    </shape>
</item>
<!-- create the stroke for top, left, bottom and right with the dp you want -->
<item
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp"
    android:top="2dp">
    <shape android:shape="rectangle" >
        <!-- fill the inside in the color you want (could also be a gradient again if you want to, just change solid to gradient and enter angle, start, maybe center, and end color) -->
        <solid android:color="#fff" />
    </shape>
</item>

</layer-list>

- Distra

1

经过很多搜索，我找到了完美的解决方案。非常感谢 :) - Shailesh

不是很完美，因为我的EditText填充应该是透明的。 - Starwave

在实心矩形中，您应该能够使用@android:color/transparent来解决问题。或者您可以通过将颜色设置为例如#00FFFFFF来使用alpha。 - Distra

我想在角落上添加半径，我该如何定义角落的半径？ - HAXM

在<shape>标签内添加@HAXM，例如<corners android:radius="12dp" />以获得12 dp的圆角半径。 <shape android:shape="rectangle"> <corners android:radius="12dp" /> </shape> 如果您需要每个角落不同的圆角半径，则可以使用bottomLeftRadius、bottomRightRadius、topLeftRadius和topRightRadius而不是radius。 - Distra

5

这将创建一个顶部边框为2dp的布局。只需将其设置为您的布局的背景即可。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:startColor="#4fc949"
                android:centerColor="#0c87c5"
                android:endColor="#b4ec51"
                android:angle="180" />
        </shape>
    </item>
    <item android:top="2dp">
        <shape android:shape="rectangle">
            <solid android:color="@color/background_color"/>
        </shape>
    </item>
</layer-list>

- Alon Kogan

3

这个额外的资源应该可以解决你的问题。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <gradient
                android:angle="360"
                android:centerColor="#e95a22"
                android:endColor="#ff00b5"
                android:gradientRadius="360"
                android:startColor="#006386"
                android:type="sweep" />
            <size android:height="170dp"
                android:width="170dp"/>
        </shape>
    </item>
    <item android:top="2dp" android:bottom="2dp" android:right="2dp" android:left="2dp">
        <shape android:shape="rectangle">
            <size android:width="140dp"
                android:height="140dp"/>
            <solid android:color="@color/colorAccent"/>
            <solid android:color="@color/white"/>
        </shape>
    </item>
</layer-list>

- Johnyoat

3

这将是您想要做的适当解决方案。它包括描边渐变和填充颜色渐变。

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item>
            <shape >
                <gradient
                    android:startColor="#2196F3"
                    android:endColor="#673AB7"
                    android:angle="270" />
                <stroke
                    android:width="0dp"
                    android:color="@color/transparentColor" />
                <corners
                    android:radius="8dp" />
                <padding
                    android:left="2dp"
                    android:right="2dp"
                    android:top="2dp"
                    android:bottom="2dp" />
            </shape>
        </item>
        <item>
            <shape android:shape="rectangle">

            </shape>
        </item>
        <item android:top="0dp">
            <shape>
                <gradient
                    android:startColor="#FBB100"
                    android:endColor="#FF9900"
                    android:angle="270"/>

                <corners
                    android:radius="8dp" />
            </shape>
        </item>
    </layer-list>

- Shivam Narula

谢谢！空的第二个<item>有什么用？第一个透明颜色的<stroke>有什么用？ - CoolMind

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vipul mittal · Accepted Answer

可以尝试像这样：

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item>
        <shape android:shape="rectangle" >
            <gradient
                android:angle="360"
                android:centerColor="#e95a22"
                android:endColor="#ff00b5"
                android:gradientRadius="360"
                android:startColor="#006386"
                android:type="sweep" />

            <stroke
                android:width="2dp"
                android:color="#ff207d94" />
        </shape>
    </item>
    <item
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp">
        <shape android:shape="rectangle" >
            <solid android:color="#fff" />
        </shape>
    </item>

</layer-list>