Android layerlist clip shape Selector 详细介绍及使用.docx

Android layerlist clip shape Selector 详细介绍及使用Android layer-list clip shape Selector 详细介绍及使用 目录(?)- 1. Shaape 1. 简介 2. 使用的方法 3. 属性 2. Selector 1. 简介 2. 使用的方法 3. layer-list 1. 简介 2. 例子 4. 最后 <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 plaincopyprint?1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. <?xml version="1.0" encoding="utf-8" ?> <selector xmlns:Android=":/ <!- 默认时的背景图片-> <item Android:drawable="drawable/pic1" /> <!- 没有焦点时的背景图片 -> <item Android:state_window_focused="false" android:drawable="drawable/pic_blue" /> <!- 非触摸模式下获得焦点并单击时的背景图片 -> <item Android:state_focused="true" android:state_pressed="true" android:drawable= "drawable/pic_red" /> <!- 触摸模式下单击时的背景图片-> <item Android:state_focused="false" Android:state_pressed="true" Android:drawable="drawable/pic_pink" /> <!-选中时的图片背景-> <item Android:state_selected="true" android:drawable="drawable/pic_orange" /> <!-获得焦点时的图片背景-> <item Android:state_focused="true" 30. 31. 32. Android:drawable="drawable/pic_green" /> </selector> 3.layer-list 简介： 将多个图片或上面两种效果按照顺序层叠起来 例子： html view plaincopyprint? 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android=":/ <item> <bitmap android:src="drawable/android_red" android:gravity="center" /> </item> <item android:top="10dp" android:left="10dp"> <bitmap android:src="drawable/android_green" android:gravity="center" /> </item> <item android:top="20dp" android:left="20dp"> <bitmap android:src="drawable/android_blue" android:gravity="center" /> </item> </layer-list> html view plaincopyprint? 1. 2. 3. 4. <ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="drawable/layers" /> 效果图： 4.最后 以上三个标签可以揉合到一块儿来使用，所要实现的效果就是上面三种标签的说明，比如下面这个例子： html view plaincopyprint?1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. <selector xmlns:android=":/ <item android:state_pressed="true"> <layer-list> <item android:bottom="8.0dip"> <shape> <solid android:color="#ffaaaaaa" /> </shape> </item> <item> <shape> <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" /> <solid android:color="#ffaaaaaa" /> 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" /> </shape> </item> <item> <shape> <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" /> <solid android:color="color/setting_item_bgcolor_press" /> </shape> </item> </layer-list> </item> <item> <layer-list> <item android:bottom="8.0dip"> <shape> <solid android:color="#ffaaaaaa" /> </shape> </item> <item> <shape> <corners android:bottomLeftRadius="4.0dip" android:bottomRightRadius="4.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" /> <solid android:color="#ffaaaaaa" /> <padding android:bottom="1.0dip" android:left="1.0dip" android:right="1.0dip" android:top="0.0dip" /> </shape> </item> <item> <shape> <corners android:bottomLeftRadius="3.0dip" android:bottomRightRadius="3.0dip" android:topLeftRadius="1.0dip" android:topRightRadius="1.0dip" /> <solid android:color="color/setting_item_bgcolor" /> </shape> </item> </layer-list> </item> </selector>