Android开发:shape和selector和layer-list的(详细说明)

简介: 转自 :http://blog.csdn.net/brokge/article/details/9713041 <shape>和<selector>在Android UI设计中经常用到。比如我们要自定义一个圆角Button,点击Button有些效果的变化,就要用到<shape>和<selector>。可以这样说,<shap

转自 :http://blog.csdn.net/brokge/article/details/9713041


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

在看这篇文章之前,可以看下这个小例子:镂空按钮的实现

1.Shape
简介

作用:XML中定义的几何形状

位置:res/drawable/文件的名称.xml

使用的方法:

Java代码中:R.drawable.文件的名称

XML中:Android:background="@drawable/文件的名称"

属性:

<shape>  Android:shape=["rectangle" | "oval" | "line" | "ring"]

其中rectagle矩形,oval椭圆,line水平直线,ring环形

<shape>中子节点的常用属性:

<gradient>  渐变

Android:startColor  

起始颜色

Android:endColor  

结束颜色             

Android:angle  

渐变角度,0从左到右,90表示从下到上,数值为45的整数倍,默认为0;

Android:type  

渐变的样式 liner线性渐变 radial环形渐变 sweep

<solid >  填充

Android:color  

填充的颜色

<stroke >描边

Android:width 

描边的宽度

Android:color 

描边的颜色

Android:dashWidth

 表示'-'横线的宽度

Android:dashGap 

表示'-'横线之间的距离

<corners >圆角

Android:radius  

圆角的半径 值越大角越圆

Android:topRightRadius  

右上圆角半径

Android:bottomLeftRadius 

右下圆角角半径

Android:topLeftRadius 

左上圆角半径

Android:bottomRightRadius 

左下圆角半径

<padding >填充

android:bottom="1.0dip" 

底部填充

android:left="1.0dip" 

左边填充

android:right="1.0dip" 

右边填充

android:top="0.0dip" 

上面填充

2.Selector
简介

根据不同的选定状态来定义不同的现实效果

分为四大属性:

android:state_selected 是选中

android:state_focused 是获得焦点

android:state_pressed 是点击

android:state_enabled 是设置是否响应事件,指所有事件

另:

android:state_window_focused 默认时的背景图片

引用位置:res/drawable/文件的名称.xml

使用的方法:
Java代码中:R.drawable.文件的名称
XML中:Android:background="@drawable/文件的名称"
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8" ?>       
  2. <selector xmlns:Android="http://schemas.android.com/apk/res/android">     
  3. <!-- 默认时的背景图片-->      
  4. <item Android:drawable="@drawable/pic1" />        
  5. <!-- 没有焦点时的背景图片 -->      
  6. <item   
  7.    Android:state_window_focused="false"        
  8.    android:drawable="@drawable/pic_blue"   
  9.    />       
  10. <!-- 非触摸模式下获得焦点并单击时的背景图片 -->      
  11. <item   
  12.    Android:state_focused="true"   
  13.    android:state_pressed="true"     
  14.    android:drawable"@drawable/pic_red"   
  15.    />     
  16. <!-- 触摸模式下单击时的背景图片-->      
  17. <item   
  18.    Android:state_focused="false"   
  19.    Android:state_pressed="true"     
  20.    Android:drawable="@drawable/pic_pink"   
  21.    />      
  22. <!--选中时的图片背景-->      
  23. <item   
  24.    Android:state_selected="true"   
  25.    android:drawable="@drawable/pic_orange"   
  26.    />       
  27. <!--获得焦点时的图片背景-->      
  28. <item   
  29.    Android:state_focused="true"   
  30.    Android:drawable="@drawable/pic_green"   
  31.    />       
  32. </selector>   


3.layer-list   
简介:
将多个图片或上面两种效果按照顺序层叠起来
例子:

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android">  
  3.     <item>  
  4.       <bitmap android:src="@drawable/android_red"  
  5.         android:gravity="center" />  
  6.     </item>  
  7.     <item android:top="10dp" android:left="10dp">  
  8.       <bitmap android:src="@drawable/android_green"  
  9.         android:gravity="center" />  
  10.     </item>  
  11.     <item android:top="20dp" android:left="20dp">  
  12.       <bitmap android:src="@drawable/android_blue"  
  13.         android:gravity="center" />  
  14.     </item>  
  15. </layer-list>  
[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <ImageView  
  2.     android:layout_height="wrap_content"  
  3.     android:layout_width="wrap_content"  
  4.     android:src="@drawable/layers" />  


效果图:



4.最后

以上三个标签可以揉合到一块儿来使用,所要实现的效果就是上面三种标签的说明,比如下面这个例子:


[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
  2.     <item android:state_pressed="true">  
  3.         <layer-list>  
  4.             <item android:bottom="8.0dip">  
  5.                 <shape>  
  6.                     <solid android:color="#ffaaaaaa" />  
  7.                 </shape>  
  8.             </item>  
  9.             <item>  
  10.                 <shape>  
  11.                     <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
  12.   
  13.                     <solid android:color="#ffaaaaaa" />  
  14.   
  15.                     <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />  
  16.                 </shape>  
  17.             </item>  
  18.             <item>  
  19.                 <shape>  
  20.                     <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
  21.   
  22.                     <solid android:color="@color/setting_item_bgcolor_press" />  
  23.                 </shape>  
  24.             </item>  
  25.         </layer-list>  
  26.     </item>  
  27.     <item>  
  28.         <layer-list>  
  29.             <item android:bottom="8.0dip">  
  30.                 <shape>  
  31.                     <solid android:color="#ffaaaaaa" />  
  32.                 </shape>  
  33.             </item>  
  34.             <item>  
  35.                 <shape>  
  36.                     <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
  37.   
  38.                     <solid android:color="#ffaaaaaa" />  
  39.   
  40.                     <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" />  
  41.                 </shape>  
  42.             </item>  
  43.             <item>  
  44.                 <shape>  
  45.                     <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" />  
  46.   
  47.                     <solid android:color="@color/setting_item_bgcolor" />  
  48.                 </shape>  
  49.             </item>  
  50.         </layer-list>  
  51.     </item>  
  52. </selector>  




目录
相关文章
|
3天前
|
JavaScript 搜索推荐 Android开发
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
22 8
【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
|
15天前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
115 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
12天前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
36 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
28天前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
79 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
1月前
|
Dart 前端开发 Android开发
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
2月前
|
搜索推荐 前端开发 API
探索安卓开发中的自定义视图:打造个性化用户界面
在安卓应用开发的广阔天地中,自定义视图是一块神奇的画布,让开发者能够突破标准控件的限制,绘制出独一无二的用户界面。本文将带你走进自定义视图的世界,从基础概念到实战技巧,逐步揭示如何在安卓平台上创建和运用自定义视图来提升用户体验。无论你是初学者还是有一定经验的开发者,这篇文章都将为你打开新的视野,让你的应用在众多同质化产品中脱颖而出。
77 19
|
2月前
|
开发框架 Android开发 iOS开发
安卓与iOS开发中的跨平台策略:一次编码,多平台部署
在移动应用开发的广阔天地中,安卓和iOS两大阵营各占一方。随着技术的发展,跨平台开发框架应运而生,它们承诺着“一次编码,到处运行”的便捷。本文将深入探讨跨平台开发的现状、挑战以及未来趋势,同时通过代码示例揭示跨平台工具的实际运用。
173 3
|
8月前
|
安全 Java
java线程之List集合并发安全问题及解决方案
java线程之List集合并发安全问题及解决方案
1120 1
|
7月前
|
Java API Apache
怎么在在 Java 中对List进行分区
本文介绍了如何将列表拆分为给定大小的子列表。尽管标准Java集合API未直接支持此功能,但Guava和Apache Commons Collections提供了相关API。
|
7月前
|
运维 关系型数据库 Java
PolarDB产品使用问题之使用List或Range分区表时,Java代码是否需要进行改动
PolarDB产品使用合集涵盖了从创建与管理、数据管理、性能优化与诊断、安全与合规到生态与集成、运维与支持等全方位的功能和服务,旨在帮助企业轻松构建高可用、高性能且易于管理的数据库环境,满足不同业务场景的需求。用户可以通过阿里云控制台、API、SDK等方式便捷地使用这些功能,实现数据库的高效运维与持续优化。

热门文章

最新文章

  • 1
    【Azure Blob】操作Blob之分页List Blob一致性、索引时延及Tag支持问题解答
  • 2
    如何修复 Android 和 Windows 不支持视频编解码器的问题?
  • 3
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 5
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
  • 6
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    Android经典面试题之Kotlin中Lambda表达式和匿名函数的区别
  • 9
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 10
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡