Android UI集锦——1.Android Drawable分类汇总(3/3)

本节引言:

前面两节我们已经了解了Android中的2/3的Drawable,在本节中我们就把剩下的

1/3给学习了吧~他们分别是:

LayerDrawable,TransitionDrawable,LevelListDrawable和StateListDrawable,

好了,开始本节内容~



本节正文:

Android各种Drawable的大纲图:



1.LayerDrawable:

其实就是层图形对象,包含一个Drawable数组,然后按照数组对应的顺序来绘制他们,索引

值最大的Drawable会被绘制在最上层!虽然这些Drawable会有交叉或者重叠的区域,但

他们位于不同的层,所以并不会相互影响,以作为根节点!


相关属性:

drawable:引用的位图资源,如果为空徐璈有一个Drawable类型的子节点

left:层相对于容器的左边距

right:层相对于容器的右边距

top:层相对于容器的上边距

bottom:层相对于容器的下边距

id:层的id


代码示例:

自定义拖动条外观(seekbar)与层叠的图片:

先看下效果图吧:

Android UI集锦——1.Android Drawable分类汇总(3/3)_第1张图片


如图,一个自定义的进度条和三张层叠的图片!

代码也是很简单的,关于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的动画效果,根节点

,记住只能有2个item哦!多了也没用=-=,属性和前者差不多,

我们需要调用startTransition方法才能启动两层间的切换动画;我们也可以反过来播放

动画:reverseTransition方法!


一个简单的例子:

Android UI集锦——1.Android Drawable分类汇总(3/3)_第2张图片


代码很简单,创建一个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.             td.startTransition(3000);  
  21.             //你可以可以反过来播放,使用reverseTransition即可~  
  22.             //td.reverseTransition(3000);  
  23.     }  
  24. }  

好了,就这么简单,就一次,读者也觉得没意思吧,美女没看够对吧~

好吧,这里找到别人写的一个代码,这里给大家贴下,有兴趣的可以研究下,不算复杂~

原文链接:http://blog.csdn.net/lonelyroamer/article/details/8243606

详细代码如下:(核心就是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.             TransitionDrawable transitionDrawable = null;  
  26.             transitionDrawable = new TransitionDrawable(new Drawable[] {  
  27.                     drawables[change % ids.length],  
  28.                     drawables[(change + 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.         BitmapFactory.Options opts = new BitmapFactory.Options();  
  44.         opts.inJustDecodeBounds = true;  
  45.         BitmapFactory.decodeResource(getResources(), R.drawable.meinv1, opts);  
  46.         opts.inSampleSize = computeSampleSize(opts, -1720 * 1280);  
  47.         opts.inJustDecodeBounds = false;  
  48.         drawables = 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.                 drawables[i] = 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.             roundedSize = 1;  
  88.             while (roundedSize < initialSize) {  
  89.                 roundedSize <<= 1;  
  90.             }  
  91.         } else {  
  92.             roundedSize = (initialSize + 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绘制到画布上,根节点

为:他并没有属性节点哦,就是说我们能做的只是设置每个


item可设置的相关属性:

drawable:引用的位图资源,如果为空徐璈有一个Drawable类型的子节点

minlevel:level对应的最小值

maxlevel:level对应的最大值


代码示例:

我们动态地修改level值,实现下述效果:

Android UI集锦——1.Android Drawable分类汇总(3/3)_第3张图片


代码实现:

首先,我们编写一个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.         imgShow.setImageLevel(0);  
  36.         new Timer().schedule(new TimerTask() {  
  37.             @Override  
  38.             public void run() {  
  39.                 handler.sendEmptyMessage(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设置下,你懂的,效果图如下:

Android UI集锦——1.Android Drawable分类汇总(3/3)_第4张图片




最后说两句:

好的,一连三篇介绍Android中的Drawable,不知不觉已经到了尾声了,读者们有没有get到新姿势呢?

下一Part我们就来学一些图形处理的基础,Bitmap,paint,canvas,path等等,敬请期待~

如果你觉得本文不错的话,给个赞让更多的朋友看到如何?


你可能感兴趣的:(Android UI集锦——1.Android Drawable分类汇总(3/3))