android学习之TransitionDrawable 实现变化效果

Drawable的例子，体现出Drawable的强大功能。Android SDK中说明了Drawable主要的作用是：在XML中定义各种动画，然后把 XML当作Drawable资源来读取，通过Drawable显示动画。

下面举个使用TransitionDrawable 的例子，创建一个Android工程，然后再这个工程的基础上修改，修改过程如下：
1、去掉layout/main.xml中的TextView，增加ImagView，如下：

<ImageView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:tint=”#55ff0000″
android:src=”@drawable/my_image”/>

2、创建一个XML文件，命名为expand_collapse.xml，内容如下：

<?xml version=”1.0″ encoding=”UTF-8″?>
<transition xmlns:android=”http://schemas.android.com/apk/res/android”>
<item android:drawable=”@drawable/image_expand”/>
<item android:drawable=”@drawable/image_collapse”/>
</transition>

需要3张png图片，存放到res\drawable目录下，3张图片分别命名为：my_image.png、image_expand.png、image_collapse.png。

3、修改Activity中的代码，内容如下：

LinearLayout mLinearLayout;
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
mLinearLayout = new LinearLayout(this);
ImageView i = new ImageView(this);
i.setAdjustViewBounds(true);
i.setLayoutParams(new Gallery.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
mLinearLayout.addView(i);
setContentView(mLinearLayout);
Resources res = getResources();
TransitionDrawable transition =
(TransitionDrawable) res.getDrawable(R.drawable.expand_collapse);
i.setImageDrawable(transition);
ansition.startTransition(10000);
}

4、如果修改的没有错误，运行程序，结果显示如下：
初始图片

[img]http://dl.iteye.com/upload/attachment/495304/5dcf8f96-ec77-3a36-9758-eed5057a55da.jpg[/img]

过渡中的图片

[img]http://dl.iteye.com/upload/attachment/495306/62b1067b-fbe3-38de-b592-68f736be86f3.jpg[/img]

最后的图片

[img]http://dl.iteye.com/upload/attachment/495308/86d76fed-a181-3af8-8dd0-2d38e7b847a3.jpg[/img]


屏幕上动画显示的是：从图片image_expand.png过渡到image_collapse.png，也就是我们在expand_collapse.xml中定义的一个transition动画。看完这个例子，你对Drawable的理解是否又深入些？这里提供这个程序的源代码，供大家下载，可以在这个例子的基础上去体会其他的Drawable，来加深对Drawable的理解。

总结说明
通过以上2个例子程序，相信对Drawable会有一定的认识了，在以后的篇幅中会介绍更多的例子，更加深入的学习和理解Drawable。具体还有哪些Drawable，大家到Android SDK去深入学习吧。



转贴至:http://www.moandroid.com/?p=784

实例:

[img]http://dl.iteye.com/upload/attachment/495312/0fffb1af-3bdd-3750-a931-712d81158921.png[/img]


[img]http://dl.iteye.com/upload/attachment/495310/ce15dd35-5e1c-3c85-896a-f11a882b5e31.png[/img]


实现上图效果:

xml部份文件:

 <SlidingDrawer  
     android:id="@+id/slidingdrawer" 
     android:layout_width="fill_parent" 
     android:layout_height="fill_parent" 
     android:orientation="horizontal" 
     android:handle="@+id/handle" 
     android:content="@+id/content">  
     <ImageView  
              android:id="@+id/handle" 
              android:layout_width="56dip"
              android:layout_height="fill_parent"
              android:background="@drawable/handle"

              android:focusable="true"
              android:clickable="true"

              android:scaleType="center"    
              android:src="@drawable/handle_icon"
         />  
     <LinearLayout  
         android:id="@+id/content" 
         android:layout_width="fill_parent" 
         android:layout_height="fill_parent" 
         android:background="#778899">  
         <Button  
             android:id="@+id/button" 
             android:layout_width="wrap_content" 
             android:layout_height="wrap_content" 
             android:text="Button" 
         />  
         <EditText  
             android:id="@+id/editText" 
             android:layout_width="fill_parent" 
             android:layout_height="wrap_content" 
         />  
     </LinearLayout>  
 </SlidingDrawer>  

hand_icon.xml

<?xml version="1.0" encoding="utf-8"?>
<transition xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_tray_expand"  />
    <item android:drawable="@drawable/ic_tray_collapse"  />
</transition>

hand.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_window_focused="false" android:state_enabled="true" android:drawable="@drawable/tray_handle_normal" />
    <item android:state_pressed="true" android:drawable="@drawable/tray_handle_pressed" />
    <item android:state_focused="true" android:state_enabled="true" android:drawable="@drawable/tray_handle_selected" />
    <item android:state_enabled="true" android:drawable="@drawable/tray_handle_normal" />
    <item android:state_focused="true" android:drawable="@drawable/tray_handle_selected" />
</selector>

代码部份:

mDrawer = (SlidingDrawer) findViewById(R.id.slidingdrawer);
  final SlidingDrawer drawer = mDrawer;

  mLinearLayout = (LinearLayout) drawer.getContent();
  final LinearLayout grid = mLinearLayout;



  mImageView = (ImageView) drawer.findViewById(R.id.handle);
  mHandleIcon = (TransitionDrawable) mImageView.getDrawable();
  mHandleIcon.setCrossFadeEnabled(true);



  final DrawerManager drawerManager = new DrawerManager();
  drawer.setOnDrawerOpenListener(drawerManager);
  drawer.setOnDrawerCloseListener(drawerManager);
  drawer.setOnDrawerScrollListener(drawerManager);




private class DrawerManager implements SlidingDrawer.OnDrawerOpenListener,
   SlidingDrawer.OnDrawerCloseListener,
   SlidingDrawer.OnDrawerScrollListener {
  private boolean mOpen;

  public void onDrawerOpened() {
   Log.v(tag, "onDrawerOpened");
   if (!mOpen) {
    mHandleIcon.reverseTransition(150);
    mOpen = true;
   }
  }

  private void offsetBoundsToDragLayer(Rect bounds, View view) {
   view.getDrawingRect(bounds);
   Log.v(tag, "offsetBoundsToDragLayer");
  }

  public void onDrawerClosed() {
   Log.v(tag, "onDrawerClosed");
   if (mOpen) {
    mHandleIcon.reverseTransition(150);
    mOpen = false;
   }

  }

  public void onScrollStarted() {
   if (PROFILE_DRAWER) {
    android.os.Debug.startMethodTracing("/sdcard/launcher-drawer");
   }
  }

  public void onScrollEnded() {
   if (PROFILE_DRAWER) {
    android.os.Debug.stopMethodTracing();
   }
  }
 }