如何为按钮编码内外渐变
Posted
技术标签:
【中文标题】如何为按钮编码内外渐变【英文标题】：How to code a inner-outer gradient for a button 【发布时间】：2018-11-23 11:06:41 【问题描述】：我想实现两个渐变： Goal gradient images
-
对于登录，我无法实现目标。
对于注册，我编写了以下可绘制代码：
XML：
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<layer-list>
<item android:right="@dimen/button_shadow_margin" android:top="@dimen/button_shadow_margin">
<shape>
<corners android:radius="@dimen/button_shadow_corner_radius" />
<solid android:color="@color/shadow_black" />
</shape>
</item>
<item android:bottom="2dp" android:left="2dp">
<shape>
<gradient android:angle="270" android:endColor="@color/button_background_light" android:startColor="@color/button_background_light" />
<stroke android: android:color="@color/button_background_light" />
<corners android:radius="@dimen/button_corner_radius" />
<padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" />
</shape>
</item>
</layer-list>
</item>
</selector>
请提出登录梯度的解决方案。
【问题讨论】：
发布您的代码。你试过什么？ 好吧，要实现内边框（暗区）的渐变，您需要一个径向渐变。带有选择器的径向渐变仅适用于完美的圆圈...您应该为此使用图像，否则您将有一个硬边框，正如您在@KaranMer 答案中看到的那样。 【参考方案1】：试试这个布局。只是调整颜色的混合，取决于你。
<Button
android:layout_
android:layout_
android:gravity="center"
android:layout_margin="10dp"
android:background="@drawable/bckg_btn_gradient"
tools:ignore="MissingConstraints"
android:text="LOGIN"
android:textColor="#64e8f3"/>
bckg_btn_gradient.xml
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<!--background shadow-->
<item>
<shape android:shape="rectangle" >
<solid android:color="#000000" />
<corners android:radius="15dp" />
</shape>
</item>
<!-- background color -->
<item
android:bottom="3px"
android:left="3px"
android:right="3px"
android:top="3px">
<shape android:shape="rectangle" >
<solid android:color="#000" />
<corners android:radius="15dp" />
</shape>
</item>
<!--left shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="180"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--right shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="360"
android:centerColor="#000"
android:centerX="0.98"
android:endColor="#64e8f3"
android:startColor="#09000000" />
<corners android:radius="8dp" />
</shape>
</item>
<!--top shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="-90"
android:centerColor="#007b7b7b"
android:centerY="0.91"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
<!--bottom shadow -->
<item>
<shape android:shape="rectangle" >
<gradient
android:angle="90"
android:centerColor="#007b7b7b"
android:centerY="0.9"
android:endColor="#64e8f3"
android:startColor="#99000000"
android:type="linear" />
<corners android:radius="8dp" />
</shape>
</item>
示例截图
【讨论】：
【参考方案2】：尝试使用下面的drawable，根据需要更改颜色和大小。
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape
android:shape="rectangle">
<gradient
android:endColor="#ffffff"
android:centerColor="#0000ff"
android:startColor="#0052ff"
android:type="linear"/>
<corners
android:radius="8dp"/>
</shape>
</item>
<item
android:left="4dp"
android:right="4dp"
android:top="4dp"
android:bottom="4dp">
<shape
android:shape="rectangle">
<solid android:color="#000000"/>
<corners
android:radius="8dp"/>
</shape>
</item>
</layer-list>
输出：
【讨论】：
【参考方案3】：请检查一下：您可以根据需要使用 Stroke/Solid 颜色。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<shape android:shape="rectangle">
<solid android:color="#800000ff" />
<stroke android:color="#80000000"
android:/> // responsible for outer width
<corners android:radius="8dp" /> // responsible for corners
</shape>
</item>
</selector>
【讨论】：
它将在按钮边框上给我一个固定的颜色，而不是分别从边框开始到边框结束的一层从深到浅的颜色。 您可以使用渐变文件代替纯色。【参考方案4】：我以更难的方式实现了它，但如果有人正在寻找它，那么跟随将节省一些时间。
button_background.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="@dimen/login_button_border_width_1"
android:right="@dimen/login_button_border_width_1"
android:top="@dimen/login_button_border_width_1"
android:bottom="@dimen/login_button_border_width_1">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_1"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_2"
android:right="@dimen/login_button_border_width_2"
android:top="@dimen/login_button_border_width_2"
android:bottom="@dimen/login_button_border_width_2">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_2"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_3"
android:right="@dimen/login_button_border_width_3"
android:top="@dimen/login_button_border_width_3"
android:bottom="@dimen/login_button_border_width_3">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_3"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_4"
android:right="@dimen/login_button_border_width_4"
android:top="@dimen/login_button_border_width_4"
android:bottom="@dimen/login_button_border_width_4">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_4"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_5"
android:right="@dimen/login_button_border_width_5"
android:top="@dimen/login_button_border_width_5"
android:bottom="@dimen/login_button_border_width_5">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_5"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_6"
android:right="@dimen/login_button_border_width_6"
android:top="@dimen/login_button_border_width_6"
android:bottom="@dimen/login_button_border_width_6">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_6"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_7"
android:right="@dimen/login_button_border_width_7"
android:top="@dimen/login_button_border_width_7"
android:bottom="@dimen/login_button_border_width_7">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_7"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_8"
android:right="@dimen/login_button_border_width_8"
android:top="@dimen/login_button_border_width_8"
android:bottom="@dimen/login_button_border_width_8">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_8"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_9"
android:right="@dimen/login_button_border_width_9"
android:top="@dimen/login_button_border_width_9"
android:bottom="@dimen/login_button_border_width_9">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_9"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_10"
android:right="@dimen/login_button_border_width_10"
android:top="@dimen/login_button_border_width_10"
android:bottom="@dimen/login_button_border_width_10">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_10"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_11"
android:right="@dimen/login_button_border_width_11"
android:top="@dimen/login_button_border_width_11"
android:bottom="@dimen/login_button_border_width_11">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_11"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_12"
android:right="@dimen/login_button_border_width_12"
android:top="@dimen/login_button_border_width_12"
android:bottom="@dimen/login_button_border_width_12">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_12"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_13"
android:right="@dimen/login_button_border_width_13"
android:top="@dimen/login_button_border_width_13"
android:bottom="@dimen/login_button_border_width_13">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_13"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_14"
android:right="@dimen/login_button_border_width_14"
android:top="@dimen/login_button_border_width_14"
android:bottom="@dimen/login_button_border_width_14">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_14"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_15"
android:right="@dimen/login_button_border_width_15"
android:top="@dimen/login_button_border_width_15"
android:bottom="@dimen/login_button_border_width_15">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_15"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_16"
android:right="@dimen/login_button_border_width_16"
android:top="@dimen/login_button_border_width_16"
android:bottom="@dimen/login_button_border_width_16">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_16"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_17"
android:right="@dimen/login_button_border_width_17"
android:top="@dimen/login_button_border_width_17"
android:bottom="@dimen/login_button_border_width_17">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_17"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_18"
android:right="@dimen/login_button_border_width_18"
android:top="@dimen/login_button_border_width_18"
android:bottom="@dimen/login_button_border_width_18">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_18"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_19"
android:right="@dimen/login_button_border_width_19"
android:top="@dimen/login_button_border_width_19"
android:bottom="@dimen/login_button_border_width_19">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_19"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
<item
android:left="@dimen/login_button_border_width_20"
android:right="@dimen/login_button_border_width_20"
android:top="@dimen/login_button_border_width_20"
android:bottom="@dimen/login_button_border_width_20">
<shape
android:shape="rectangle">
<solid android:color="@color/login_button_border_20"/>
<corners
android:radius="@dimen/button_corner_radius"/>
</shape>
</item>
dimes.xml
<dimen name="login_button_border_width_1">0.5dp</dimen>
<dimen name="login_button_border_width_2">1dp</dimen>
<dimen name="login_button_border_width_3">1.5dp</dimen>
<dimen name="login_button_border_width_4">2dp</dimen>
<dimen name="login_button_border_width_5">2.5dp</dimen>
<dimen name="login_button_border_width_6">3dp</dimen>
<dimen name="login_button_border_width_7">3.5dp</dimen>
<dimen name="login_button_border_width_8">4dp</dimen>
<dimen name="login_button_border_width_9">4.5dp</dimen>
<dimen name="login_button_border_width_10">5dp</dimen>
<dimen name="login_button_border_width_11">5.5dp</dimen>
<dimen name="login_button_border_width_12">6dp</dimen>
<dimen name="login_button_border_width_13">6.5dp</dimen>
<dimen name="login_button_border_width_14">7dp</dimen>
<dimen name="login_button_border_width_15">7.5dp</dimen>
<dimen name="login_button_border_width_16">8dp</dimen>
<dimen name="login_button_border_width_17">8.5dp</dimen>
<dimen name="login_button_border_width_18">9dp</dimen>
<dimen name="login_button_border_width_19">9.5dp</dimen>
<dimen name="login_button_border_width_20">10dp</dimen>
colors.xml
<color name="login_button_border_1">#00686D</color>
<color name="login_button_border_2">#006068</color>
<color name="login_button_border_3">#005C5F</color>
<color name="login_button_border_4">#095459</color>
<color name="login_button_border_5">#0B4E51</color>
<color name="login_button_border_6">#11484C</color>
<color name="login_button_border_7">#134447</color>
<color name="login_button_border_8">#153F43</color>
<color name="login_button_border_9">#153E42</color>
<color name="login_button_border_10">#153B3E</color>
<color name="login_button_border_11">#173739</color>
<color name="login_button_border_12">#1A3237</color>
<color name="login_button_border_13">#182F33</color>
<color name="login_button_border_14">#192C31</color>
<color name="login_button_border_15">#1C292D</color>
<color name="login_button_border_16">#1B262B</color>
<color name="login_button_border_17">#1A252A</color>
<color name="login_button_border_18">#1A2426</color>
<color name="login_button_border_19">#1C2225</color>
<color name="login_button_border_20">#1C2124</color>
这是结果：
感谢大家的帮助:)
【讨论】：
以上是关于如何为按钮编码内外渐变的主要内容，如果未能解决你的问题，请参考以下文章
eclipse编码格式设置教程如何为eclipse设置编码格式?
如何为 WindowsMediaFoundation H.264 编码器 MFT 创建 IMFSample