本节引言:
前面两节我们已经了解了Android中的2/3的Drawable,在本节中我们就把剩下的
1/3给学习了吧~他们分别是:
LayerDrawable,TransitionDrawable,LevelListDrawable和StateListDrawable,
好了,开始本节内容~
本节正文:
Android各种Drawable的大纲图:
1.LayerDrawable:
其实就是层图形对象,包含一个Drawable数组,然后按照数组对应的顺序来绘制他们,索引
值最大的Drawable会被绘制在最上层!虽然这些Drawable会有交叉或者重叠的区域,但
他们位于不同的层,所以并不会相互影响,以<layer-list../>作为根节点！
相关属性:
drawable:引用的位图资源,如果为空徐璈有一个Drawable类型的子节点
left:层相对于容器的左边距
right:层相对于容器的右边距
top:层相对于容器的上边距
bottom:层相对于容器的下边距
id:层的id
代码示例:
自定义拖动条外观(seekbar)与层叠的图片:
先看下效果图吧:
如图,一个自定义的进度条和三张层叠的图片！
代码也是很简单的,关于seekbar的属性就不讲解了~
seekbar用到的layerlist_one.xml:
[html] view plain copy print ?
1. <?xml version="1.0" encoding="utf-8"?>
2. <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
3.
4. <item
5. android:id="@android:id/background"
6. android:drawable="@drawable/seek_bkg"/>
7. <item
8. android:id="@android:id/progress"
9. android:drawable="@drawable/bar"/>
10.
11. </layer-list>
层叠图片的layerlist_two.xml:
[html] view plain copy print ?
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/pig" android:gravity="center"/>
5. </item>
6. <item android:top="25dp" android:left="25dp">
7. <bitmap android:src="@drawable/pig" android:gravity="center"/>
8. </item>
9. <item android:top="50dp" android:left="50dp">
10. <bitmap android:src="@drawable/pig" android:gravity="center"/>
11. </item>
12.
13. </layer-list>
引用他们的main_activity.xml:
[html] view plain copy print ?
1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2. xmlns:tools="http://schemas.android.com/tools"
3. android:layout_width="match_parent"
4. android:layout_height="match_parent"
5. android:gravity="center"
6. android:orientation="vertical"
7. tools:context="com.jay.example.drawabletest.MainActivity" >
8.
9. <SeekBar
10. android:layout_width="match_parent"
11. android:layout_height="wrap_content"
12. android:indeterminateDrawable="@android:drawable/progress_indeterminate_horizontal"
13. android:indeterminateOnly="false"
14. android:maxHeight="8dp"
15. android:minHeight="8dp"
16. android:progressDrawable="@drawable/layerlist_one"
17. android:thumb="@drawable/woniu"
18. android:thumbOffset="10dp" />
19.
20. <ImageView
21. android:layout_width="wrap_content"
22. android:layout_height="wrap_content"
23. android:src="@drawable/layerlist_two"/>
24.
25. </LinearLayout>好了,LayerDrawable就这么简单~
2.TransitionDrawable:
这个Drawable是前者LayerDrawable的一个子类,但是他值管理2层!!!Drawable,并且提供了
透明度变化的动画,可以控制一层Drawable过度到另一层Drawable的动画效果,根节点
为<transition../>,记住只能有2个item哦!多了也没用=-=,属性和前者差不多,
我们需要调用startTransition方法才能启动两层间的切换动画;我们也可以反过来播放
动画:reverseTransition方法!
一个简单的例子:
代码很简单,创建一个TransitionDrawable的xml文件:
[html] view plain copy print ?
1. <?xml version="1.0" encoding="utf-8"?>
2. <transition xmlns:android="http://schemas.android.com/apk/res/android" >
3. <item android:drawable="@drawable/meinv1"/>
4. <item android:drawable="@drawable/meinv2"/>
5. </transition>
接着main_activity弄个ImageView设置下src指向上述drawable,接着MainActivity中:
[java] view plain copy print ?
1. package com.jay.example.drawabletest;
2.
3. import android.app.Activity;
4. import android.graphics.drawable.AnimationDrawable;
5. import android.graphics.drawable.TransitionDrawable;
6. import android.os.Bundle;
7. import android.os.Handler;
8. import android.widget.ImageView;
9.
10. public class MainActivity extends Activity {
11.
12. private ImageView imgShow;
13.
14. @Override
15. protected void onCreate(Bundle savedInstanceState) {
16. super.onCreate(savedInstanceState);
17. setContentView(R.layout.activity_main);
18. imgShow = (ImageView) findViewById(R.id.imgShow);
19. TransitionDrawable td = (TransitionDrawable) imgShow.getDrawable();
20. 3000);
21. //你可以可以反过来播放，使用reverseTransition即可~
22. //td.reverseTransition(3000);
23. }
24. }
好了,就这么简单,就一次,读者也觉得没意思吧,美女没看够对吧~
好吧,这里找到别人写的一个代码,这里给大家贴下,有兴趣的可以研究下,不算复杂~
原文链接:
详细代码如下:(核心就是hanler定时,修改Transition中两个图片~)
[java] view plain copy print ?
运行效果图:
1. package com.jay.example.drawabletest;
2.
3. import android.app.Activity;
4. import android.graphics.Bitmap;
5. import android.graphics.BitmapFactory;
6. import android.graphics.drawable.BitmapDrawable;
7. import android.graphics.drawable.Drawable;
8. import android.graphics.drawable.TransitionDrawable;
9. import android.os.Bundle;
10. import android.os.Handler;
11. import android.os.Message;
12. import android.widget.ImageView;
13.
14. public class MainActivity extends Activity {
15.
16. private int change = 0;
17. private ImageView imgShow;
18. private Drawable[] drawables;
19. private int[] ids = new int[] { R.drawable.meinv1, R.drawable.meinv2,
20. R.drawable.meinv3, R.drawable.meinv4, R.drawable.meinv5 };
21. // 处理transition的改变
22. private Handler handler = new Handler(new Handler.Callback() {
23. public boolean handleMessage(Message msg) {
24. int duration = msg.arg1;
25. null;
26. new TransitionDrawable(new Drawable[] {
27. drawables[change % ids.length],
28. 1) % ids.length] });
29. change++;
30. imgShow.setImageDrawable(transitionDrawable);
31. transitionDrawable.startTransition(duration);
32. return false;
33. }
34. });
35.
36. @Override
37. protected void onCreate(Bundle savedInstanceState) {
38. super.onCreate(savedInstanceState);
39. setContentView(R.layout.activity_main);
40. imgShow = (ImageView) findViewById(R.id.imgShow);
41.
42. // 根据资源id,把图片都加载成Drawable~
43. new BitmapFactory.Options();
44. true;
45. BitmapFactory.decodeResource(getResources(), R.drawable.meinv1, opts);
46. 1, 720 * 1280);
47. false;
48. new Drawable[ids.length];
49. try {
50. for (int i = 0; i < ids.length; i++) {// for循环，加载5个drawable资源
51. Bitmap bmp = BitmapFactory.decodeResource(getResources(),
52. ids[i], opts);
53. new BitmapDrawable(bmp);
54. }
55. catch (Exception e) {
56. e.printStackTrace();
57. }
58. // 开启线程，改变transition
59. new Thread(new MyRunnable()).start();
60. }
61.
62. // 线程，去发送消息，让transition一直改变
63. private class MyRunnable implements Runnable {
64. public void run() {
65. while (true) {
66. int duration = 3000;// 改变的间隔
67. Message message = handler.obtainMessage();
68. message.arg1 = duration;
69. handler.sendMessage(message);
70. try {
71. Thread.sleep(duration);
72. catch (InterruptedException e) {
73. e.printStackTrace();
74. }
75. }
76. }
77. }
78.
79. // 计算合适的图片大小
80. public static int computeSampleSize(BitmapFactory.Options options,
81. int minSideLength, int maxNumOfPixels) {
82. int initialSize = computeInitialSampleSize(options, minSideLength,
83. maxNumOfPixels);
84.
85. int roundedSize;
86. if (initialSize <= 8) {
87. 1;
88. while (roundedSize < initialSize) {
89. 1;
90. }
91. else {
92. 7) / 8 * 8;
93. }
94.
95. return roundedSize;
96. }
97.
98. // 计算合适的图片大小
99. private static int computeInitialSampleSize(BitmapFactory.Options options,
100. int minSideLength, int maxNumOfPixels) {
101. double w = options.outWidth;
102. double h = options.outHeight;
103.
104. int lowerBound = (maxNumOfPixels == -1) ? 1 : (int) Math.ceil(Math
105. .sqrt(w * h / maxNumOfPixels));
106. int upperBound = (minSideLength == -1) ? 128 : (int) Math.min(
107. Math.floor(w / minSideLength), Math.floor(h / minSideLength));
108.
109. if (upperBound < lowerBound) {
110. // return the larger one when there is no overlapping zone.
111. return lowerBound;
112. }
113.
114. if ((maxNumOfPixels == -1) && (minSideLength == -1)) {
115. return 1;
116. else if (minSideLength == -1) {
117. return lowerBound;
118. else {
119. return upperBound;
120. }
121. }
122. }
3.LevelListDrawable:
这个是用来管理一组Drawable的,我们可以为里面的drawable设置不同的level,
当他们绘制的时候,会根据level属性值获取对应的drawable绘制到画布上,根节点
为:<level-list.../>他并没有属性节点哦,就是说我们能做的只是设置每个<item>
item可设置的相关属性:
drawable:引用的位图资源,如果为空徐璈有一个Drawable类型的子节点
minlevel:level对应的最小值
maxlevel:level对应的最大值
代码示例:
我们动态地修改level值,实现下述效果:
代码实现:
首先,我们编写一个LevelListDrawable的xml资源文件:
[html] view plain copy print ?
1. <?xml version="1.0" encoding="utf-8"?>
2. <level-list xmlns:android="http://schemas.android.com/apk/res/android" >
3. <item android:drawable="@drawable/cir1" android:maxLevel="2000"/>
4. <item android:drawable="@drawable/cir2" android:maxLevel="4000"/>
5. <item android:drawable="@drawable/cir3" android:maxLevel="6000"/>
6. <item android:drawable="@drawable/cir4" android:maxLevel="8000"/>
7. <item android:drawable="@drawable/cir5" android:maxLevel="10000"/>
8. </level-list>
接下来就到MainActivity,一个Timer定时器,handler修改level值即可~
[java] view plain copy print ?
1. package com.jay.example.drawabletest;
2.
3. import java.util.Timer;
4. import java.util.TimerTask;
5.
6. import android.app.Activity;
7. import android.graphics.drawable.LevelListDrawable;
8. import android.os.Bundle;
9. import android.os.Handler;
10. import android.os.Message;
11. import android.widget.ImageView;
12.
13. public class MainActivity extends Activity {
14.
15. private ImageView imgShow;
16. private LevelListDrawable ld;
17. private Handler handler = new Handler()
18. {
19. public void handleMessage(Message msg)
20. {
21. if(msg.what == 0x123)
22. {
23. if(ld.getLevel() > 10000)ld.setLevel(0);
24. else imgShow.setImageLevel(ld.getLevel()+2000);
25. }
26. };
27. };
28.
29. @Override
30. protected void onCreate(Bundle savedInstanceState) {
31. super.onCreate(savedInstanceState);
32. setContentView(R.layout.activity_main);
33. imgShow = (ImageView) findViewById(R.id.imgShow);
34. ld = (LevelListDrawable) imgShow.getDrawable();
35. 0);
36. new Timer().schedule(new TimerTask() {
37. @Override
38. public void run() {
39. 0x123);
40. }
41. 0,1000);
42.
43. }
44. }4.StateListDrawable:
终于来到最后一个Drawable了,看上去不熟悉吧,其实他就是我们平时为按钮设置动态点击背景的
selector,哈哈,再熟不过了吧~比如按钮有按下,选中,点击,不可用等等状态,另外今天群里有个朋友
问题布局弄这个selecotr可以,当然可以啦,不过要先为布局设置一个Clickable = "true"即可!
我们可以设置的属性如下:
可设置的属性:
drawable:引用的Drawable位图,我们可以把他放到最前面,就表示组件的正常状态~
state_focused:是否获得焦点
state_window_focused:是否获得窗口焦点
state_enabled:控件是否可用
state_checkable:控件可否被勾选,eg:checkbox
state_checked:控件是否被勾选
state_selected:控件是否被选择,针对有滚轮的情况
state_pressed:控件是否被按下
state_active:控件是否处于活动状态,eg:slidingTab
state_single:控件包含多个子控件时,确定是否只显示一个子控件
state_first:控件包含多个子控件时,确定第一个子控件是否处于显示状态
state_middle:控件包含多个子控件时,确定中间一个子控件是否处于显示状态
state_last:控件包含多个子控件时,确定最后一个子控件是否处于显示状态
代码演示:
就弄个最简单的selector,按钮按下与非按下的,这个是笔者一个工程里直接扣出来的:
内容可以直接无视,主要是看登录按钮的点击效果哈~
[html] view plain copy print ?
1. <?xml version="1.0" encoding="utf-8"?>
2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >
3. <item android:state_pressed="false" android:drawable="@drawable/ic_btn_select_add_course_normal"/>
4. <item android:state_pressed="true" android:drawable="@drawable/ic_btn_select_add_course_pressed"/>
5. </selector>
接着background设置下,你懂的,效果图如下:
