`
Weich_JavaDeveloper
  • 浏览: 100274 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

圆角 + 边框 + 渐变 Button

 
阅读更多

在Drawable下创建文件:

bg_alibuybutton_default.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="@color/button_solid_color" />
			<corners android:topLeftRadius="5dip" 
			    android:topRightRadius="5dip"
				android:bottomLeftRadius="5dip" 
				android:bottomRightRadius="5dip" />
		</shape>
	</item>
	<item android:top="1px" 
	    android:bottom="1px" 
	    android:left="1px"
		android:right="1px">
		<shape>
			<gradient android:startColor="@color/button_defalut_start_color" 
			    android:endColor="@color/button_defalut_end_color"
				android:type="linear" 
				android:angle="90" 
				android:centerX="0.5"
				android:centerY="0.5" />
			<corners android:topLeftRadius="5dip" 
			    android:topRightRadius="5dip"
				android:bottomLeftRadius="5dip" 
				android:bottomRightRadius="5dip" />
		</shape>
	</item>
</layer-list>

bg_alibuybutton_pressed.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="@color/button_solid_color" />
			<corners android:topLeftRadius="5dip" 
			    android:topRightRadius="5dip"
				android:bottomLeftRadius="5dip" 
				android:bottomRightRadius="5dip" />
		</shape>
	</item>
	<item android:top="1px" 
	    android:bottom="1px"
	    android:left="1px"
		android:right="1px">
		<shape>
			<gradient android:startColor="@color/button_pressed_start_color" 
			    android:endColor="@color/button_pressed_end_color"
				android:type="linear" 
				android:angle="90" 
				android:centerX="0.5"
				android:centerY="0.5" />
			<corners android:topLeftRadius="5dip" 
			    android:topRightRadius="5dip"
				android:bottomLeftRadius="5dip"
			    android:bottomRightRadius="5dip" />
		</shape>
	</item>
</layer-list>

bg_alibuybutton_selected.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="@color/button_solid_color" />
			<corners android:topLeftRadius="5dip" 
			    android:topRightRadius="5dip"
				android:bottomLeftRadius="5dip" 
				android:bottomRightRadius="5dip" />
		</shape>
	</item>
	<item android:top="1px" 
	    android:bottom="1px" 
	    android:left="1px"
		android:right="1px">
		<shape>
			<gradient android:startColor="@color/button_selected_start_color" 
			    android:endColor="@color/button_selected_end_color"
				android:type="linear" 
				android:angle="90" 
				android:centerX="0.5"
				android:centerY="0.5" />
			<corners android:topLeftRadius="5dip" 
			    android:topRightRadius="5dip"
				android:bottomLeftRadius="5dip" 
				android:bottomRightRadius="5dip" />
		</shape>
	</item>
</layer-list>

bg_alibuybutton_states.xml

<?xml version="1.0" encoding="UTF-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
	<item android:state_pressed="true" android:drawable="@drawable/bg_alibuybutton_pressed" />
	<item android:state_focused="true" android:drawable="@drawable/bg_alibuybutton_selected" />
	<item android:drawable="@drawable/bg_alibuybutton_default" />
</selector>

 实际使用在Button的BackgroundDrawable引用最后的文件。

分享到:
评论

相关推荐

    android -> 按钮 圆角 & 边框 & 渐变

    圆角、边框和渐变效果可以使得按钮更加吸引用户注意力,提升应用的整体视觉体验。本篇文章将详细探讨如何在Android中实现这些效果。 首先,我们来看如何创建圆角按钮。在Android中,通常我们会使用`shape` XML资源...

    winform界面,圆角button

    如果需要更复杂的效果,如渐变色、边框等,可以进一步扩展`OnPaint`方法,添加更多的绘图逻辑。 在实际项目中,你可能还需要考虑按钮的鼠标悬停、按下等状态下的不同外观,这通常可以通过重写`OnMouseEnter`, `...

    Android设置虚线、圆角、渐变

    在Android开发中,为UI元素添加虚线、圆角和渐变效果是常见的需求,可以提升应用的视觉吸引力。下面将详细讲解如何实现这些效果。 ### 一、虚线(Dashed Line) 在Android中,我们可以使用`Shape Drawable`来创建...

    【示例】在WPF简单实现图片圆角、只显示部分、渐变

    本示例重点讲解如何利用XAML实现图片的圆角、倒角、部分显示以及渐变效果。 首先,我们来看如何实现图片的圆角效果。在WPF中,我们可以使用`Border`控件结合`CornerRadius`属性来实现。例如,将一个`Image`控件放置...

    CSS圆角边框、按钮插件

    在本主题“CSS圆角边框、按钮插件”中,我们将深入探讨如何利用CSS创建具有圆角边框的元素以及如何实现动态美观的按钮效果。 首先,让我们谈谈CSS圆角边框。在CSS3中,我们可以使用`border-radius`属性来创建具有...

    HTML+CSS实现渐变风格登录页面(源码)

    4. **样式美化**:通过设置边框、内边距、字体、颜色等属性,可以进一步增强页面的视觉效果。例如,为输入框和按钮添加圆角和阴影: ```css input, button { border-radius: 5px; box-shadow: 0 2px 5px rgba(0, 0...

    wpf按钮透明圆角

    在WPF中,自定义控件样式和模板能提供极大的灵活性,你可以根据需要调整颜色、边框、动画等细节,以达到理想的视觉效果。同时,结合MVVM模式,可以使你的代码更加清晰、可维护,提高开发效率。 总之,通过理解并...

    Android 自定义UI圆角按钮

    在创建圆角按钮时,我们通常会使用Shape Drawable,它允许我们定义各种形状(如矩形、椭圆)并添加填充色、边框、渐变等样式。 创建圆角按钮的第一步是在`res/drawable`目录下创建一个新的XML文件,例如命名为`...

    WPFButton样式

    开发者可以使用`&lt;SolidColorBrush&gt;`定义按钮的背景颜色,用`&lt;Border&gt;`标签定义边框颜色、宽度和圆角。例如: ```xml &lt;Button&gt; &lt;Button.Background&gt; &lt;/Button.Background&gt; &lt;Button.BorderBrush&gt; &lt;/Button....

    自绘按钮(渐变色效果)

    3. **绘制形状**:绘制按钮的基本形状,通常是矩形或圆角矩形。这涉及到设置边框宽度和形状的填充。例如,使用`drawRect`或`fillRect`方法。 4. **应用渐变**:使用创建的渐变色填充按钮的形状。这一步会根据所选...

    GDI+绘制艳丽的Button控件

    本文将深入探讨如何利用GDI+技术来创建一个具有换色和渐变效果的自定义Button控件。我们将使用C#语言进行编程,这将展示出.NET Framework中的GDI+与UI设计的结合。 首先,了解GDI+的基本概念。GDI+是GDI的升级版,...

    HTML5 css3渐变按钮代码.rar

    2. 应用CSS样式:接着,使用CSS3对按钮进行样式设置,包括边框、填充、圆角、尺寸等属性。关键在于定义`background-image`为线性渐变,并设置渐变的颜色和方向。例如: ```css button { background-image: linear-...

    好看的button样式CSS

    2. **背景颜色与边框**:`background-color`属性用于设定按钮的背景色,`border`属性用于设定边框,而`border-radius`则可以实现圆角效果,增加视觉吸引力。 3. **文本样式**:`color`属性定义按钮上的文字颜色,`...

    好看的button样式

    例如,创建一个带有圆角和渐变背景的按钮: ```css button { background: linear-gradient(to bottom, #ff9933, #ff6600); border-radius: 5px; padding: 10px 20px; color: white; font-size: 18px; } ``` ...

    重绘 C# button按钮

    例如,创建一个带有圆角的矩形背景和渐变色效果: ```csharp using (SolidBrush brush = new SolidBrush(Color.FromKnownColor(KnownColor.Control))) { e.Graphics.FillRoundedRectangle(brush, ...

    C#圆角按钮

    在Windows Forms中,我们可以继承`System.Windows.Forms.Button`类,并覆盖其`OnPaint`事件来绘制具有圆角的按钮。以下是一些关键步骤: 1. **创建自定义控件类**:创建一个新的类,继承自`Button`,例如命名为`...

    C# 5种类型的自定义Button控件合集GDI+自绘精美漂亮的播放器按钮

    Office 2007和2010的按钮设计引入了 Fluent UI(也称为 Ribbon UI),这种风格的按钮通常有圆角、光泽和深度感。通过绘制圆形或椭圆形的Path,结合SmoothingMode和CompositingQuality属性,我们可以创建平滑边缘和...

    C#脉冲效果的圆角和圆形按钮,动态扩展按钮范围类似脉冲,可指定边框大小颜色、脉冲变化速度范围、渐变颜色、添加图片等

    C#脉冲效果的圆角和圆形按钮,通过继承原生Button控件重绘实现,动态扩展按钮范围类似脉冲,可指定边框大小颜色、脉冲变化速度范围、渐变颜色、添加图片等。循环扩展脉冲效果,定时器在控件扩展中的使用。 Winform...

    按钮边框流光特效

    2. CSS:接着,我们用CSS来定义按钮的基本样式,包括边框宽度、颜色、圆角等。同时,我们还会创建一个关键帧动画(@keyframes)来实现流光效果。例如: ```css button { border-width: 4px; border-style: solid; ...

    按钮圆角例子

    圆角按钮是指在传统矩形按钮的基础上,通过设置边框半径(border-radius)属性,使得按钮的四个角落呈现出圆形或椭圆形的效果。这种设计可以使用户界面看起来更加友好和易于接受,减少尖锐边角带来的视觉冲击。 二...

Global site tag (gtag.js) - Google Analytics