`
andy_叶
  • 浏览: 67995 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

shape 用法(button)

阅读更多

在实现背景渐变的帖子里

http://androidturing.iteye.com/blog/1238909

有朋友建议看看shape的用法,确实很有帮助。这里我偷懒转一篇比较详细的帖子,和大家一起进步~!

Android中常常使用shape来定义控件的一些显示属性,今天看了一些shape的使用,对shape有了大体的了解,稍作总结:

先看下面的代码:

复制到剪贴板  XML/HTML代码
  1. <shape>  
  2.     <!-- 实心 -->  
  3.     <solid android:color="#ff9d77"/>  
  4.     <!-- 渐变 -->  
  5.     <gradient  
  6.         android:startColor="#ff8c00"  
  7.         android:endColor="#FFFFFF"  
  8.         android:angle="270" />  
  9.     <!-- 描边 -->  
  10.     <stroke  
  11.         android:width="2dp"  
  12.         android:color="#dcdcdc" />  
  13.     <!-- 圆角 -->  
  14.     <corners  
  15.         android:radius="2dp" />  
  16.     <padding  
  17.         android:left="10dp"  
  18.         android:top="10dp"  
  19.         android:right="10dp"  
  20.         android:bottom="10dp" />  
  21. </shape>  

 


solid:实心,就是填充的意思
android:color指定填充的颜色

gradient:渐变
android:startColor和android:endColor分别为起始和结束颜色,ndroid:angle是渐变角度,必须为45的整数倍。
另外渐变默认的模式为android:type="linear",即线性渐变,可以指定渐变为径向渐变,android:type="radial",径向渐变需要指定半径android:gradientRadius="50"。

stroke:描边
android:width="2dp" 描边的宽度,android:color 描边的颜色。
我们还可以把描边弄成虚线的形式,设置方式为:
android:dashWidth="5dp"

android:dashGap="3dp"
其中android:dashWidth表示'-'这样一个横线的宽度,android:dashGap表示之间隔开的距离。

corners:圆角
android:radius为角的弧度,值越大角越圆。
我们还可以把四个角设定成不同的角度,方法为:

复制到剪贴板  XML/HTML代码
  1. <corners  
  2.   
  3.         android:topRightRadius="20dp"    右上角  
  4.         android:bottomLeftRadius="20dp"    右下角  
  5.         android:topLeftRadius="1dp"    左上角  
  6.         android:bottomRightRadius="0dp"    左下角  
  7. />  


这里有个地方需要注意,bottomLeftRadius是右下角,而不是左下角,这个有点郁闷,不过不影响使用,记得别搞错了就行。
还有网上看到有人说设置成0dp无效,不过我在测试中发现是可以的,我用的是2.2,可能修复了这个问题吧,如果无效的话那就只能设成1dp了。

padding:间隔
这个就不用多说了,XML布局文件中经常用到。


大体的就是这样,以下是一个使用的具体示例:用在Selector中作为Button的背景,分别定义了按钮的一般状态、获得焦点状态和按下时的状态,具体代码如下:

 

复制到剪贴板  XML/HTML代码
  1. main.xml:  
  2. <Button  
  3.     android:layout_width="wrap_content"  
  4.     android:layout_height="wrap_content"  
  5.     android:text="TestShapeButton"  
  6.     android:background="@drawable/button_selector"  
  7.     />  
  8. >  



button_selector.xml:

 

复制到剪贴板  XML/HTML代码
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <selector  
  3.     xmlns:android="http://schemas.android.com/apk/res/android">  
  4.     <item android:state_pressed="true" >  
  5.         <shape>  
  6.             <!-- 渐变 -->  
  7.             <gradient  
  8.                 android:startColor="#ff8c00"  
  9.                 android:endColor="#FFFFFF"  
  10.                 android:type="radial"  
  11.                 android:gradientRadius="50" />  
  12.             <!-- 描边 -->  
  13.             <stroke  
  14.                 android:width="2dp"  
  15.                 android:color="#dcdcdc"  
  16.                 android:dashWidth="5dp"  
  17.                 android:dashGap="3dp" />  
  18.             <!-- 圆角 -->  
  19.             <corners  
  20.                 android:radius="2dp" />  
  21.             <padding  
  22.                 android:left="10dp"  
  23.                 android:top="10dp"  
  24.                 android:right="10dp"  
  25.                 android:bottom="10dp" />  
  26.         </shape>  
  27.     </item>  
  28.     <item android:state_focused="true" >  
  29.         <shape>  
  30.             <gradient  
  31.                 android:startColor="#ffc2b7"  
  32.                 android:endColor="#ffc2b7"  
  33.                 android:angle="270" />  
  34.             <stroke  
  35.                 android:width="2dp"  
  36.                 android:color="#dcdcdc" />  
  37.             <corners  
  38.                 android:radius="2dp" />  
  39.             <padding  
  40.                 android:left="10dp"  
  41.                 android:top="10dp"  
  42.                 android:right="10dp"  
  43.                 android:bottom="10dp" />  
  44.         </shape>  
  45.     </item>  
  46.     <item>        
  47.         <shape>  
  48.             <solid android:color="#ff9d77"/>  
  49.             <stroke  
  50.                 android:width="2dp"  
  51.                 android:color="#fad3cf" />  
  52.             <corners  
  53.                 android:topRightRadius="5dp"  
  54.                 android:bottomLeftRadius="5dp"  
  55.                 android:topLeftRadius="0dp"  
  56.                 android:bottomRightRadius="0dp"  
  57.             />  
  58.             <padding  
  59.                 android:left="10dp"  
  60.                 android:top="10dp"  
  61.                 android:right="10dp"  
  62.                 android:bottom="10dp" />  
  63.         </shape>  
  64.     </item>  
  65. </selector>  

分享到:
评论

相关推荐

    实例详解Android Selector和Shape的用法

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector。可以这样说,shape和selector在美化控件中的作用是至关重要的。 1:Selector ...

    Android shape和selector 结合使用实例代码

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector。可以这样说,shape和selector在美化控件中的作用是至关重要的。 1.Shape ...

    Android开发教程之shape和selector的结合使用

    shape和selector是Android UI设计中经常用到的,比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到shape和selector。可以这样说,shape和selector在美化控件中的作用是至关重要的。 1.Shape 简介...

    Android Shape控件美化实现代码

    当然除了使用drawable这样的图片外今天Android开发网谈下自定义图形shape的方法,对于Button控件Android上支持以下几种属性shape、gradient、stroke、corners等。  我们就以目前系统的Button的selector为例说下: ...

    AndroidCheckableButton:各种样式的Android按钮

    CheckableButton的用法与Button完全相同,但是为了获得演示的UI,您需要做更多的工作。 在默认和选定状态下为边框创建两个形状 checkable_default_border.xml &lt;? xml version = " 1.0 " encoding = " utf-8 " ?...

    C# for CSDN 乱七八糟的看不懂

    比较 使用 Contains 方法。 ArrayList Array1=new ArrayList(); Array1.Add("as"); bool b1=Array1.Contains("as"); MessageBox.Show(b1.ToString()); 第6页 C#(WINFORM)学习 找到集合中数量最多的一个元素 利用...

    VB控件属性使用大全

    DrawMode设定窗体上绘图(graphics方法),Shape,Line等控件的输出外观,有16种可选: 1 黑色 2 非或笔,设置值15的反相 3 与非笔,背景色以及画笔反相二者共有颜色的组合 4 非复制笔,设置值13的反相 5 与笔非,画笔...

    Java学习指南19 JavaFX入门

    本篇介绍JavaFX的基本技术,至少包括以下方法:* 基本控件的使用 Label Button ImageView等* 基本布局的使用 BorderPane, HBox, VBox等*?常用形状的使用 Shape*?事件处理的基本方法*?ListView,? TreeView,? ...

    WorkOverTime:record work overtime 记加班安卓App

    圆角按钮:样式文件在drawalbe/button_shape.xml ViewPager的使用:装填了3个圆环控件,每次切换都会重绘当前的圆环,注册页面切换监听器OnPageChangeListener,实现页面下标的改变 底部导航栏界面的设计:由3个...

    打冰雹游戏源程序

    Private Sub picture1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single) a = 4680: b = 4980: c = 4980 - 3780: d = Atn((4680 - 4560) / (4980 - 4620)) e = Atn((4680 - 4440) / (4980 ...

    object-create-x:Sham for Object.create

    对象创建x Sham for Object.createmodule.exports boolean :eject_button: 此方法方法使用指定的原型对象和属性创建一个新对象。 类型:出口成员返回: boolean具有指定原型对象和属性的新对象。 抛出: TypeError...

    Fastreport手册

    “Shape”对象 34 “Barcode”对象 34 “RichText 2.0”对象 35 创建报表 36 FastReport中的Bands 36 简单报表(列表) 39 主-从报表 40 主-细-子细报表 40 交叉报表 40 动态报表 41 bands分隔 42 分栏报表...

    Visual Basic 6编程技术大全 中译本扫描版带书签 2/2

    6.2.2方法的高级使用204 6.2.3属性的高级使用206 6.2.4 CallByName函数214 6.2.5属性216 6.3 对象的内部原形220 6.3.1对象变量的实质是什么220 6.3.2对象下面的秘密222 6.3.3重述对象关键字226 6.3.4 Class_...

    Visual Basic 6编程技术大全 中译本扫描版带书签 1/2

    6.2.2方法的高级使用204 6.2.3属性的高级使用206 6.2.4 CallByName函数214 6.2.5属性216 6.3 对象的内部原形220 6.3.1对象变量的实质是什么220 6.3.2对象下面的秘密222 6.3.3重述对象关键字226 6.3.4 Class_...

    Silverlight2.0功能展示Demo源码

    OpenWriteAsync(Uri address, string method, Object userToken) - 打开流以使用指定的方法向指定的 URI 写入数据 19、Silverlight(21) - 2.0通信之WebRequest和WebResponse, 对指定的URI发出请求以及接收响应 介绍...

    ZendFramework中文文档

    14.1.3. 使用静态 get() 方法 14.2. 标准过滤器类 14.2.1. Alnum 14.2.2. Alpha 14.2.3. BaseName 14.2.4. Digits 14.2.5. Dir 14.2.6. HtmlEntities 14.2.7. Int 14.2.8. RealPath 14.2.9. StringToLower...

    PyQt4 精彩实例分析26个例子

    第6行设定tr方法使用u邯8编码来解析文字。 第13行设置程序的标题。 第15到17行创建各个按钮控件。 第19行创建一个 LIne edit类实例 filelineedit,用米显示选择的文件名。 第20行创建一个 FRame类实例 doorframe,当...

    SuperButton-这真的可能是最好用的按钮了.zip

    大概分为以下几个步骤:在xml布局里面按照设计稿的尺寸位置写一个Textview按照设计稿规定的颜色和圆角在drawable目录下创建一个shape文件将这个shape文件作为Textview的背景这样一个很标准的按钮就诞生了,然后就...

Global site tag (gtag.js) - Google Analytics